靈活可擴展，2023 年值得嘗試的 13 款富文本編輯器

作爲前端開發人員，我們經常需要爲網站和應用程序添加文本內容。與傳統的文本編輯器不同，富文本編輯器可讓您輕鬆創建各種類型的文本內容，包括加粗字體、斜體字、框架、列表、圖片和視頻等。

本文我將向大家推薦 13 款開源的靈活可拓展的富文本編輯器，這些編輯器擁有各自獨特的特性和擴展，可以幫助你創建豐富的文本內容。

1.Quill （35.1k Star）

主頁地址：https://quilljs.com/
倉庫地址：https://github.com/quilljs/quill

Quill.js 是一款基於 JavaScript 的現代化富文本編輯器，它在界面、易用性、擴展性和性能方面都有着出色的表現。相比傳統的文本輸入框，Quill.js 的富文本編輯器提供了 「更加直觀」、 「自然」 的交互方式和 「更加豐富的文本內容展示功能」。

Quill.js 有以下特點：

「易用性強」：可視化編輯、自動保存等特性，方便實現文本樣式、佈局等。
「可定製性強」：支持自定義擴展，添加自定義塊類型、工具欄等，更加靈活實用。
「支持格式化和樣式」：提供多種基本格式和樣式，美觀易讀。
「自適應佈局」：採用完全響應式佈局，適應不同瀏覽器和設備，提高移動端使用體驗。
「多語言支持」：提供多語言 UI 支持，用戶可自定義語言和快捷鍵。

2.Slate.js （26.8k Star）

主頁地址：https://www.slatejs.org/examples
倉庫地址：https://github.com/ianstormtaylor/slate

Slate.js 是一款 「支持完全自定義」 的富文本編輯器，它在可擴展性、可定製性、豐富的 API 和 React 集成方面有着出色的表現。

Slate.js 的主要目標是提供一種簡單而又強大的方式來構建富文本編輯器。

Slate.js 有以下特點：

「組裝靈活」：可按需添加或組合插件，精簡高效。
「擴展定製」：支持用戶自定義插件和編輯器行爲，提供豐富的 API 和內置插件體系，快速定製和擴展。
「操作多樣」：支持文本插入、刪除、選中、撤銷、重做等基本操作，並提供全面的 API 指導。
「持久保存」：使用類似於 Git 的數據結構，支持版本控制和恢復歷史更改；支持本地存儲，方便再次使用。

3.Editor.js （22.5k Star）

主頁地址：https://editorjs.io/
倉庫地址：https://github.com/codex-team/editor.js

Editor.js 是一款基於 JavaScript 的簡單編輯器，通過 「模塊化」 的方式提供了各種對於富文本內容編輯而言有用的核心功能。

Editor.js 擁有易於使用的 「拖放式」 界面（實時預覽），使得富媒體文檔可以在幾分鐘內被創建並無需任何的前端知識。

Slate.js 有以下特點：

「強大的拓展性」：提供多種定製化塊和工具，靈活搭建文檔編輯器工具，例如構建電商產品頁面。
「無編程經驗可用」：用戶可輕鬆創建並生成可嵌入的代碼。
「廣泛適用性」：可集成到多種 CMS 平臺和網站構建器中。
「豐富的插件庫」：通過插件添加樣式和功能，提供強大的文本編輯器特性。
「輕量化」：只有 15 KB 大小。

4.Draft.js （22.4k Star）

主頁地址：https://draftjs.org/
倉庫地址：https://github.com/facebook/draft-js

Draft.js 是由 Facebook 開發的基於 React 的富文本編輯器框架。它使用可擴展的、可配置的、可組合的模塊來管理文本內容的編輯。

Draft.js 是爲編寫符合各種應用程序的富文本編輯器而提供更好的 「模塊化解決方案」。

Draft.js 有以下特點：

「強大的擴展性」：提供多種可組合的富文本編輯器組件和插件，允許用戶定製行爲和外觀。
「高度可定製」：充分的 API 支持樣式、行爲、校驗等修改，滿足特定需求。
「實時協作」：支持多用戶同時編輯和實時協作場景。
「易操作數據」：使用易於操作和維護的 EditorState 數據模型進行文本內容和樣式管理；基於 React，渲染速度更快交互效果更流暢。
「高安全性」：包含強制安全檢查，限制某些標記和危險屬性的使用。

5.StackEdit （20.2k Star）

主頁地址：https://stackedit.io/
倉庫地址：https://github.com/benweet/stackedit

StackEdit 是一款基於 Web 的在線 Markdown 編輯器，使用者可以通過它輕鬆編輯 Markdown 文檔、同時還可以直接將 Markdown 文檔同步到一些雲端存儲服務如 Dropbox 、Google Drive 、GitHub 等，這是 StackEdit 的另一大特點。StackEdit 通過提供 「實時預覽模式」，幫助用戶更好地閱讀和編輯 Markdown 文檔。

StackEdit 有以下特點：

