2021 年最佳 JS 富文本编辑器框架

我们在寻找什么？

我们做得怎么样？

值得一提

亚军

获胜者

底线

富文本编辑器，又称所见即所得 ( WYSIWYG<input> ) 编辑器，随处可见——评论区、论坛、在线文本编辑器等等。每当你想要超越纯文本格式<textarea>，在编辑器中启用可视化的交互式格式时，就必须contenteditable构建一个合适的富文本编辑器。

值得庆幸的是，随着大量 JavaScript 框架和库的出现（它们的创建唯一目的是构建丰富的基于 Web 的编辑体验），您将再也不必处理这种邪恶contenteditable的事情。

在这篇博文中，我想向您介绍我挑选的2021 年最佳 JS 富文本编辑器框架。

我们在寻找什么？

因此，整个列表都是基于我在开发我的第一个产品CodeWrite（一个面向开发人员的博客工具）时所做的深入研究。

CodeWrite 的创建旨在提供最佳的技术博客和交叉发布体验。它采用浏览器扩展 + PWA 的混合形式，为热门博客平台提供自动填充系统，并提供专用的富内容编辑器。

话虽如此，CodeWrite 是决定我框架需求的产品。那么，它们是什么呢？

基础知识

对于框架必须具备的基本功能，我选择了 CodeWrite 绝对需要的功能。这些功能包括：

• 丰富的内联内容格式，具有自定义和扩展所提供功能的选项
• 嵌入和其他块内容支持 - <iframe>s、列表、块引用等。
• 能够使用和定义自定义键盘快捷键和Markdown 输入规则（对于开发人员来说很重要，动态地将输入 MD 更改为格式化的内容）
• 深度UI 定制和灵活性、创建格式化工具栏、“阻止”侧边菜单、浮动工具栏等的能力。
• “开箱即用”支持基本操作 - 历史记录、撤消、重做、复制、粘贴。

除了深度定制和 Markdown 输入规则之外，这些都是您应该期望每个现代框架提供的功能。

当然，我们也会关注维护的质量、社区规模、文档以及API的易用性。

具体内容

除了基本要求之外，我还有一些额外的要求，这些要求非常具体地体现了我对 CodeWrite 的期望。

语法检查工具支持

您知道那些提供 AI 语法检查的浏览器扩展程序吗？例如Grammarly。它们在纯文本中运行良好，<textarea>但在复杂的富文本编辑器中却常常表现不佳。这是因为元素处理方式不同contenteditable。不同的结构在 Grammarly 等工具中效果可能更好，也可能更差。

尽管有人可能会争辩说，这些问题应该由 Grammarly 来解决，但他们不可能考虑到所有可能的contenteditable结构，因此需要一点帮助。

编辑器中的编辑器

这是 CodeWrite 特有的。为了提供最佳的技术博客体验，我希望拥有最佳的写作和编码体验。这意味着代码片段也应该得到妥善处理——使用类似CodeMirror或Monaco Editor 之类的工具——这反过来又意味着在编辑器中嵌入编辑器！

可编辑嵌入与 s 等传统嵌入不同，因为它们的交互性<iframe>更强。它们无法通过 嵌入，因为多个独立的 Monaco 编辑器实例会让任何设备崩溃。此外，您必须能够在任何这些实例中编辑内容，包括选择、复制、粘贴等操作。再加上内外编辑器之间的同步光标，您的设置将变得相当复杂。<iframe>

很高兴有

除了已经列出的所有功能外，我还有一些其他需求。我称之为“最好有”的功能，指的是那些我知道不会立即使用，但以后会用到的功能。这些功能包括：

