前言

富文本編輯器是一種可嵌入瀏覽器網(wǎng)頁中，所見即所得的文本編輯器。這對于許多從事前端開發(fā)的小伙伴來說并不算陌生，在日常開發(fā)工作中，例如開發(fā)后臺管理系統(tǒng)，是經(jīng)常會用到的。

在大多數(shù)情況下，我們并不需要從0去開發(fā)一個(gè)富文本編輯器。利用好優(yōu)秀的富文本編輯器開源庫，也是一種不錯(cuò)的選擇。下面將會推薦十個(gè)優(yōu)秀的富文本編輯器：

slate

簡介：slate是一個(gè)完全可定制的富文本編輯框架。

【資料圖】

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

start：26k+

官網(wǎng)：https://www.slatejs.org/examples/richtext

優(yōu)點(diǎn)：可以進(jìn)行定制開發(fā)、擴(kuò)展功能開發(fā)

缺點(diǎn)：不是開箱即用，需要二次開發(fā)

draft

簡介：用于構(gòu)建文本編輯器的React框架。

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

start：22k+

官網(wǎng)：https://draftjs.org/

優(yōu)點(diǎn)：facebook維護(hù)，穩(wěn)定，可擴(kuò)展，可訂制。

缺點(diǎn)：后期不再新增任何功能，官方推薦了新的庫（lexical），有被放棄的危險(xiǎn)。

lexical

簡介：Lexical是一個(gè)可擴(kuò)展的文本編輯器框架，提供了出色的可靠性、可訪問性和性能。

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

start：13k+

官網(wǎng)：https://lexical.dev/

優(yōu)點(diǎn)：facebook維護(hù)，官方推薦的富文本編輯庫，可開箱即用，也可功能擴(kuò)展。

缺點(diǎn)：更新迭代很快。

quill

簡介：Quill是為兼容性和可擴(kuò)展性而構(gòu)建的現(xiàn)代WYSIWYG編輯器，該富文本編輯器插件支持所有的現(xiàn)代瀏覽器、平板電腦和手機(jī)。

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

start：34k+

官網(wǎng)：https://quilljs.com/

優(yōu)點(diǎn)：功能和 api較豐富，兼容性較好。

缺點(diǎn)：quill 一直卡在 2.0@dev 中, 后面的升級都需要自己來維護(hù)，后續(xù)開發(fā)新功能會花些精力。

editor.js

簡介：塊樣式編輯器，采用的是獨(dú)特的一套json數(shù)據(jù)結(jié)構(gòu)。

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

start：21k+

官網(wǎng)：https://editorjs.io/

優(yōu)點(diǎn)：塊編輯器與純富文本編輯器不同，操作簡單。

缺點(diǎn)：許多功能需要引入插件或者自定義實(shí)現(xiàn)。

prosemirror

簡介：用于在web上構(gòu)建富文本編輯器的工具包，包含 prosemirror-view（負(fù)責(zé)視圖的渲染），prosemirror-state（負(fù)責(zé)描述整個(gè)編輯器的狀態(tài)），prosemirror-model（負(fù)責(zé)prosemirror的內(nèi)容結(jié)構(gòu)）， prosemirror-transform（負(fù)責(zé)對編輯內(nèi)容的修改操作），prosemirror-commands，prosemirror-schema-basic等

GitHub：https://github.com/prosemirror

官網(wǎng)：https://prosemirror.net/

優(yōu)點(diǎn)：模塊化，可擴(kuò)展，可插拔。

缺點(diǎn)：不是即插即用，需要自己拓展開發(fā)（如tiptap：基于prosemirror的富文本編輯框架）

TinyMCE

簡介：富文本編輯JavaScript庫?？捎糜赗eact、Vue和Angular。

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

start：12k+

官網(wǎng)：https://www.tiny.cloud/

優(yōu)點(diǎn)：現(xiàn)有功能很豐富，樣式也比較好看，支持三大熱門框架引用

缺點(diǎn)：云功能，實(shí)時(shí)協(xié)作等收費(fèi)

vditor

簡介：一款瀏覽器端的 Markdown 編輯器，支持所見即所得（富文本）、即時(shí)渲染（類似 Typora）和分屏預(yù)覽模式。

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

start：5k+

官網(wǎng)：https://b3log.org/vditor/

優(yōu)點(diǎn)：支持Markdown，功能較為豐富，支持原生 JavaScript 以及 Vue、React、Angular 和 Svelte 等框架。

缺點(diǎn)：可擴(kuò)展性較差。

CKEditor5

簡介：強(qiáng)大的富文本編輯器框架，具有模塊化架構(gòu)、現(xiàn)代集成和協(xié)作編輯等功能。

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

start：6k+

官網(wǎng)：https://ckeditor.com/ckeditor-5/

優(yōu)點(diǎn)：CKEditor升級版，開箱即用。

milkdown

簡介：插件驅(qū)動的所見即所得的Markdown編輯器框架。

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

start：7k+

官網(wǎng)：https://milkdown.dev/

優(yōu)點(diǎn)：輕量，支持react，Vue等多種框架。

缺點(diǎn)：只支持Markdown。

最后

優(yōu)秀的開源庫還有不少，例如AFFiNE、wangEditor、bytemd，tiptap這里就不再一一列舉，相信總有一款適合你。

沒有最好的，只有合適的。

關(guān)鍵詞： 文本編輯 所見即所得 可擴(kuò)展性