网页上的编辑器,一般供用户输入 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。
其他方案实现成本略高。