我调研了 18 种前端富文本编辑器，这份清单帮你快速选型

大家好，我是 Kryon，这是我的第 159 篇原创。

最近我整理了一轮前端富文本编辑器选型资料。

这个需求看起来像“加个输入框”，真进项目后，经常会长出一堆东西：粘贴 Word、图片上传、表格、@ 人、代码块、移动端输入法、XSS 清洗、协同、评论、修订、导出。

所以这篇不写长篇理论，直接给清单。每个方案只看四件事：适合什么、能做什么、我怎么看、官网在哪。

1. Tiptap ⭐️⭐️⭐️⭐️⭐️

适合：知识库、CMS、AI 写作、产品文档。

能力： 基于 ProseMirror 的 headless 富文本编辑器框架，支持扩展节点、mark、命令、快捷键、React / Vue 集成，也有协同、评论、AI、文件转换等商业能力。

综合评价： 如果富文本是产品核心，Tiptap 很值得优先看。它的价值不是省事，而是让你在 ProseMirror 能力上少走弯路。工具栏、上传、渲染样式、保存策略，还是要自己设计。

官网： https://tiptap.dev/

2. ProseMirror ⭐️⭐️⭐️⭐️

适合： 自研编辑器内核、协同文档、复杂内容模型。

能力： Web 富文本编辑器底层工具包，提供文档模型、schema、transaction、selection、plugin、collaboration 等核心能力。

综合评价： 能力很硬，控制力很强。但普通后台别从它开始。团队里没人愿意长期啃编辑器模型，就别把自己拖进 selection 和 schema 的泥潭里。

官网： https://prosemirror.net/

3. Slate ⭐️⭐️⭐️⭐️

适合：React 高度定制编辑器、中复杂内容结构。

能力： 支持自定义 block、inline、void node、命令、序列化和插件化扩展。

综合评价： Slate 很灵活，但灵活也意味着你要自己收拾边界。粘贴、删除、normalize、嵌套结构这些细节，都会放大团队工程能力。

官网： https://docs.slatejs.org/

4. Plate ⭐️⭐️⭐️⭐️

适合：React 内容平台、AI 写作编辑器、现代 CMS。

能力： 基于 Slate 和 React，提供插件、组件、主题、AI、评论、建议、媒体、表格等能力，和 shadcn/ui、Tailwind 项目比较贴。

综合评价： 如果你喜欢 Slate 的模型，但不想从空白页开始搭工具栏和插件，Plate 更实际。它省的是搭架子的时间，不是理解编辑器的时间。

官网： https://platejs.org/

5. Lexical ⭐️⭐️⭐️⭐️⭐️

适合：React 新项目、评论输入、聊天输入、知识库、AI 编辑器。

能力： Meta 开源的文本编辑器框架，强调轻量、模块化、可访问性和性能，提供 React bindings、rich text、history、list、link、markdown、table 等包。

综合评价： React 新项目很值得看。它更像现代编辑器底座，不是传统后台富文本组件。想做长期内容能力，Lexical 可以进核心候选。

官网： https://lexical.dev/

6. Quill ⭐️⭐️⭐️⭐️

适合：评论、公告、邮件模板、简单文章编辑。

能力： API 驱动的富文本编辑器，核心是 Delta 模型，支持内容、变更和事件的结构化访问。

综合评价： 够用、清楚、上手快。中轻量富文本很好用。复杂块编辑、协同文档、深度定制内容平台，就别指望它扛太多。

官网： https://quilljs.com/

7. TinyMCE ⭐️⭐️⭐️⭐️

适合：企业后台、传统 CMS、帮助中心、邮件模板。

能力： 成熟的 WYSIWYG（所见即所得）HTML 编辑器，支持插件、表格、图片、粘贴、React / Vue / Angular 集成、云服务和商业支持。

综合评价： 它的优势是成熟，不是酷。传统内容编辑场景很现实。要注意授权、商业插件、输出 HTML 清洗和前台展示样式统一。

官网： https://www.tiny.cloud/tinymce/

8. CKEditor 5 ⭐️⭐️⭐️⭐️⭐️

适合：企业 CMS、知识库、文档协作、内容审核。

能力： 企业级富文本编辑器，提供模块化架构、自定义数据模型、React / Vue / Angular 集成、协同、评论、修订、导入导出、AI、文件管理等能力。

综合评价： 企业级内容编辑很值得看。功能强，支持也强，但不是轻量方案。授权、商业功能、构建配置和预算要提前确认。总之, 这个 YYDS。

官网： https://ckeditor.com/ckeditor-5/

9. wangEditor ⭐️⭐️⭐️⭐️

适合：国内中后台、公告、新闻、商品详情、活动说明。

能力： 国内常见开源 Web 富文本编辑器，开箱即用，配置简单，支持 JS、Vue、React。

综合评价： 很务实。常规后台富文本能快速交付，中文资料也友好。复杂协同、Notion-like、深度内容模型就不是它的主场。

官网： https://www.wangeditor.com/

