【全列表】2018 年富文本编辑器全列表 - Rich text WYSIWYG editor - 选择最适合你的编辑器

本文写于 2018年7月23号

这篇文章是什么

列了一大堆富文本编辑器

这篇文章对谁有用

Web 开发者

情景

如果你在开发一款需要用户提交文章（长文）的产品（比如简书，知乎，豆瓣那种）
想给自己的产品找一个好用的编辑器，可以在这个表里找一个。
（编辑器提供标题，加粗，删除线，下划线，图片上传这些功能）

我为什么写这篇文

因为我最近（2018年7月）在做一个面向普通用户的产品（所以不考虑 markdown）
（UI 和功能非常定制化，所以必须自己开发，不能拿 Wordpress 套个模板就算数）

其中一个功能是用户可以写文章然后提交。
我想把编辑器做的很好，写起来很爽。所以做了一些调查，看有什么编辑器，哪个编辑器最适合我的项目。
既然做了调查就干脆分享出来。

再次再次提醒

本文中提到的编辑器，都是给开发者放入到自己开发的网站里的
不是针对普通用户的，如果你想找用于 Windows 或 Mac 的编辑器，请参考网上的其他文章

Rich text WYSIWYG 富文本编辑器列表（2018年7月23号收集）

一共 29 个：

1. Draft.js
2. Slate.js
3. CKEditor
4. TinyMCE
5. Froala
6. Quill
7. Summernote
8. WYMeditor
9. NicEdit
10. AlloyEditor
11. Textbox.io
12. wangEditor
13. UEditor
14. wysiwyg.js
15. Trix
16. Jodit
17. Redactor
18. Hallo.js
19. pell
20. ContentTools
21. ProseMirror
22. Etherpad
23. Mobiledoc
24. woofmark
25. Scribe
26. pen
27. Medium.js
28. Minislate
29. Tui editor

我的试用感想

格式有点乱，因为时间关系我就不整理格式了。大概看看就好

• Draft.js - 要用 React
• Slate.js - 要用 React
• CKEditor - 不错，可以试用：CKEditor 5 - A set of ready to use rich text editors created with a powerful framework 可以直接引入，可以 npm install，开源的，收费方面，官网写的有点困惑，没懂
• TinyMCE - https://www.tiny.cloud/ 开源， 官方例子：TinyMCE | Full Featured Example 看起来还不错，可以试试
• Froala Editor - Beautiful WYSIWYG HTML Editor | Javascript Rich Text Editor | Froala 漂亮，收费的，但是直接拿来用应该没什么问题，开源的：GitHub - froala/wysiwyg-editor: A beautifully designed WYSIWYG HTML Editor based on HTML5.
• Quill - Quill - Your powerful rich text editor 免费，因为完全没看到任何 Pricing 信息，也挺好看的，可以试试。开源。Github 18000 个 Star
• Summernote：Summernote - Super Simple WYSIWYG editor Github Star 7500，GitHub - summernote/summernote: Super simple WYSIWYG editor 免费开源，界面也不错，可以试试
• WYMeditor：WYMeditor - web-based XHTML editor - Home 太难看了，不用
• NicEdit - 难看，不用 NicEdit - WYSIWYG Content Editor, Inline Rich Text Application
• Free Text Box 很老，挺难看的
• Rich Text Editor - Asp.net 用不上
• AlloyEditor - 基于 CKEditor
• Textbox.io
• wangEditor
• UEditor
• wysiwyg.js
• Trix - Trix: A rich text editor for everyday writing
• Jodit v3 - Jodit WYSIWYG HTML editor | Pure TypeScript | FileBrowser and Editor Jodit 收费，但是不贵，只有39 和 99 两个套餐。开源。Github 81 个 Star。
• Redactor - 收费 Redactor WYSIWYG html editor 必须要买了才能下载，不像另外几个虽然收费但还是开源可下载。
• Hallo.js Hallo.js - Distraction-free Rich Text Editor for the Web 免费开源，Github 2400，更新进度缓慢，不适合拿来用，需要 jQuery。
• Pell - GitHub - jaredreich/pell: 📝 the simplest and smallest WYSIWYG text editor for web, with no dependencies Github 上 1万个 Star
• ContentTools - 3300 个 Star，免费，开源 https://github.com/getmeuk/ContentTools 这个比较特别，不像其他编辑器是一个框，这个是整个页面可以编辑，而菜单则是一个盒子始终悬浮在页面左侧
• ProseMirror - ProseMirror 免费开源，GitHub - ProseMirror/prosemirror: The ProseMirror WYSIWYM editor Github Star 3400
• etherpad-lite： 官网很难看，不想用，但是 demo page 的外观还凑合 Etherpad
• Mobiledoc - https://bustle.github.io/mobiledoc-kit/demo/ 整个官网比较简洁，看了下属于那种如果要拿来用还是要自己开发一点东西的。特别的地方是用了一个自己的格式。Github 770 个 Star
• woofmark - https://bevacqua.github.io/woofmark/ 整个网站紫到爆炸，Github 1500 个 Star
• Scribe - Scribe 3500 个 Github Star 官网直接上面一个输入框，下面一个输出 html output 的框。无比简单（或者说简陋…）
• pen - Github 4400 Star，但是最新的 commit 是 2017年4月，现在可是 2018 年7月了。https://sofish.github.io/pen/ 但看起来还是不错的，是选中一段文字之后菜单会弹出来那种。
• Medium.js Medium.js 官网例子给了，但 UI 比较简陋，不是扔进项目里就能基本使用。Github Star 4200，最新的 commit 是 2016年
• Minislate - http://olivier-m.github.io/minislate/#demo 整个官网就只有黑白
• Tui editor - 我用过，最后弃用了，因为太难定制了。理由在这篇文章里

