别再找了，Github 热门开源富文本编辑器，最实用的都在这里了 - srcmini

> 本文由 [简悦 SimpRead](http://ksria.com/simpread/) 转码， 原文地址 [www.srcmini.com](http://www.srcmini.com/204.html)

在前端开发中，你有没有为富文本编辑器而烦恼过？样式不好看，修改样式又有各种问题？功能不齐全或者功能自定义功能又有问题？…… 富文本编辑器是个头痛的问题。

百度去找，运气不好找到的都是使用不多，或者样式不合适各种问题。我们使用一个开源项目需要考虑三个因素，github 上的 star 数，提交数，以及该项目的最新更新日期，毕竟我们都愿意使用一个多人使用，作者又频繁更新维护的框架，这样的框架更适合我们长期使用。

而使用框架最好先详细看下框架的 Document 参考文档，再开始写项目，减少出错。

这里介绍的富文本编辑器是目前 github 其中最热门的几个，具体用哪个你可以根据项目情况确定使用。

1、Quill
-------

![](http://www.srcmini.com/wp-content/uploads/2019/03/38f7377db3c2a29-1024x570.png)

Quill 大概是目前最好用的富文本编辑器了，它被设计为现代化可兼容可扩展的编辑器，最重要的是它可以自由定制，相当先进！但是仍需要你仔细阅读 Quill 的开发文档，使用任何框架，首先阅读开发文档是个好习惯，否则会花费你很多不必要的精力和时间。Quill 的主要特点如下：

1）API 驱动设计。提供很多简洁的 API 调用，比如内容处理，格式化，时间，编辑器等；

2）自由定制内容和格式。Quill 文本编辑器支持所有常用的媒体元素，支持自定义编辑器工具栏功能或样式；

3）支持定制多种模块。包括工具栏，键盘模块，历史模块定义，剪贴板模块，以及语法高亮模块；

4）跨平台；

5）使用更简单。Quill 的参考文档描述相当简洁，给点耐心就可以设计一款很漂亮的富文本编辑器了。

**Github 地址**：https://github.com/quilljs/quill

**Demo 地址**：https://quilljs.com/

2、Draft.js React 富文本编辑器
-----------------------

![](http://www.srcmini.com/wp-content/uploads/2019/03/67fe9a3537b1ebd.png)

Draft.js 是一个用于在 React 中构建富文本编辑器的框架，它由一个不可变的模型提供支持，并且跨浏览器的差异进行抽象。不管是希望支持一些内联文本样式，还是编写复杂的长篇文章，使用 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 编辑器
-----------

![](http://www.srcmini.com/wp-content/uploads/2019/03/5ebeb6065f64f23-1024x746.png)

1）完全可定制；

2）支持嵌套文档模型，编辑器不会限制你编辑更复杂的文档；

3）无状态不可变的数据编辑；

4）优雅的 changes，允许你简单地编写插件或自定义功能。

**Github 地址**：https://github.com/ianstormtaylor/slate

**Demo 地址**：https://www.slatejs.org/

4、MediumEditor
--------------

![](http://www.srcmini.com/wp-content/uploads/2019/03/0a8ece86454b1ae.jpg)

一个 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
------

![](http://www.srcmini.com/wp-content/uploads/2019/03/fe01ce2a7fbac8f.gif)

Pell 是目前最小最简单的 web 富文本编辑器，不带任何第三方依赖，快速开发必备。

1）支持常用的文本样式，粗体、下划线、标题、段落、引用、代码插入等；

2）支持图片插入，编辑简单的历史前进后退；

3）支持脚注、上标、字体设置等。

**Github 地址**：https://github.com/jaredreich/pell

**Demo 地址**：https://jaredreich.com/pell/

6、TinyMCE
---------

![](http://www.srcmini.com/wp-content/uploads/2019/03/0ef62bfdc44d5a6-1024x547.png)

TinyMCE 是构建现代化、国际化和可访问内容创作体验的最佳选择。

1）全新 UI，更好的响应，可自定义主题；

2）使用更简单的 UI API，使开发更简单快捷；

3）功能齐全，如果你没有更特殊的需求，TinyMCE 基本上都可以满足你的开发需求。

**Github 地址**：https://github.com/tinymce/tinymce

**Demo 地址**： https://www.tiny.cloud/