富文本編輯器作為直接與用戶交互的內(nèi)容輸入生產(chǎn)工具，對大家的項目來說非常重要。選不好，配置不好，直接影響產(chǎn)品質(zhì)感和用戶體驗，所以說在選擇編輯器方面花點(diǎn)時間是值得的。

• 我試用了市面上所有主流富文本編輯器，篩掉長期不更新，bug 明顯，社區(qū)活躍度低，功能單一的編輯器，把最好、最有特點(diǎn)的 7 款編輯器挑出來，分享給大家。這些編輯器各有各的特點(diǎn)，有些功能多樣，但整體很重，有些功能雖然少，但某一項功能優(yōu)化的特別好。希望我的測評可以幫助你選到合適你需求的編輯器。

本文測評的 7 款 Vue 富文本編輯器

1. TinyMCE - 富文本編輯器里的 Word ，功能想不到的豐富
2. tiptap - 多人在線實時協(xié)同編輯
3. CKEditor 5 - 開源免費(fèi)可商用，行內(nèi)編輯
4. Quill - 易擴(kuò)展、輕量級二開、代碼高亮好用
5. Froala - 插件豐富，UI友好，編輯器里的蘋果
6. summernote - 恰到好處的輕，可直接粘貼圖片
7. Trumbowyg - 超輕量，體積小巧，僅 8KB

一. TinyMCE - 富文本編輯器里的 Word ，功能想不到的豐富

TinyMCE是富文本編輯器領(lǐng)域的頭部玩家之一，主流富文本編輯器，功能非常全，你需要的大多數(shù)功能它都支持。排出復(fù)雜又美觀文章樣式，代碼高亮等都是基礎(chǔ)功能。它甚至有點(diǎn)像在線版的Word，可以在頂部的各種菜單中找到你要的功能。但它的優(yōu)勢也恰恰是它的劣勢，如此之多的功能都放上來導(dǎo)致整個編輯器非常重，如果只是需要簡單功能，上這么復(fù)雜的編輯器，大材小用。

TinyMCE 對 Vue.js 的集成和安裝非常友好，支持 Vue3 和 TypeScript，文檔寫的也非常好。

二. tiptap - 多人在線實時協(xié)同編輯

tiptap 最初是為 Vue2 開發(fā)的，現(xiàn)在已發(fā)展成為獨(dú)立框架工具，對 Vue3、React、Svelte 集成友好。 它基于 Prosemirror 進(jìn)行擴(kuò)展開發(fā)，是一款無頭(headerless)富文本編輯器，默認(rèn)情況下，它沒有任何 UI樣式，你完全可以自己來配置想要的 UI，不需要重寫 class，也不需要 important 代碼。

tiptap功能非常強(qiáng)大，功能插件豐富。但它比其他編輯器更棒的地方在于多人在線實時編輯。類似于谷歌文檔那種效果，所有使用者在同一個頁面彼此能看到對方的光標(biāo)位置和名字，大家同時在線協(xié)同編輯。整個協(xié)同體驗流暢，如果你的應(yīng)用場景需要多人實時協(xié)同編輯，選 tiptap 就對了。

三. CKEditor 5 - 開源免費(fèi)可商用，行內(nèi)編輯

CKEditor 5 是基于 Vue 的富文本編輯器組件，開源，可免費(fèi)用于商業(yè)用途，官方下載量已經(jīng)過千萬。CKEditor 是編輯器前輩FCkEditor 的基礎(chǔ)上開發(fā)的全新版本。它的 UI設(shè)計現(xiàn)代，支持行內(nèi)編輯模式。免費(fèi)付費(fèi)功能分布合理，付費(fèi)主要是小部件、實時協(xié)同和歷史記錄。CKEditor 5有詳細(xì)的文檔，從入門到自定義編輯器，再到如何與不同框架集成，寫的非常詳細(xì)。

四. Quill - 易擴(kuò)展、輕量級二開、代碼高亮好用

Quill 也是眾多富文本編輯器中的佼佼者，它相對于其他編輯器更容易設(shè)置，有豐富便捷的 API，非常好的擴(kuò)展性，輕量級可二開的編輯框，很適合特殊場景的定制開發(fā)。

Quill的優(yōu)缺點(diǎn)都非常突出，它的代碼高亮功能突出好用，但卻沒有一些常規(guī)編輯器都有的標(biāo)配功能，比如表格，如果你想找一款輕巧，不需要太多復(fù)雜功能，對代碼編輯友好的編輯器，Quill是不錯的選擇。作為老牌富文本編輯器，Quill 還有一個比較大的開發(fā)者社區(qū)以及圍繞 Quill 開發(fā)的插件和集成的生態(tài)系統(tǒng)。

五. Froala - 插件豐富，UI友好，編輯器里的蘋果

Froala 被喜歡它的用戶稱之為史上最牛富文本編輯器，干凈的 UI 和簡潔的設(shè)計，極其豐富的插件，可自定義配置，功能非常強(qiáng)大，API和文檔非常全面，開發(fā)者上手友好，支持非常多的前端框架 VueJS、ReactJS、Angular、Meteor、Ember。

六. summernote - 恰到好處的輕，可直接粘貼圖片

summernote是一款輕量級富文本編輯器，它的所有功能都在界面上了，如果這些功能你需要的場景恰巧夠用，那么恭喜你了，你找到了輕便趁手的富文本編輯器。summernote非常容易上手，體驗輕快，甚至還支持快捷鍵操作。

值得一提的是它對圖片的處理，summernote 直接把圖片 base64到內(nèi)容字段，所有你不用處理圖片。另外它支持直接復(fù)制粘貼圖片到編輯器里，這一點(diǎn)非常趁手。

summernote 基于 jQuery 和 Bootstrap 構(gòu)建，支持各類主流瀏覽器，有大量可定制開發(fā)的選項，

七. Trumbowyg - 超輕量，體積小巧，僅 8KB

Trumbowyg 是一個超級輕量級可定制的 jQuery 富文本編輯器，可生成語義化代碼，針對 HTML5 優(yōu)化，對主流瀏覽器友好支持， API 功能強(qiáng)大。

Trumbowyg 功能非常簡單，你看我上面實際安裝后的測試截圖就知道，沒有太多復(fù)雜的功能。但它有個突出特點(diǎn)，就是小，壓縮后僅有 8kb大。對于某些應(yīng)用場景需要網(wǎng)頁加載速度快或針對網(wǎng)絡(luò)狀態(tài)不好的使用場景，這個特點(diǎn)非常非常重要。文章來源地址http://www.zghlxwxcb.cn/news/detail-496442.html

到了這里，關(guān)于7 款 Vue 3 富文本編輯器的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！