分类

上面这些编辑器，大概分一下类的话：

1. 技术：要么是独立（Standalone），要么是依赖于某个框架（比如 React.js 或者 jQuery）
2. 使用方式：有的直接可以拿来用（UI 够好看了） / 有的界面需要一点定制（文档只提供了一些必须的功能，原生界面比较简陋）
3. 编辑风格：顶部有个菜单栏 / 框选一段文字后，文字上方弹出一个编辑条

功能方面

就图片和视频而言，上面这些编辑器有三种处理方式：

1. 完全没有
2. （上传）点击会让你选择或拖入文件上传
3. （填 URL）点击会给你 URL: 输入，让你填地址

备注

虽然标题说是“全列表”，但实际上还有一些编辑器我没有列出来
没包括进来的编辑器是因为如下原因：

• 完全面向 Markdown （因为我的项目不打算用 markdown 类编辑器所以就没去调查）
• 太老太难看，比如 2002 年的项目，整个图标风格很奇怪
• 依赖于 jQuery
• 依赖于 Angular （因为我的项目不用 Angular，所以我没去调查）
• 项目已终止或太久没有更新（比如 grande.js - https://github.com/mduvall/grande.js)
• 时间不够：我也不可能在谷歌搜索结果里翻个 100 页找个全

结论

1. 如果你想直接引入，完全不定制，扔进项目就直接用

上面一共 29 个编辑器里大概只有几个能直接拿来用。

1. CKEditor
2. TinyMCE
3. Froala
4. Quill
5. Summernote
6. Trix

其他都需要一丢丢开发，增加 / 稍微修改下原有的界面和功能。

2. 想有非常高度的定制

可以看看 Slate.js，它基于 React.js。
用了 Slate.js 的知名产品有 Taskade，Taskade 的编辑器非常漂亮而且格式很多。
如果想开发和 Taskade 一样的编辑器，我觉得用如上列表里任何一个现成编辑器都是很难开发出来的（甚至不可能，因为要改动那么多还不如写个新的方便）就是得用 Slate.js。

而且 Slate.js 的官方 README 开头就花了不少篇幅来解释为什么又要开发一个新编辑器，提到了其他编辑器的不足，理由非常充分。

市面上编辑器体验比较好的产品

我就是想提提他们的名字，你可以去试试看

1. Taskade
2. Dropbox Paper
3. 石墨文档
4. 知乎
5. 豆瓣

这篇文章参考了如下链接

Let’s build a fast, slick and customizable rich text editor with Slate and React
https://github.com/JefMari/awesome-wysiwyg
Handsontable - 11 Best Rich-Text Editors
https://www.cnblogs.com/hsapphire/archive/2012/02/26/2369105.html
https://github.com/hax/hax.github.com/issues/41
Javascript WYSIWYG editors · cheeaun/mooeditable Wiki · GitHub
List of HTML editors - Wikipedia

2018-8-3 更新

加个 Github 库：
https://github.com/xjh22222228/awesome-web-editor

最后

希望这篇文对你有帮助