10. Editor.js ⭐️⭐️⭐️⭐️

适合：结构化内容 CMS、内容块系统、多端渲染。

能力： block-style 编辑器，输出 clean JSON blocks，每个标题、段落、图片、列表、代码、引用都可以作为独立 block。

综合评价： 它适合把内容拆成块来管理。不是传统 Word 式富文本。用户如果想要一排 toolbar 调字体颜色，Editor.js 不一定顺。

官网： https://editorjs.io/

11. BlockNote ⭐️⭐️⭐️⭐️

适合：React Notion-like 编辑器、知识库、内部文档。

能力： React 里的 block-based rich-text editor，主打 Notion-style 体验，支持 slash menu、拖拽、块嵌套、类型安全 API、Yjs 协同集成。

综合评价： 想快速做 Notion-like，可以先试它。默认体验比较完整，React 项目出效果快。深度定制前，要先确认内容模型、导出格式、协同和授权边界。

官网： https://www.blocknotejs.org/

12. Yoopta ⭐️⭐️⭐️

适合：块级 CMS、网站构建器、Notion-like 原型。

能力： React headless 富文本编辑器，提供 20+ 插件、块拖拽、多块选择、主题、导出 HTML / Markdown / plain text / email HTML 等能力。

综合评价：现成块能力多，这是它的吸引力。生产项目要多看维护节奏、插件质量和长期迁移方案。新东西不是不能选，但别盲选。

官网： https://yoopta.dev/

13. Remirror ⭐️⭐️⭐️

适合：React + ProseMirror 项目、已有 Remirror 经验的团队。

能力： 基于 ProseMirror 的 React 工具箱，提供 extensions、hooks、组件集成，支持从开箱编辑器下探到底层 ProseMirror。

综合评价： 不是不能用，只是新项目需要更明确的选择理由。我会先看 Tiptap，再看 Remirror 有没有团队经验或特殊优势。

官网： https://www.remirror.io/

14. Draft.js ⭐️⭐️

适合：老项目维护、已有 Draft.js 内容模型的系统。

能力： 老牌 React 富文本框架，使用 immutable model，曾经在 React 富文本生态里很重要。

综合评价： 老项目可以维护，新项目不建议优先。它的 GitHub 仓库已经在 2023 年 2 月 6 日归档，只读了。今天新项目更建议看 Lexical、Tiptap、Slate / Plate。

官网： https://github.com/facebookarchive/draft-js

15. Froala ⭐️⭐️⭐️

适合：商业 WYSIWYG 编辑器采购、传统企业后台。

能力： 商业 WYSIWYG HTML 编辑器，提供丰富插件、框架集成、文件管理、在线编辑体验和商业支持。

综合评价： 它和 TinyMCE、CKEditor 5 的定位有点接近。重点不是能不能用，而是授权、预算、插件边界和团队采购流程能不能接受。

官网： https://froala.com/

16. Jodit ⭐️⭐️⭐️

适合：传统后台富文本、HTML WYSIWYG 场景。

能力： 开源 / 商业富文本编辑器，支持常见 toolbar、图片、表格、插件和配置能力。

综合评价： 可以作为传统后台富文本候选。选它之前，要和 TinyMCE、CKEditor、wangEditor 一起比较维护活跃度、文档和生态。

官网： https://xdsoft.net/jodit/

17. Syncfusion React Rich Text Editor ⭐️⭐️⭐️

适合：已采购 Syncfusion 的 React 企业项目。

能力： Syncfusion 组件套件里的 React 富文本编辑器，支持 HTML / Markdown 编辑、图片、表格、工具栏、表单集成和企业组件生态。

综合评价： 如果公司已经采购 Syncfusion，优先看它很合理。统一授权、主题、技术支持，比单独引一个编辑器省管理成本。

官网： https://www.syncfusion.com/react-components/react-wysiwyg-rich-text-editor

18. KendoReact Editor ⭐️⭐️⭐️

适合：已使用 KendoReact 的企业项目。

能力： KendoReact 组件套件里的富文本编辑器，面向 React 企业应用，支持常见编辑、格式化、工具栏、表单和套件生态集成。

综合评价： 它的价值不只是编辑器本身，还有组件体系、主题一致性、商业支持和采购合规。单独为了富文本引入整套 Kendo，就要谨慎。

官网： https://www.telerik.com/kendo-react-ui/components/editor

结尾

富文本选型别只看 demo。先确认业务场景，再看内容模型、授权、迁移和团队维护能力。希望这份清单能帮你少踩坑。感谢阅读。

这个星级不是客观排行榜，更是我做项目选型时的第一反应。我主要看 5 件事：场景是不是清楚、扩展能不能撑住、生态够不够稳、接入维护累不累、以后迁移会不会痛。⭐️⭐️⭐️⭐️⭐️：我会优先放进核心候选。⭐️⭐️⭐️⭐️：很强，但要看具体业务。⭐️⭐️⭐️：不是不能选，得有明确场景。⭐️⭐️：老项目维护可以，新项目我会比较谨慎。