「支持雲端同步」：與多種雲端存儲服務同步個人數據。
「多平臺支持」：可在 Web、Windows、macOS、Linux 等多個平臺使用。
「實時預覽模式」：即時預覽 Markdown 編輯內容，提高編輯效率。
「自定義主題和樣式」：提供多種主題和樣式設置，滿足不同用戶需求。
「插件支持」：支持插件，自選所需功能，提升使用效果。
「易用性高」：界面簡潔明瞭，輕鬆創建、編輯和導出 Markdown 文件。

6.Tiptap （18.8k Star）

主頁地址：https://tiptap.dev/
倉庫地址：https://github.com/ueberdosis/tiptap

Tiptap 是一款基於 Vue 的富文本編輯器，它使用了 「標註化」 的 JSON 數據結構來管理文本內容和樣式。Tiptap 的目標是爲開發人員提供可擴展性、可定製性和易於集成的富文本編輯器解決方案。

Tiptap 有以下特點：

「突出的擴展性」：提供內置功能和插件，開發人員可編寫自己的插件併發布到組件庫中供他人使用。
「豐富的工具箱」：提供命令、標記、過濾器、鍵綁定等工具，便於快速構建功能強大的編輯器。
「支持自定義主題」：支持通過 CSS 自定義編輯器 UI 樣式，滿足不同用戶需求。
「簡單易用」：API 簡單易用，支持流暢的編輯體驗並能處理複雜富文本編輯場景。
「基於 Vue」：基於 Vue.js 開發，完美集成到 Vue.js 生態系統中，方便在 Vue 應用程序中使用。

7.GrapesJS （17.7k Star）

主頁地址：https://grapesjs.com/
倉庫地址：https://github.com/artf/grapesjs

GrapesJS 是一個強大的基於 Web 的頁面構建器，它讓人們可以直觀地通過 「拖放方式」 創建和編輯網頁頁面。它是一個開源的項目，支持主流瀏覽器，是一個用 JavaScript 和 CSS 開發的成熟的工具。

GrapesJS 提供了一個 「可視化的編輯器」，從而讓用戶不需要編寫 HTML 或 CSS 代碼，就可以同時 「訪問各種設計工具和插件」。

GrapesJS 有以下特點：

「可視化編輯器」：提供拖放網頁元素、快速處理樣式等功能，方便用戶快速搭建網頁界面。
「非常靈活」：自定義外觀和功能，通過 API 和插件機制，能夠集成到不同的環境中。
「應用於完整的工作流」：支持文本、圖像和視頻製作，可用作完整的 Web 內容管理系統 (CMS)，或輕量級的頁面製作工具。
「簡單易用」：使用簡單易上手，無需編寫 CSS 等代碼，提供實時預覽和撤銷 / 重做等功能。

8.Trix （17.6k Star）

主頁地址：https://trix-editor.org/
倉庫地址：https://github.com/basecamp/trix

Trix Editor 是一個基於 Web 的富文本編輯器，由 Basecamp 公司開發。

Trix Editor 的定位是一款 「易於集成和使用的編輯器」，它非常容易使用，提供了富文本編輯器所需的基本功能，同時具有易於擴展和自定義的特點。

Trix 有以下特點：

「易於集成」：可與現有的 Web 應用程序輕鬆集成，並提供多個官方包供 Ruby on Rails、React、Vue 等框架使用。
「基本功能齊全」：提供常用的基本功能，如顏色和字體樣式、段落樣式、鏈接、圖像和視頻插入等，還支持撤銷和重做功能。
「易於擴展和自定義」：允許用戶添加插件以擴展功能，通過 CSS 和自定義樣式來定製編輯器的外觀和風格。
「安全性高」：不允許用戶使用自定義 HTML 標籤或腳本，在此基礎上進行文本編輯操作，提高了編輯器的安全性。
「開源免費」：是一款開源免費軟件，方便廣泛採用。

9.Toast UI Editor （15.9k Star）

主頁地址：https://ui.toast.com/tui-editor/
倉庫地址：https://github.com/nhn/tui.editor

Toast UI Editor 是一款利用 JavaScript 和 jQuery 開發的塊編輯器。它支持多種文本字體和大小，還可以使用 Markdown 或 WYSIWYG（所見即所得）編輯模式。

Toast UI Editor 有以下特點：

「支持 Markdown 編輯」：能夠使用 Markdown 語法進行文本編輯，用戶可以直接輸入 Markdown 語法來編輯文本內容。
「實時預覽功能」：提供實時預覽功能，用戶可以在編輯器中同時查看編輯後文本的預覽效果，以便更好的瞭解編輯效果。
「豐富的功能特點」：具備字體、顏色、表格、項目符號列表、圖像和視頻插入、代碼塊和數學公式等功能，方便用戶進行文本編輯和排版操作。
「界面簡潔」：具有簡潔的用戶界面，用戶可以輕鬆找到所需功能和工具欄，可通過自定義樣式修改編輯器的外觀和風格。
「易於集成」：可通過插件集成到 CMS、博客和論壇，也可嵌入式集成到基於 Web 框架的應用程序中。

