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

20,051 阅读3分钟

前言

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

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

slate

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

GitHub:github.com/ianstormtay…

start:26k+

官网:www.slatejs.org/examples/ri…

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

缺点:不是开箱即用,需要二次开发

draft

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

GitHub:github.com/facebook/dr…

start:22k+

官网:draftjs.org/

优点:facebook维护,稳定,可扩展,可订制。

缺点:后期不再新增任何功能,官方推荐了新的库(lexical),有被放弃的危险。

lexical

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

GitHub:github.com/facebook/le…

start:13k+

官网:lexical.dev/

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

缺点:更新迭代很快。

quill

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

GitHub:github.com/quilljs/qui…

start:34k+

官网:quilljs.com/

优点:功能和 api较丰富,兼容性较好。

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

editor.js

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

GitHub:github.com/codex-team/…

start:21k+

官网:editorjs.io/

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

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

prosemirror

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

GitHub:github.com/prosemirror

官网:prosemirror.net/

优点:模块化,可扩展,可插拔。

缺点:不是即插即用,需要自己拓展开发(如tiptap:基于prosemirror的富文本编辑框架)

TinyMCE

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

GitHub:github.com/tinymce/tin…

start:12k+

官网:www.tiny.cloud/

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

缺点:云功能,实时协作等收费

vditor

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

GitHub:github.com/Vanessa219/…

start:5k+

官网:b3log.org/vditor/

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

缺点:可扩展性较差。

CKEditor5

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

GitHub:github.com/ckeditor/ck…

start:6k+

官网:ckeditor.com/ckeditor-5/

优点:CKEditor升级版,开箱即用。

milkdown

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

GitHub:github.com/Saul-Mirone…

start:7k+

官网:milkdown.dev/

优点:轻量,支持react,Vue等多种框架。

缺点:只支持Markdown。

最后

优秀的开源库还有不少,例如AFFiNEwangEditorbytemdtiptap这里就不再一一列举,相信总有一款适合你。

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