最好用的 7 款 Vue 3 富文字編輯器

語言: CN / TW / HK
時間 2022-01-22 01:15:14
主題:

本文首發： 最好用的 7 款 Vue 3 富文字編輯器 - 卡拉雲

富文字編輯器作為直接與使用者互動的內容輸入生產工具，對大家的專案來說非常重要。選不好，配置不好，直接影響產品質感和使用者體驗，所以說在選擇編輯器方面花點時間是值得的。

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

另外，如果你不太懂前度或覺得前端寫起來太麻煩，推薦你試試 卡拉雲 ，卡拉雲僅需簡單拖拽，即可生成「富文字編輯器」，更棒的是卡拉雲可以幫你快速搭建內建編輯器的 Web 應用程式，詳見本文文末。

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

  • TinyMCE - 富文字編輯器裡的 Word ，功能想不到的豐富
  • tiptap - 多人線上實時協同編輯
  • CKEditor 5 - 開源免費可商用，行內編輯
  • Quill - 易擴充套件、輕量級二開、程式碼高亮好用
  • Froala - 外掛豐富，UI友好，編輯器裡的蘋果
  • summernote - 恰到好處的輕，可直接貼上圖片
  • Trumbowyg - 超輕量，體積小巧，僅 8KB
  • 卡拉雲 -內建富文字編輯器的低程式碼開發工具，無需部署，開箱即用

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

TinyMCE 是富文字編輯器領域的頭部玩家之一，主流富文字編輯器，功能非常全，你需要的大多數功能它都支援。排出複雜又美觀文章樣式，程式碼高亮等都是基礎功能。它甚至有點像線上版的 Word，可以在頂部的各種選單中找到你要的功能。但它的優勢也恰恰是它的劣勢，如此之多的功能都放上來導致整個編輯器非常重，如果只是需要簡單功能，上這麼複雜的編輯器，大材小用。

TinyMCE 對 Vue.js 的整合和安裝非常友好，支援 Vue3 和 TypeScript，文件寫的也非常好。

二. tiptap - 多人線上實時協同編輯

tiptap 最初是為 Vue2 開發的，現在已發展成為獨立框架工具，對 Vue3、React、Svelte 整合友好。 它基於 Prosemirror 進行擴充套件開發，是一款無頭(headerless)富文字編輯器，預設情況下，它沒有任何 UI 樣式，你完全可以自己來配置想要的 UI，不需要重寫 class，也不需要 important 程式碼。

tiptap 功能非常強大，功能外掛豐富。但它比其他編輯器更棒的地方在於多人線上實時編輯。類似於谷歌文件那種效果，所有使用者在同一個頁面彼此能看到對方的游標位置和名字，大家同時線上協同編輯。整個協同體驗流暢，如果你的應用場景需要多人實時協同編輯，選 tiptap 就對了。

三. CKEditor 5 - 開源免費可商用，行內編輯

CKEditor 5 是基於 Vue 的富文字編輯器元件，開源，可免費用於商業用途，官方下載量已經過千萬。CKEditor 是編輯器前輩 FCkEditor 的基礎上開發的全新版本。它的 UI 設計現代，支援行內編輯模式。免費付費功能分佈合理，付費主要是小部件、實時協同和歷史記錄。CKEditor 5 有詳細的文件，從入門到自定義編輯器，再到如何與不同框架整合，寫的非常詳細。

擴充套件閱讀：《 Axios 教程：Vue + Axios 安裝及實戰教程 - 手把手教你搭建加密幣實時價格看板 》

四. Quill - 易擴充套件、輕量級二開、程式碼高亮好用

Quill 也是眾多富文字編輯器中的佼佼者，它相對於其他編輯器更容易設定，有豐富便捷的 API，非常好的擴充套件性，輕量級可二開的編輯框，很適合特殊場景的定製開發。

Quill 的優缺點都非常突出，它的程式碼高亮功能突出好用，但卻沒有一些常規編輯器都有的標配功能，比如表格，如果你想找一款輕巧，不需要太多複雜功能，對程式碼編輯友好的編輯器，Quill 是不錯的選擇。

作為老牌富文字編輯器，Quill 還有一個比較大的開發者社群以及圍繞 Quill 開發的外掛和整合的生態系統。

五. Froala - 外掛豐富，UI友好，編輯器裡的蘋果

Froala 被喜歡它的使用者稱之為史上最牛富文字編輯器，乾淨的 UI 和簡潔的設計，極其豐富的外掛，可自定義配置，功能非常強大，API 和文件非常全面，開發者上手友好，支援非常多的前端框架 VueJS、ReactJS、Angular、Meteor、Ember。

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

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

值得一提的是它對圖片的處理，summernote 直接把圖片 base64 到內容欄位，所有你不用處理圖片。另外它支援直接複製貼上圖片到編輯器裡，這一點非常趁手。

summernote 基於 jQuery 和 Bootstrap 構建，支援各類主流瀏覽器，有大量可定製開發的選項，

擴充套件閱讀：《 Vue3 + Node.js 環境搭建，手把手教你搭建前後端分離的 Web APP 》

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

Trumbowyg 是一個超級輕量級可定製的 jQuery 富文字編輯器，可生成語義化程式碼，針對 HTML5 優化，對主流瀏覽器友好支援， API 功能強大。

Trumbowyg 功能非常簡單，你看我上面實際安裝後的測試截圖就知道，沒有太多複雜的功能。但它有個突出特點，就是小，壓縮後僅有 8kb 大。對於某些應用場景需要網頁載入速度快或針對網路狀態不好的使用場景，這個特點非常非常重要。

八. 富文字編輯器總結

本文介紹了我自己用過的 7 款 Vue.js 富文字編輯器的特點，大家可以根據自己工作中的實際場景來對編輯器進行挑選。

如果你想搭建自己的後臺工具，但你對前端並沒有那麼熟悉，可以考慮使用 卡拉雲 ， 卡拉雲內建了富文字編輯器，你完全不用操心前端，只需要簡單拖拽即可立即在頁面上生成富文字編輯器。

卡拉雲是新一代低程式碼開發工具，免安裝部署，可一鍵接入包括 MySQL 在內的常見資料庫及 API。可根據自己的工作流，定製開發。無需繁瑣的前端開發，只需要簡單拖拽，即可快速搭建企業內部工具。 數月的開發工作量，使用卡拉雲後可縮減至數天，歡迎免費 試用卡拉雲 。

九. 本文作者

蔣川，卡拉雲聯合創始人，B 端資料開發。

如果你有任何問題，歡迎一起交流。我的微 HiJiangChuan

擴充套件閱讀：

「」