srcmini在前端开发中，你有没有为Web富文本编辑器而烦恼过？样式不好看，修改样式又有各种问题？功能不齐全或者功能自定义功能又有问题？……富文本编辑器是个头痛的问题。
百度去找，运气不好找到的都是使用不多，或者样式不合适各种问题。我们使用一个开源项目需要考虑三个因素，github上的star数，提交数，以及该项目的最新更新日期，毕竟我们都愿意使用一个多人使用，作者又频繁更新维护的框架，这样的框架更适合我们长期使用。
而使用框架最好先详细看下框架的Document参考文档，再开始写项目，减少出错。
这里介绍的Web富文本编辑器是目前github其中最热门的几个，具体用哪个你可以将这些富文本编辑器比较一下，根据项目情况确定使用。
1、Quill
Quill大概是目前最好用的Web富文本编辑器了，它被设计为现代化可兼容可扩展的编辑器，最重要的是它可以自由定制，相当先进！但是仍需要你仔细阅读Quill的开发文档，使用任何框架，首先阅读开发文档是个好习惯，否则会花费你很多不必要的精力和时间。Quill的主要特点如下：
1）API驱动设计。提供很多简洁的API调用，比如内容处理，格式化，时间，编辑器等；
2）自由定制内容和格式。Quill文本编辑器支持所有常用的媒体元素，支持自定义编辑器工具栏功能或样式；
3）支持定制多种模块。包括工具栏，键盘模块，历史模块定义，剪贴板模块，以及语法高亮模块；
4）跨平台；
5）使用更简单。Quill的参考文档描述相当简洁，给点耐心就可以设计一款很漂亮的富文本编辑器了。
如果你将其它编辑器和Quill富文本编辑器比较，你应该可以发现，Quill应该是最强大的一款了。
Github地址：https://github.com/quilljs/quill
Demo地址：https://quilljs.com/
2、Draft.js React富文本编辑器
Draft.js是一个用于在React中构建Web富文本编辑器的框架，它由一个不可变的模型提供支持，并且跨浏览器的差异进行抽象。不管是希望支持一些内联文本样式，还是编写复杂的长篇文章，使用Draft.js构建也更加容易。Draft.js支持完全可定制，并且还提供构建模块，可以完全控制用户界面。Draft.js有以下特点：
1）可扩展和可定制：提供构建模块，以支持创建各种丰富的文本组合体验，从简单的文本样式到嵌入式媒体；
2）声明式富文本：Draft.js无缝地融入React应用程序中，使用熟悉的声明式API抽象出渲染、选择和输入行为的细节；
3）不可变编辑状态：Draft.js模型是使用immutable-js构建的，提供具有功能状态更新的API，使用数据持久性来扩展内存使用。
Github地址：https://github.com/facebook/draft-js
Demo地址：https://draftjs.org/
3、Slate编辑器
1）完全可定制；
2）支持嵌套文档模型，编辑器不会限制你编辑更复杂的文档；
3）无状态不可变的数据编辑；
4）优雅的changes，允许你简单地编写插件或自定义功能。
Github地址：https://github.com/ianstormtaylor/slate
Demo地址：https://www.slatejs.org/
4、MediumEditor
一个Medium.com WYSIWYG编辑器的克隆版，使用contenteditable API实现富文本编辑器解决方案。MediumEditor是使用普通javascript写的，不需要任何额外的框架。特点如下：
1）纯javascript，没有额外库支持；
2）轻量级框架，压缩后28KB左右；
3） 支持Chrome、Firefox、Safari、IE和Edge浏览器 。
Github地址：https://github.com/yabwe/medium-editor
Demo地址：https://yabwe.github.io/medium-editor/
5、Pell
如果将Pell和其它富文本编辑器比较，那么Pell是目前最小最简单的web富文本编辑器，不带任何第三方依赖，快速开发必备。
1）支持常用的文本样式，粗体、下划线、标题、段落、引用、代码插入等；
2）支持图片插入，编辑简单的历史前进后退；
3）支持脚注、上标、字体设置等。
Github地址：https://github.com/jaredreich/pell
Demo地址：https://jaredreich.com/pell/
6、TinyMCE
TinyMCE是构建现代化、国际化和可访问内容创作体验的最佳Web富文本编辑器。
1）全新UI，更好的响应，可自定义主题；
2）使用更简单的UI API，使开发更简单快捷；
3）功能齐全，如果你没有更特殊的需求，TinyMCE基本上都可以满足你的开发需求。
Github地址：https://github.com/tinymce/tinymce
Demo地址： https://www.tiny.cloud/
以上就是Github热门开源Web富文本编辑器了，相信你会找到一款你喜欢的，将你喜欢的一款和其它富文本编辑器比较，看看是否满足的你项目需求，是否能长期使用等等。不管是大项目还是小项目，使用上面介绍的这些富文本编辑器基本足够了。其中对于小项目可以使用一些简单的，而对于大项目的开发，个人推荐使用Quill，因为它足够强大，还可以自由定制，另外Quill官方还有详细而友好的参考文档。
评论前必须登录！
注册