Web Frontend: Task: Rich Text Editor

31st March 2021 at 11:03pm

网页上的编辑器,一般供用户输入 UGC 内容用,比如在 Github 上写 issue 时会有简易的 Markdown 编辑器供用户使用。

编辑器需要考虑:

  • 富文本支持:可以用 Markdown,也可以用传统的富文本(生成 HTML)
  • 定能 toolbar 的能力
  • 剪贴板的支持:比如能否粘贴一个图片到文中(data URI 或者上传文件),甚至是粘贴表格
  • 历史纪录能力:以支持 undo、redo
  • 代码高亮
  • 好的 API 接口

尽量使用一整套的编辑器解决方案,而不是使用单个的库(比如这类 Markdown 库仅支持 Markdown 的解析和渲染,并没有提供 toolbar、剪贴板等能力)。

富文本编辑器(非 Markdown)领域的玩家有:

直观的印象是:

  • CKEditor 及 TinyMCE 由于发展多年,它的功能更强大,更靠近类似 Word 提供的能力。但 CKEditor 是收费的,费用还不低
  • Quill 更轻量,以及 API 上设计得更好,更适合开发者做定制及交互。但 Quill 功能相对较少,比如 不支持表格
  • Facebook 开源的 Draft.js,看起来不如 Quill 好

Quill

Quill 写了一篇 文章 讲述它与其他编辑器的区别。我并没有深入看。

对于 Quill,有社区维护的 ReactQuill 项目提供了 React 组件。也有一个 jira_clone 项目使用了 React ref 机制来 实现

Slate

Slate 作者提及它写 Slate 的 意图 时,表示它尝试过很多其他库,但是在一些问题上做得不好。

我一度被 [Slate][slate] 的理念所吸引,但是实际了解之后发现不符合我的需求:

  • 编辑器中的文本在 Slate 内部以一个 JSON 结构体保存,没有原生支持 Markdown
    • 虽然框架提供了机制与 Markdown 互转,但是互转的代码需要自己实现(还不容易),而且估计社区也没有好的实现
    • 这种情况下,如果想把文本存数据库,可能需要存这个 JSON 对象,这使得无法容易实现全平台支持,比如 iOS / Android 生态中可能没有相应库支持
  • 自己实现一套 UI 略复杂。如果想实现类似 Typora 的所见即所得融合文本的功能,它是比较合适的,但是实现成本会很高

方案总结

不考虑实时协作的情况下,实现类似 GitHub / GitLab 的轻量 Markdown 编辑器是比较好的选择。编辑时不能所见即所得,编辑好后点 preview 再转换成 Markdown。

其他方案实现成本略高。