【全列表】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

我的试用感想

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

分类

上面这些编辑器,大概分一下类的话:

  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

最后

希望这篇文对你有帮助