富文本编辑器是一种可嵌入浏览器网页中,所见即所得的文本编辑器。这对于许多从事前端开发的小伙伴来说并不算陌生,在日常开发工作中,例如开发后台管理系统,是经常会用到的。
在大多数情况下,我们并不需要从0去开发一个富文本编辑器。利用好优秀的富文本编辑器开源库,也是一种不错的选择。下面将会推荐十个优秀的富文本编辑器:
简介: slate是一个完全可定制的富文本编辑框架。
GitHub:https://github.com/ianstormtaylor/slate
start:26k+
官网:https://www.slatejs.org/examples/richtext
优点:可以进行定制开发、扩展功能开发
缺点:不是开箱即用,需要二次开发
简介:用于构建文本编辑器的React框架。
GitHub:https://github.com/facebook/draft-js
start:22k+
优点:facebook维护,稳定,可扩展,可订制。
缺点:后期不再新增任何功能,官方推荐了新的库(lexical),有被放弃的危险。
简介:Lexical是一个可扩展的文本编辑器框架,提供了出色的可靠性、可访问性和性能。
GitHub:github.com/facebook/le…
start:13k+
官网:lexical.dev/
优点:facebook维护,官方推荐的富文本编辑库,可开箱即用,也可功能扩展。
缺点:更新迭代很快。
简介:Quill是为兼容性和可扩展性而构建的现代WYSIWYG编辑器,该富文本编辑器插件支持所有的现代浏览器、平板电脑和手机。
GitHub:github.com/quilljs/qui…
start:34k+
官网:quilljs.com/
优点:功能和 api较丰富,兼容性较好。
缺点: quill 一直卡在 2.0@dev 中, 后面的升级都需要自己来维护,后续开发新功能会花些精力。
简介:块样式编辑器,采用的是独特的一套json数据结构。
GitHub:github.com/codex-team/…
start:21k+
官网:editorjs.io/
优点:块编辑器与纯富文本编辑器不同,操作简单。
缺点:许多功能需要引入插件或者自定义实现。
简介:用于在web上构建富文本编辑器的工具包,包含 prosemirror-view(负责视图的渲染),prosemirror-state(负责描述整个编辑器的状态),prosemirror-model(负责prosemirror的内容结构), prosemirror-transform(负责对编辑内容的修改操作),prosemirror-commands,prosemirror-schema-basic等
GitHub:github.com/prosemirror
优点:模块化,可扩展,可插拔。
缺点:不是即插即用,需要自己拓展开发(如tiptap:基于prosemirror的富文本编辑框架)
简介:富文本编辑JavaScript库。可用于React、Vue和Angular。
GitHub:github.com/tinymce/tin…
start:12k+
优点:现有功能很丰富,样式也比较好看,支持三大热门框架引用
缺点:云功能,实时协作等收费
简介:一款浏览器端的 Markdown 编辑器,支持所见即所得(富文本)、即时渲染(类似 Typora)和分屏预览模式。
GitHub:github.com/Vanessa219/…
start:5k+
优点:支持Markdown,功能较为丰富,支持原生 JavaScript 以及 Vue、React、Angular 和 Svelte 等框架。
缺点:可扩展性较差。
简介:强大的富文本编辑器框架,具有模块化架构、现代集成和协作编辑等功能。
GitHub:github.com/ckeditor/ck…
start:6k+
优点:CKEditor升级版,开箱即用。
简介:插件驱动的所见即所得的Markdown编辑器框架。
GitHub:github.com/Saul-Mirone…
start:7k+
优点:轻量,支持react,Vue等多种框架。
缺点:只支持Markdown