最近项目里常听产品们谈到后台的文本编辑器就烦恼，吐槽样式难看，说后台效果和前台展示不一样，还有吐槽操作不方便功能不全没有自定义功能的问题。头疼也要解决，假若用着用着被迫换编辑器，用户和团队估计要件要崩溃。

本着开源世界解决一切的宗旨，我又开始逛荡这github大市场了。以Github stars数为主要的评估依据，兼顾最新更新日期和提交数量，以保证框架能够让我们用的更长久。

Quill：丰俭由人的编辑器，确实好用

Github stars: 26.3k , commits: 5,199，License: BSD 3-clause

开源好用的富文本编辑器推荐

丰俭由人的编辑器，确实好用

  1. 基于API的设计：通过简单的API可以细粒度地访问编辑器的内容，更改和事件。使用JSON作为输入和输出，可以始终如一地工作。
  2. 自定义内容和格式：Quill公开了自己的文档模型，允许进行扩展和自定义。通过扩展Quill可以支持的无限格式和内容。已经有用户添加了幻灯片，交互式清单和3D模型。
  3. 跨平台：支持PC，平板和手机上的所有现代浏览器。体验相同的一致行为，并跨平台生成HTML。
  4. 易于使用：Quill带有默认值，您只需几行Javascript就可以立即使用它：

Draft.js：Facebook 开源的基于React的编辑器框架

Github stars: 17.9k , commits: 965，License: MIT license

开源好用的富文本编辑器推荐

Draft.js Demo

  1. 可扩展和可定制：draft.js 并不是一个开箱即用的编辑器，它提供了一系列富文本编辑器的开发工具，开发人员能够创建从基本文本样式到嵌入式媒体各种丰富的富文本撰写体验。
  2. 声明式富文本编辑器：Draft.js无缝对接React应用，使用熟悉的API提取渲染，选择和输入行为的细节。
  3. 不变的编辑器状态：Draft.js模型使用immutable-js构建，draft.js 中所有数据都是不可变的。每次修改都会新建数据，内存中会保存原来的数据状态，方便返回到上一步

Slate：用于构建富文本编辑器的自定义框架

Github stars: 17.4k, commits: 3,100，License: MIT license

开源好用的富文本编辑器推荐

Rich Text - Slatejs

项目由贡献者驱动的，没有任何大型公司的支持，当前处于测试版，核心API现在可以使用，但是它的某些API尚未“最终确定”

Trix: 输出简洁一致的HTML

Github stars: 15k, commits: 2,593，License: MIT license

开源好用的富文本编辑器推荐

trix demo by basecamp

Trix是用于编写消息，评论，文章和列表（大多数Web应用程序组成的简单文档）的编辑器。它具有复杂的文档模型，支持嵌入式附件，并输出简洁一致的HTML开源好用的富文本编辑器推荐

Trix对设备及浏览器的支持情况

medium-editor ：极简行内编辑器

Github stars: 14.4k, commits: 2,602，License: MIT license

开源好用的富文本编辑器推荐

作为跟随鼠标和焦点的编辑器，使用体验

  1. MediumEditor是一个开源行内编辑器工具栏，使用简单，鼠标选择即可对内容进行编辑。
  2. 基于JavaScript编写的，仅约28k，不依赖于任何第三方开源库
  3. 兼容Chrome 、Firfox、Safari、IE、Edge等主流浏览器，支持IE9。

开源好用的富文本编辑器推荐

可以根据需要调整风格

editor.js：由块组成内容并返回 JSON 的编辑器

Github stars: 11.7k, commits: 518，License: Apache-2.0

开源好用的富文本编辑器推荐

editorjs demo

  1. 关于块样式: Editor.js 工作区由单独的块组成，包括段落、标题、图像、列表与引号等，它们都是由 Editor.js 中的 Plugin 提供的独立的内容可编辑元素（或更复杂的结构），并由 Editor.js 的 Core 组合而成。
  2. 关于输出 JSON: Editor.js 则输出带有每个块数据的 JSON 对象。数据可以按您的需要使用：使用HTML为Web客户端呈现、为移动应用程序本机呈现、为Facebook即时文章或Google AMP创建标记、生成音频版本等等。干净的数据对于后端的清理、验证和处理非常有用。
  3. 浏览器支持: Edge 12+ / Firefox 18+ / Chrome 49+ / Safari 10+ / Safari 10+ / Opera 36

wangEditor： 国内开发者的轻量级web富文本框

Github stars: 9.6k, commits 361，License: MIT license

开源好用的富文本编辑器推荐

使用起来很方便

基于javascript和css开发的 Web富文本编辑器， 轻量、简洁、易用、开源免费，创建编辑器时只需要引用 JS，无需引用任何 CSS。

菜单和编辑区域其实就是两个单独的<div>，位置、尺寸都可以随便定义。如果想要像 知乎专栏、简书、石墨、网易云笔记 这些编辑页面一样，将编辑区域和菜单分离就可以实现了。

菜单和编辑器区域可自定义样式。例如：将菜单fixed、编辑器区域高度自动增加等开源好用的富文本编辑器推荐

编辑区域和菜单分离

summernote：Bootstrap 可视化HTML编辑器

Github stars: 9.4k , commits: 3,265，License: MIT license

开源好用的富文本编辑器推荐

summernote Demo

summernote是一个简单灵活的所见即所得的 HTML 在线编辑器.

  1. 支持Bootstrap3.x.x到4.x.x；轻量（js+css:100Kb）
  2. 适用于所有主要浏览器：Safari、Chrome、Firefox、Opera、Edge和Internet Explorer 9+
  3. 适用于所有主要操作系统：Windows、MacOS、Linux

tinymce

Github stars: 7.9k, commits: 23,239，License: LGPL-2.1 license

开源好用的富文本编辑器推荐

TinyMCE 5

项目社区开源版 - Free Forever

  1. 可定制的UI与功能：TinyMCE 5可以进行定制以适合系统，从而无缝融入既有设计。使用者可以专注于产品设计。
  2. 提高用户满意度：可以在更短的时间内完成更多工作。实践证明，TinyMCE 5每年可为内容创建者节省数千个小时，同时增加了用户参与度。

tiptap：基于Vue.js的无渲染富文本编辑器

Github stars: 7.1k, commits: 1,027，License: LGPL-2.1 license

Base on：Prosemirror

开源好用的富文本编辑器推荐

basic example of tiptap

不是taptap，Tiptap没有任何CSS，用户将（几乎）完全控制标记和样式。用户可以将数据另存为原始HTML字符串，也可以获取JSON文档的-serializable表示形式。

结语：以上就是本期全部的分享了。为了服务大多数的普通客户，这期去掉了只支持Markdown的编辑器。可能大家因时间原因无法自己维护而选择那些开箱即用的，也可能需要深度定制而选择框架类的，亦或就是要极致的简单而选择那些极简款编辑器。希望大家都能在此找到有用的内容服务手头的项目。

如果有其他想推荐的编辑器可以留言回复我哦！

其实原本还有个项目也在分享的List中-Pell, 可以说是 最简单，最小的WYSIWYG文本编辑器

Github stars: 11.2k, commits 79，License: MIT license

开源好用的富文本编辑器推荐

简单到没有多余的语言来介绍

引用官网的一句介绍吧：DOWNLOAD / INSTRUCTIONS / INFORMATION view on Github

起初纳闷为啥这么多stars，那么久没更新，看了看项目就明白了：至简如水，过多的包装都是浪费。