推荐十个优秀的富文本编辑器

前言

富文本编辑器是一种可嵌入浏览器网页中，所见即所得的文本编辑器。这对于许多从事前端开发的小伙伴来说并不算陌生，在日常开发工作中，例如开发后台管理系统，是经常会用到的。

在大多数情况下，我们并不需要从0去开发一个富文本编辑器。利用好优秀的富文本编辑器开源库，也是一种不错的选择。下面将会推荐十个优秀的富文本编辑器：

slate

简介：slate是一个完全可定制的富文本编辑框架。

GitHub：https://github.com/ianstormtaylor/slate

start：26k+

官网：https://www.slatejs.org/examples/richtext

优点：可以进行定制开发、扩展功能开发

缺点：不是开箱即用，需要二次开发

draft

简介：用于构建文本编辑器的React框架。

GitHub：https://github.com/facebook/draft-js

start：22k+

官网：https://draftjs.org/

优点：facebook维护，稳定，可扩展，可订制。

缺点：后期不再新增任何功能，官方推荐了新的库（lexical），有被放弃的危险。

lexical

简介：Lexical是一个可扩展的文本编辑器框架，提供了出色的可靠性、可访问性和性能。

GitHub：https://github.com/facebook/lexical

start：13k+

官网：https://lexical.dev/

优点：facebook维护，官方推荐的富文本编辑库，可开箱即用，也可功能扩展。

缺点：更新迭代很快。

quill

简介：Quill是为兼容性和可扩展性而构建的现代WYSIWYG编辑器，该富文本编辑器插件支持所有的现代浏览器、平板电脑和手机。

GitHub：https://github.com/quilljs/quill

start：34k+

官网：https://quilljs.com/

优点：功能和 api较丰富，兼容性较好。

缺点：quill 一直卡在 2.0@dev 中, 后面的升级都需要自己来维护，后续开发新功能会花些精力。

editor.js

简介：块样式编辑器，采用的是独特的一套json数据结构。

GitHub：https://github.com/codex-team/editor.js

start：21k+

官网：https://editorjs.io/

优点：块编辑器与纯富文本编辑器不同，操作简单。

缺点：许多功能需要引入插件或者自定义实现。

prosemirror

简介：用于在web上构建富文本编辑器的工具包，包含 prosemirror-view（负责视图的渲染），prosemirror-state（负责描述整个编辑器的状态），prosemirror-model（负责prosemirror的内容结构）， prosemirror-transform（负责对编辑内容的修改操作），prosemirror-commands，prosemirror-schema-basic等

GitHub：https://github.com/prosemirror

官网：https://prosemirror.net/

优点：模块化，可扩展，可插拔。

缺点：不是即插即用，需要自己拓展开发（如tiptap：基于prosemirror的富文本编辑框架）

TinyMCE

简介：富文本编辑JavaScript库。可用于React、Vue和Angular。

GitHub：https://github.com/tinymce/tinymce

start：12k+

官网：https://www.tiny.cloud/

优点：现有功能很丰富，样式也比较好看，支持三大热门框架引用

缺点：云功能，实时协作等收费

vditor

简介：一款浏览器端的 Markdown 编辑器，支持所见即所得（富文本）、即时渲染（类似 Typora）和分屏预览模式。

GitHub：https://github.com/Vanessa219/vditor

start：5k+

官网：https://b3log.org/vditor/

优点：支持Markdown，功能较为丰富，支持原生 JavaScript 以及 Vue、React、Angular 和 Svelte 等框架。

缺点：可扩展性较差。

CKEditor5

简介：强大的富文本编辑器框架，具有模块化架构、现代集成和协作编辑等功能。

GitHub：https://github.com/ckeditor/ckeditor5

start：6k+

官网：https://ckeditor.com/ckeditor-5/

优点：CKEditor升级版，开箱即用。

milkdown

简介：插件驱动的所见即所得的Markdown编辑器框架。

GitHub：https://github.com/Saul-Mirone/milkdown

start：7k+

官网：https://milkdown.dev/

优点：轻量，支持react，Vue等多种框架。

缺点：只支持Markdown。

最后

优秀的开源库还有不少，例如AFFiNE、wangEditor、bytemd，tiptap这里就不再一一列举，相信总有一款适合你。

没有最好的，只有合适的。