推薦 10 款常用的富文本編輯器

大家好，我是Echa.

富文本編輯器，Multi-function Text Editor, 簡稱 MTE, 是一種可内嵌于浏覽器，所見即所得（WYSIWYG）的文本編輯器。今天就來介紹 10 款式前端開發常用的富文本編輯器插件！

1. Draft.js

Draft.js 是 Facebook 的一個開源項目，是 React 項目首選的是文本編輯器架構。這是一個健壯、可擴充和可定制的架構。Draft.js 遵循與 React 中的受控元件相同的範例，并提供了一個 Editor 呈現富文本輸入的元件。它還公開了一個EditorStateAPI 來處理/存儲Editor元件中的狀态更新。

該富文本編輯器的特點：

• 具有高度可擴充性和可定制性；
• 由 Facebook 支援的龐大且不斷增長的開源開發者社群提供了許多教程和支援；
• 無縫融入 React 應用程式，使用熟悉的聲明式 API 抽象出渲染、選擇和輸入行為的細節；
• Draft.js 模型使用 immutable-js 建構的，提供了一個具有功能狀态更新的 API，并積極利用資料持久性來實作可擴充的記憶體使用。

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

2. Slate.js

Slate.js 是受 Draft.js 啟發的富文本編輯器。它是一個可深度定制的富編輯器架構，專用于 React。與 Draft.js 類似，它具有良好的 API、強大的插件基礎設施以及與 React 的深度連接配接。此外，插件生态系統比 Draft.js 小一些，但它的插件品質會更好。

該富文本編輯器的特點：

• 生成 JSON 輸出，使其更容易與其他子產品內建；
• 它的嵌套文檔模型支援更複雜的内容結構，如表格、分頁符和其他自定義功能；
• 可使用插件進行擴充；
• 提供良好的描述性文檔和互動式示範。

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

3. Quill.js

Quill.js 是一個具有跨平台和跨浏覽器支援的富文本編輯器。憑借其可擴充架構和富有表現力的 API，可以完全自定義它以滿足個性化的需求。由于其子產品化架構和富有表現力的 API，可以從 Quill 核心開始，然後根據需要自定義其子產品或将自己的擴充添加到這個富文本編輯器中。它提供了兩個用于更改編輯器外觀的主題，可以使用插件或覆寫其 CSS 樣式表中的規則進一步自定義。Quill 還支援任何自定義内容和格式，是以可以添加嵌入式幻燈片、3D 模型等。

該富文本編輯器的特點：

• 由于其 API 驅動的設計，無需像在其他文本編輯器中那樣解析 HTML 或不同的 DOM 樹；
• 跨平台和浏覽器支援，快速輕便；
• 通過其子產品和富有表現力的 API 完全可定制；
• 可以将内容表示為 JSON，更易于處理和轉換為其他格式；
• 提供兩個主題以快速輕松地更改編輯器的外觀。

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

4. TinyMCE

TinyMCE 是一個熱門的富文本編輯器。它的目标是幫助其他開發人員建構精美的 Web 内容解決方案。它易于內建，可以部署在基于雲的、自托管或混合環境中。該設定使得合并諸如 Angular、React 和 Vue 等架構成為可能。它還可以使用 50 多個插件進行擴充，每個插件都有 100 多個自定義選項。

TinyMCE 通過建立和編輯表格、建立字型系列、搜尋和替換字型以及更改字型大小等功能，讓你可以完全控制你的設計。它還提供了多種雲安全功能，包括 JSON Web 令牌和私有 RSA 密鑰，以更好地保護你的内容。

該富文本編輯器的特點：

• 實時協作支援；
• 進階表格和複雜内容支援；
• 增強的媒體嵌入支援；
• 自動連接配接檢查器；
• 編輯器可以在三種模式下使用：經典、内聯、無幹擾；
• 提供雲安全功能。

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

5. wangEditor

wangEditor 是一個使用Typescript 開發的 Web 富文本編輯器， 輕量、簡潔、易用、開源免費。它相容常見的 PC 浏覽器：Chrome，Firefox，Safar，Edge，QQ 浏覽器，IE11。

GitHub：https://github.com/wangeditor-team/wangEditor/

6. ProseMirror