• 移动支持——作为一款桌面浏览器扩展，CodeWrite 并非为移动设备设计。此外，在没有实体键盘的小型触控设备上提供良好的编辑和编码体验也极具挑战性。即便如此，我还是想过要让 CodeWrite 移动化，所以希望我选择的框架能够支持它。
• 协作编辑- 最初，我原本希望 CodeWrite 能够服务于个人代码博主，但我一直计划在未来支持“实时协作”。你知道，实时光标、冲突解决等等。实时协作是一项要求很高的功能，它要求框架拥有结构良好的 API，并能正确地构建、处理和存储更新。

我们做得怎么样？

在解决了所有功能要求之后，让我快速解释一下此列表的结构。

所有提到的功能都将汇总到一个简短的列表中，以便您能够快速浏览给定框架的功能集，每个功能分别用🎉、👎 或😑 标记，分别表示“通过”、“失败”和“有点通过”。

当然，列表上的框架并非都包含所有功能——即使是基础类别的框架也不例外！不过，就我所知，这些框架确实是最好的选择，它们都值得在这个列表中占有一席之地。

话虽如此，有些框架确实值得一提，所以我把这份榜单上的所有6 个框架都分为了 3 类—— “值得一提”、“亚军”和“冠军”。这样，你不仅可以清楚地区分这些框架，还可以跟随我的脚步，看看我最终的选择。

希望介绍到此为止。我们知道要找什么，也知道一切如何运作，现在——进入列表！

值得一提

鹅毛笔

Quill从一开始就看起来是个不错的框架。它独立于 UI 框架，可以与 Grammarly 兼容，UI 易于定制，等等。

然而，问题越深入，就越发凸显。看似简单的 API 随着定制化需求的增加而变得越来越复杂，Markdown 输入规则也完全不支持，整个项目的可维护性也变得值得怀疑。

奇怪的是，虽然 repo 似乎很活跃，但文档无论多么广泛，似乎都停留在过去，并且NPM 包已经一年多没有更新了。

话虽如此，Quill 仍然进入了这个列表（尽管排在最后），这要归功于它“看似简单”。如果你只想要一个简单但功能丰富的编辑器，你没有任何自定义要求，也不追求深度定制；Quill 是一款优秀、快速且易于设置的编辑器。

• 基本操作：🎉
• UI 可定制性：🎉
• 内联格式：🎉
• 嵌入和阻止：😑（图像和视频除外，需要复杂的设置）
• 键盘快捷键：🎉
• Markdown 输入规则：👎（参见https://github.com/quilljs/quill/issues/3192）
• 良好的 API：😑（外观简单，内部复杂）
• 文档：😑（广泛，但时间紧迫）
• 维护：😑（维护，但实际上不是）
• Grammarly：🎉
• 嵌套编辑器：👎（参见https://github.com/quilljs/quill/issues/2772）
• 移动支持：🎉
• 协作编辑：😑（参见https://github.com/quilljs/quill/issues/2099）

Draft.js

现在，Draft.js似乎是 React 的“首选”富文本编辑器框架。它直接来自 Facebook 团队，拥有深度“React 式”的API，并且支持 Facebook Messenger 和 Twitter 等应用。

如果您以前喜欢使用 React，那么您一定会喜欢 Draft.js API。除了针对 React 量身定制之外，它还简洁、简洁且文档齐全。

然而，这种简洁性不仅影响了 API，也影响了框架的整体设计。框架本身只是一个核心，功能有限，但拥有一个强大的插件系统。这意味着你要么需要做更多的研究来找到合适的插件（这里有一个不错的插件合集），要么需要自己构建所需的插件。

• 基本操作：🎉
• UI 可定制性：🎉
• 内联格式：🎉
• 嵌入和阻止：🎉
• 键盘快捷键：🎉
• Markdown 输入规则：😑（可通过插件实现）
• 良好的 API：🎉
• 文档：🎉
• 维护：🎉
• Grammarly：🎉
• 嵌套编辑器：😑（可能，但没有可用的资源）
• 移动支持：🎉
• 协作编辑：👎（参见https://github.com/facebook/draft-js/issues/93）

Editor.js

