Web Frontend: Task: Web Editor

20th August 2020 at 2:19pm
Web Frontend: Task

网页上的编辑器,一般供用户输入 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,有社区维护的 ReactQuill 项目提供了 React 组件。也有一个 jira_clone 项目使用了 React ref 机制来 实现