花了三个多月,我用Flutter初步完成了一个富文本编辑器

5,082 阅读2分钟

多年以前一次偶然的机会,一名安卓开发小哥接触到了一个叫做flutter的框架,花了一点时间尝试过后,他被这种编写简单且支持多平台的框架所深深吸引

几年过后,小哥的心已经完全变成了flutter的形状bushi,他现在想给自己的全平台博客加上一个方便好用的富文本编辑功能,想找现成的编辑器,但找了很久始终没有合适自己的,最终一咬牙一跺脚,他决定不加这个功能了他决定自己编写一个

于是就有了这样的标题

接下来,就为大家介绍一下目前主要实现的一些功能

功能介绍

文本

加粗、下划线、中划线、斜体、链接、代码段

加粗下划线.gif

任务列表、有序无序列表、引用块、一二三级标题

任务列表有序无序列表.gif

表格

表格.gif

代码块

代码块.gif

分割线

分割线.gif

快捷键操作

撤销、恢复

撤销恢复.gif

复制、粘贴

复制粘贴.gif

换行、全选、缩进、反缩进

换行全选.gif

方向键的使用

方向键.gif

以上就是目前实现的绝大部分功能展示

篇尾

感兴趣的小伙伴可以在这里了解这个项目,觉得项目不错的话也不妨star一下:github.com/morn-fun/cr…

我也发布了可以线上体验的Web版,欢迎线上感受一下:morn-fun.github.io/crayon/

可以看到,目前仅仅只有文本相关的内容,比如像图片这一块就暂时没有实现

同时主要的操作都在桌面端上,说来也可乐,一个基于移动端跨平台的框架目前只实现了桌面端的效果,移动端还没有花时间去适配 什么倒反天罡

当然啦,看得到的和看不到的,都有很多需要完善的地方,所以目前只是以v0.6.0的版本开始发布,而不是v1.0.0,希望后面1.0.0发布的时候,它可以真正的作为一个日常写作工具,具备实际且稳定的生产力

以下是后面会逐步修改、完善的地方:

  • 无序列表与有序列表应该放在一个节点里面,而不是每个元素一个节点
  • TableNode作为一个容器节点,在代码设计上就应该要明确的划分,而不只是概念上划分
  • 目前的单元测试覆盖率只有60%,虽然节点相关核心代码都有覆盖到,不过要想真正的稳定还是不够
  • 复制、粘贴功能不够完善,需要有 Markdown Text → RichNode → Markdown Text 的转换逻辑
  • 我想虽然没有多少人愿意在手机上进行复杂的文本操作,但对移动端操作的设计与实现还是必要的