Editor.js毫无疑问拥有此列表中所有框架中最好的 API。它简洁、独立于框架、易于使用，并且具有干净、可读的 JSON 输出。

然而，如此优秀的 API 是有代价的。该框架缺乏对协作编辑和 Markdown 输入规则的支持。由于 Editor.js 是一个块状编辑器（每段内容都是独立的contenteditable），因此对 Grammarly 的支持也时好时坏。此外，虽然支持移动端，但仍然有一些小问题。

至于可定制性，虽然插件架构本身就支持，但功能相当有限。插件允许你添加额外的功能，例如区块或内联格式，但 UI 定制功能不如其他框架那么丰富。

话虽如此，我还是诚心推荐 Editor.js，推荐给那些正在寻找一款即插即用、易于使用且拥有惊艳 UI 的编辑器的人。它和 Quill 类似，而且维护得不错，甚至可能更好！

• 基本操作：🎉
• UI 可定制性：😑（可能，但与其他框架相比有限）
• 内联格式：🎉
• 嵌入和阻止：🎉
• 键盘快捷键：🎉
• Markdown 输入规则：👎（参见https://github.com/codex-team/editor.js/issues/709）
• 良好的 API：🎉
• 文档：🎉
• 维护：🎉
• Grammarly：😑（有效，但仅限“每段”）
• 嵌套编辑器：😑（可能，“概念验证”插件可用）
• 移动支持：😑（可用，但有缺陷）
• 协作编辑：👎（参见https://github.com/codex-team/editor.js/issues/819）

亚军

石板

有了Slate，我们就能更上一层楼！Slate 似乎永远处于测试阶段，它是一个深度可定制的 React 富文本编辑器框架。

与 Draft.js 类似，它拥有良好的 API、强大的插件基础架构以及与 React 的深度连接。然而，它确实有一些额外的优势，并且通常更具可定制性。此外，它的插件生态系统比 Draft.js 的规模略小，但可以说，平均而言，它的插件质量更高。例如，这里有一个不错的插件集合。

Slate 是这份清单中第一个在某种程度上满足所有条件的框架。尽管 Slate 目前缺少关于协作编辑和嵌套编辑器的文档，但其 API 确实支持这些功能。因此，缺乏Android 支持是它最大的缺点。

• 基本操作：🎉
• UI 可定制性：🎉
• 内联格式：🎉
• 嵌入和阻止：🎉
• 键盘快捷键：🎉
• Markdown 输入规则：🎉
• 良好的 API：🎉
• 文档：🎉
• 维护：🎉
• Grammarly：🎉
• 嵌套编辑器：😑（可能，“概念验证”可用）
• 移动支持：😑（Android不支持，iOS 基本可以支持）
• 协作编辑：😑（可行，但几乎没有记录）

散文镜

有了ProseMirror，我们就要登顶了！它是目前为止这个列表中功能最齐全的框架。

我们所需的所有功能在 ProseMirror 中都应有尽有。基础功能（已通过）、可定制性（已通过）、移动端和 Grammarly 支持（已通过）！就连协作编辑和嵌套代码编辑器也通过了——针对这两种特殊情况都有专门的示例！ProseMirror唯一的缺点就是它的复杂性。

功能如此丰富的框架拥有复杂的 API 是意料之中的。这很正常，但仍然需要指出的是，对于大多数新手来说，刚开始使用这个框架可能会有些吃力。再加上该工具包的极简主义（它只包含核心的“构建块”供你组装），你将面临相当大的挑战。

话虽如此，我想说，在 2021 年，没有比 ProseMirror 更好的富文本编辑器创建框架了。然而，这留下了一个问题——为什么 ProseMirror 不是赢家？