ProseMirror 是一個基于 ContentEditable 的所見即所得 HTML 編輯器，功能強大，支援協作編輯和自定義文檔模式 ProseMirror 庫由多個單獨的子產品組成。一個理想的富文本編輯器産生結構化的、語義化的、有意義的文檔的同時還要能夠讓使用者能夠容易地了解與使用。ProseMirror 試着在 Markdown 編輯體驗和傳統的 WYSIWYG 編輯體驗中尋找一種融合的方法。它通過實作一個比普通的 HTML 具有更多的限制和結構化的 WYSIWYG 風格的接口來做到這點。你可以自定義編輯器建立的文檔的結構和内容，使它們符合你應用的需要。

該富文本編輯器的特點：

• 實時協同編輯：ProseMirror 内置了對實時協同編輯的堅定支援，它允許多個人同時對一個文檔進行編輯。
• 可擴充的文檔結構：文檔結構（Document schemas）允許使用自定義的文檔結構而無需從頭開始編寫自己的編輯器。
• 子產品化：子產品機制確定你隻載入自己需要的子產品，同時能夠按需替換已有的子產品。
• 插件化：插件系統允許你容易地增加額外的功能，同時以一種簡單的方式打包你的插件。
• 函數式：一個函數式和不可變資料結構讓 ProseMirror 很容易的與現代 web app 內建，以實作複雜的編輯行為。
• 定制化：核心庫小巧且通用，為建構不同類型的編輯器提供基礎支援。

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

7. Tiptap

Tiptap 是一個基于 Vue 的無渲染的富文本編輯器，它基于 Prosemirror，完全可擴充且無渲染。可以輕松地将自定義節點添加為Vue元件。使用無渲染元件（函數式元件），幾乎完全控制标記和樣式。菜單的外觀或在DOM中的顯示位置。這完全取決于使用者。

該富文本編輯器的特點：

• 支援 Vue，React，Svelte 等架構；
• 使用 TypeScript 重構，支援類型系統；
• 代碼多包釋出，每個子產品的功能更加獨立，開發者能更好的按需使用；
• 提供了更多開箱即用的擴充；
• 完善了文檔細節，有了文檔站點；
• 更高程度的支援了協同編輯。

GitHub：https://github.com/ueberdosis/tiptap

8. CKEditor 5

CKEditor 是一個強大的富文本編輯器架構，具有子產品化架構、現代內建和協作編輯等功能。它可以通過基于插件的架構進行擴充，進而可以将必要的内容處理功能引入。CKEditor 在市場上已有近 15 年的曆史，因其具有廣泛的功能和舊版軟體相容性而成為最負盛名的編輯器之一。

CKEditor 5 是一個超現代的 JavaScript 富文本編輯器，具有 MVC 架構、自定義資料模型和虛拟 DOM。它是在 ES6 中從頭開始編寫的，并且具有出色的 webpack支援。可以使用與Angular、React和Vue.js的原生內建。

該富文本編輯器的特點：

• 與Electron和移動裝置（Android、iOS）相容；
• 可以自定義編輯器的顔色、語言、尺寸、工具欄等；
• 可以通過插件擴充；
• 支援從 Word、Excel 和 Google Docs 粘貼；
• 可以通過 Media Embed 插件插入視訊、推文、代碼片段、數學公式等。

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

9. ContentTools

ContentTools 是一個開源的富文本編輯器，隻需幾個步驟即可将其添加到任何 HTML 頁面。添加後，将在 HTML 頁面上看到一個鉛筆圖示。單擊時，會出現一個工具箱和檢查器欄。使用這兩個元素，可以在頁面内編輯、調整大小或拖放文本圖像、嵌入的視訊、表格和其他内容。

ContentTools 旨在提供可開箱即用的全功能内容編輯器和可用于建構您自己的編輯器的類和函數工具包。該工具包包括一組輕量級的使用者界面類、一組用于執行常見編輯任務的工具，以及一個用于管理撤消/重做的曆史堆棧。雖然工具包提供的元件可以很好地協同工作，但它們也可以根據需要使用或更換。

該富文本編輯器的特點：

• 隻需幾個簡單的步驟，即可在任何 HTML 頁面上安裝編輯器；
• 可以控制頁面的哪些區域是可編輯的；
• 可以通過添加工具進行擴充。

GitHub：https://github.com/GetmeUK/ContentTools

10. Jodit

Jodit 是一款使用純 TypeScript 編寫的（無需使用其他庫），美觀實用的所見即所得開源富文本編輯器，支援中文，超強自定義。

GitHub：https://github.com/xdan/jodit