10.Gutenberg （8.6k Star）

主頁地址：https://wordpress.org/gutenberg/
倉庫地址：https://github.com/WordPress/gutenberg

Gutenberg 編輯器是 WordPress 5.0 及以上版本中默認的編輯器，它是一款 「基於塊的編輯器」，旨在提供 「更直觀」、「更豐富」 和 「更靈活」 的編輯體驗。

Gutenberg 有以下特點：

「塊編輯器」：將文章和頁面內容劃分爲獨立塊，用戶可通過拖拽、複製、粘貼等方式，在不同類型塊之間快速編輯和移動。
「內容可視化」：直觀、友好的內容可視化編輯功能，實時編輯和調整內容的樣式、佈局和排版。
「可擴展性」：具有豐富的 API 和插件系統，用戶可根據需要進行自定義和擴展，滿足不同需求。
「多媒體支持」：可輕鬆添加和管理各種類型的多媒體資源，包括圖片、視頻、音頻等，方便融入文章和頁面中。
兼容性：與主流瀏覽器和設備兼容性良好，適用於各種場景和設備的使用需求。

11.CKEditor 5 （7.1k Star）

主頁地址：https://ckeditor.com/ckeditor-5/
倉庫地址：https://github.com/ckeditor/ckeditor5

CKEditor 5 是一款功能強大、現代化的 web 富文本編輯器，旨在提供 「用戶友好」、「可擴展」 和 「易於集成」 的編輯體驗。

CKEditor 5 有以下特點：

「分離組件」：將編輯器拆分成多個獨立的組件，提供靈活和可擴展的編輯功能，如富文本編輯器、敲擊感應、實時輸入、段落分割等。
「插件式架構」：提供豐富的插件系統，用戶可根據需要安裝使用不同插件，如表情符號、語法高亮、代碼塊等。
「自然語言處理」：使用自然語言處理技術，實現智能化文本編輯功能，如自動拼寫檢查和語義化排版等。
** 區塊模型：採用區塊模型方式組織和管理頁面內容，用戶可通過拖拽、複製和粘貼等方式，方便地編輯不同類型的塊。
「可定製性」：完全可定製，用戶可輕鬆地根據需要對編輯器進行擴展和定製。
「構建與集成」：提供多種方式用以構建和集成編輯器，以滿足不同用戶需求。

12.ProseMirror （6.5k Star）

主頁地址：https://prosemirror.net/
倉庫地址：https://github.com/ProseMirror/prosemirror

ProseMirror 是一款基於 JavaScript 的富文本編輯器框架，提供了 「高度靈活性」 和 「可定製性」。ProseMirror 具有塊式結構、自定義插件、鍵盤導航、撤銷和重做功能等。

ProseMirror 有以下特點：

「基於文檔模型」：ProseMirror 以文檔樹爲抽象模型，提供富文本編輯器，方便對文檔的操作和管理。
「可擴展性」：豐富的 API 和插件系統支持用戶自定義和擴展，如塊、模塊、樣式等，滿足不同需求。
「格式支持」：ProseMirror 支持衆多富文本格式，如 HTML、Markdown、LaTex 等，方便導入導出文檔。
「高可定製性」：靈活定製各元素和組件，滿足用戶編輯需求，包括編輯能力和樣式等。
「可視化編輯」：提供可視化編輯功能，用戶可以實時預覽文檔樣式和渲染效果，方便編輯和調整。

13.Sir Trevor JS （4.5k Star）

主頁地址：http://madebymany.github.io/sir-trevor-js/
倉庫地址：https://github.com/madebymany/sir-trevor-js

Sir Trevor JS 是一款基於塊、「輕鬆拖放」、 「插件式架構」、簡單易用、支持 「多平臺」 和多瀏覽器、「完全可定製」 的現代化富文本編輯器。

Sir Trevor JS 有以下特點：

「基於塊」：將文檔內容分解爲塊，如文本、圖像、視頻等，每個塊均有自定義樣式和行爲。
「輕鬆拖放」：採用拖曳組件方式，快速構建文檔結構。
「插件式架構」：提供多種插件，如代碼塊、圖像塊、任務塊等。
「簡單易用」：上手簡單，幾行代碼即可集成到任何 web 應用程序中。
「多平臺和多瀏覽器支持」：支持多平臺瀏覽器，如 Mac、Windows、iOS、Android、Chrome、Firefox、Safari 等。
「完全可定製」：具備完全可定製的能力，用戶可以靈活定義樣式、功能。

總結

無論你是一位專業的開發人員，還是一個有興趣的學習者，這些開源編輯器將帶給你無限的創造空間，同時可以輕鬆擴展和自定義，讓你的工作更加高效和愉悅。選擇一款可靠的富文本編輯器，是保持個人和團隊協作競爭力的首要步驟。

希望這些開源富文本編輯器能夠滿足你的各種需求和要求，爲你帶來無窮的創意和靈感。

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/Jb8V3n2eN9Q5PN_87yDKtQ