• 基本操作：🎉
• UI 可定制性：🎉
• 内联格式：🎉
• 嵌入和阻止：🎉
• 键盘快捷键：🎉
• Markdown 输入规则：🎉
• 良好的 API：😑（相当复杂）
• 文档：🎉
• 维护：🎉
• Grammarly：🎉
• 嵌套编辑器：🎉
• 移动支持：🎉
• 协作编辑：🎉

获胜者

Tiptap（v2）

所以，2021 年的“赢家”，以及最佳富文本编辑器框架，非Tiptap 莫属！它建立在 ProseMirror 之上（所以我关于它是最好的观点仍然成立），但提供了更友好的 API，让你能够更快地创建出色的编辑体验！

不过，有一点需要注意。你看，当我提到 TipTap 时，我实际上指的是Tiptap v2。

Tiptap v1 已经是一个不错的、有用的 ProseMirror 包装器，但它缺乏良好的文档、TypeScript 类型并且仅与 Vue 2 兼容。

Tiptap v2 通过改进的、独立于框架的 API、TypeScript 重写和出色的文档解决了所有这些问题。然而，它目前处于 Beta 阶段（封闭 Beta 阶段）。要访问该框架，您必须在 GitHub 上赞助其开发人员。这是一个崇高的事业，但仍然是一个进入的障碍。

他们公开表示，一旦该框架从 GitHub 赞助商那里获得每月 5000 美元的目标，它就会向公众开放。

现在，无论你怎么想，我个人都看重好的产品，而 Tiptap 就是其中之一。因此，作为 GitHub 的赞助商，我获得了 Tiptap v2 的使用权，而且我必须承认——这是完成这项工作的最佳工具。我不能说它是最好的富文本编辑器框架，因为它是 ProseMirror 的职责所在，但它是一个很棒的扩展。

结合这两款工具的 API 和文档，你将能够创建任何你能想到的富文本编辑器，就像我创建 CodeWrite 一样。你仍然需要学习 ProseMirror API 来实现更高级的功能，不过这会逐渐变得更容易，这要归功于 Tiptap 的封装器。

所以，这就是我的首选。你可以等它公开（已经很接近了），或者赞助 Tiptap 背后的优秀团队，立即获得访问权限！

• 基本操作：🎉
• UI 可定制性：🎉
• 内联格式：🎉
• 嵌入和阻止：🎉
• 键盘快捷键：🎉
• Markdown 输入规则：🎉
• 良好的 API：🎉
• 文档：🎉
• 维护：🎉
• Grammarly：🎉
• 嵌套编辑器：🎉
• 移动支持：🎉
• 协作编辑：🎉

底线

这份清单就到这里。希望对你有帮助。毕竟，你才几分钟就学会了我花了好几天才学会的东西！我迫不及待地想看看你用这些精彩的工具创造了多么棒的编辑体验！欢迎在下面的评论区分享你的想法，以及任何与主题相关的内容！

无论如何，想了解更多 Web 开发内容，请在Twitter、Facebook或我的新闻通讯上关注我。感谢阅读，祝您编程愉快！

至于 CodeWrite - 你现在知道了。它由Tiptap v2提供支持，同时还支持Vue 3 和 TSX组合。如果你和我一样是个技术博主，欢迎试用 CodeWrite！它拥有一个兼容Grammarly 的富文本编辑器、一个专门用于处理代码片段的Monaco 编辑器（与 VS Code 相同）以及一个用于格式化它们的 Prettier 集成，将提升你的写作效率和体验。此外，你还将获得博客平台的一键自动填充功能，例如Medium、Dev.to、Hashnode、所有Ghost 博客，以及未来将推出的更多平台，它还具有自动问题解决机制，可以处理诸如调整图像大小或将代码片段转换为 Medium 的 GitHub Gist 等棘手的问题！

CodeWrite 付费套餐起价低至每月 3 美元，但您也可以免费试用！此外，如果您正在阅读本文，请使用代码first100享受终身 20% 折扣，前提是您是前 100 名使用代码的用户之一。每月只需2.40 美元，每年只需24 美元！