靈活可擴充套件，2023年值得嘗試的13款富文字編輯器

pingan8787發表於2023-04-19
套件

作為前端開發人員，我們經常需要為網站和應用程式新增文字內容。與傳統的文字編輯器不同，富文字編輯器可讓您輕鬆建立各種型別的文字內容，包括加粗字型、斜體字、框架、列表、圖片和影片等。

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

1.Quill （35.1k Star）

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

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

Quill.js 有以下特點：

  1. 易用性強：視覺化編輯、自動儲存等特性，方便實現文字樣式、佈局等。
  2. 可定製性強：支援自定義擴充套件，新增自定義塊型別、工具欄等，更加靈活實用。
  3. 支援格式化和樣式：提供多種基本格式和樣式，美觀易讀。
  4. 自適應佈局：採用完全響應式佈局，適應不同瀏覽器和裝置，提高移動端使用體驗。
  5. 多語言支援：提供多語言 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 有以下特點：

  1. 組裝靈活：可按需新增或組合外掛，精簡高效。
  2. 擴充套件定製：支援使用者自定義外掛和編輯器行為，提供豐富的 API 和內建外掛體系，快速定製和擴充套件。
  3. 操作多樣：支援文字插入、刪除、選中、撤銷、重做等基本操作，並提供全面的 API 指導。
  4. 持久儲存：使用類似於 Git 的資料結構，支援版本控制和恢復歷史更改；支援本地儲存，方便再次使用。

3.Editor.js （22.5k Star）

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

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

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

Slate.js 有以下特點：

  1. 強大的擴充性：提供多種定製化塊和工具，靈活搭建文件編輯器工具，例如構建電商產品頁面。
  2. 無程式設計經驗可用：使用者可輕鬆建立並生成可嵌入的程式碼。
  3. 廣泛適用性：可整合到多種 CMS 平臺和網站構建器中。
  4. 豐富的外掛庫：透過外掛新增樣式和功能，提供強大的文字編輯器特性。
  5. 輕量化：只有 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 有以下特點：

  1. 強大的擴充套件性：提供多種可組合的富文字編輯器元件和外掛，允許使用者定製行為和外觀。
  2. 高度可定製：充分的 API 支援樣式、行為、校驗等修改，滿足特定需求。
  3. 實時協作：支援多使用者同時編輯和實時協作場景。
  4. 易運算元據：使用易於操作和維護的 EditorState 資料模型進行文字內容和樣式管理；基於 React，渲染速度更快互動效果更流暢。
  5. 高安全性：包含強制安全檢查，限制某些標記和危險屬性的使用。

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 有以下特點：

  1. 支援雲端同步：與多種雲端儲存服務同步個人資料。
  2. 多平臺支援：可在 Web、Windows、macOS、Linux 等多個平臺使用。
  3. 實時預覽模式：即時預覽 Markdown 編輯內容，提高編輯效率。
  4. 自定義主題和樣式：提供多種主題和樣式設定，滿足不同使用者需求。
  5. 外掛支援：支援外掛，自選所需功能，提升使用效果。
  6. 易用性高：介面簡潔明瞭，輕鬆建立、編輯和匯出 Markdown 檔案。

6.Tiptap （18.8k Star）

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

Tiptap 是一款基於 Vue 的富文字編輯器，它使用了標註化的 JSON 資料結構來管理文字內容和樣式。Tiptap 的目標是為開發人員提供可擴充套件性、可定製性和易於整合的富文字編輯器解決方案。

Tiptap 有以下特點：

  1. 突出的擴充套件性：提供內建功能和外掛，開發人員可編寫自己的外掛併發布到元件庫中供他人使用。
  2. 豐富的工具箱：提供命令、標記、過濾器、鍵繫結等工具，便於快速構建功能強大的編輯器。
  3. 支援自定義主題：支援透過 CSS 自定義編輯器 UI 樣式，滿足不同使用者需求。
  4. 簡單易用：API 簡單易用，支援流暢的編輯體驗並能處理複雜富文字編輯場景。
  5. 基於 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 有以下特點：

  1. 視覺化編輯器：提供拖放網頁元素、快速處理樣式等功能，方便使用者快速搭建網頁介面。
  2. 非常靈活：自定義外觀和功能，透過 API 和外掛機制，能夠整合到不同的環境中。
  3. 應用於完整的工作流：支援文字、影像和影片製作，可用作完整的 Web 內容管理系統 (CMS)，或輕量級的頁面製作工具。
  4. 簡單易用：使用簡單易上手，無需編寫 CSS 等程式碼，提供實時預覽和撤銷/重做等功能。

8.Trix （17.6k Star）

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

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

Trix Editor 的定位是一款易於整合和使用的編輯器，它非常容易使用，提供了富文字編輯器所需的基本功能，同時具有易於擴充套件和自定義的特點。

Trix 有以下特點：

  1. 易於整合：可與現有的 Web 應用程式輕鬆整合，並提供多個官方包供 Ruby on Rails、React、Vue 等框架使用。
  2. 基本功能齊全：提供常用的基本功能，如顏色和字型樣式、段落樣式、連結、影像和影片插入等，還支援撤銷和重做功能。
  3. 易於擴充套件和自定義：允許使用者新增外掛以擴充套件功能，透過 CSS 和自定義樣式來定製編輯器的外觀和風格。
  4. 安全性高：不允許使用者使用自定義 HTML 標籤或指令碼，在此基礎上進行文字編輯操作，提高了編輯器的安全性。
  5. 開源免費：是一款開源免費軟體，方便廣泛採用。

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 有以下特點：

  1. 支援 Markdown 編輯：能夠使用 Markdown 語法進行文字編輯，使用者可以直接輸入 Markdown 語法來編輯文字內容。
  2. 實時預覽功能：提供實時預覽功能，使用者可以在編輯器中同時檢視編輯後文字的預覽效果，以便更好的瞭解編輯效果。
  3. 豐富的功能特點：具備字型、顏色、表格、專案符號列表、影像和影片插入、程式碼塊和數學公式等功能，方便使用者進行文字編輯和排版操作。
  4. 介面簡潔：具有簡潔的使用者介面，使用者可以輕鬆找到所需功能和工具欄，可透過自定義樣式修改編輯器的外觀和風格。
  5. 易於整合：可透過外掛整合到 CMS、部落格和論壇，也可嵌入式整合到基於 Web 框架的應用程式中。

10.Gutenberg （8.6k Star）

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

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

Gutenberg 有以下特點：

  1. 塊編輯器：將文章和頁面內容劃分為獨立塊，使用者可透過拖拽、複製、貼上等方式，在不同型別塊之間快速編輯和移動。
  2. 內容視覺化：直觀、友好的內容視覺化編輯功能，實時編輯和調整內容的樣式、佈局和排版。
  3. 可擴充套件性：具有豐富的 API 和外掛系統，使用者可根據需要進行自定義和擴充套件，滿足不同需求。
  4. 多媒體支援：可輕鬆新增和管理各種型別的多媒體資源，包括圖片、影片、音訊等，方便融入文章和頁面中。
  5. 相容性：與主流瀏覽器和裝置相容性良好，適用於各種場景和裝置的使用需求。

11.CKEditor 5 （7.1k Star）

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

CKEditor 5 是一款功能強大、現代化的 web 富文字編輯器，旨在提供使用者友好、可擴充套件和易於整合的編輯體驗。

CKEditor 5 有以下特點：

  1. 分離元件：將編輯器拆分成多個獨立的元件，提供靈活和可擴充套件的編輯功能，如富文字編輯器、敲擊感應、實時輸入、段落分割等。
  2. 外掛式架構：提供豐富的外掛系統，使用者可根據需要安裝使用不同外掛，如表情符號、語法高亮、程式碼塊等。
  3. 自然語言處理：使用自然語言處理技術，實現智慧化文字編輯功能，如自動拼寫檢查和語義化排版等。
  4. **區塊模型：採用區塊模型方式組織和管理頁面內容，使用者可透過拖拽、複製和貼上等方式，方便地編輯不同型別的塊。
  5. 可定製性：完全可定製，使用者可輕鬆地根據需要對編輯器進行擴充套件和定製。
  6. 構建與整合：提供多種方式用以構建和整合編輯器，以滿足不同使用者需求。

12.ProseMirror （6.5k Star）

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

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

ProseMirror 有以下特點：

  1. 基於文件模型：ProseMirror 以文件樹為抽象模型，提供富文字編輯器，方便對文件的操作和管理。
  2. 可擴充套件性：豐富的 API 和外掛系統支援使用者自定義和擴充套件，如塊、模組、樣式等，滿足不同需求。
  3. 格式支援：ProseMirror 支援眾多富文字格式，如 HTML、Markdown、LaTex 等，方便匯入匯出文件。
  4. 高可定製性：靈活定製各元素和元件，滿足使用者編輯需求，包括編輯能力和樣式等。
  5. 視覺化編輯：提供視覺化編輯功能，使用者可以實時預覽文件樣式和渲染效果，方便編輯和調整。

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 有以下特點：

  1. 基於塊：將文件內容分解為塊，如文字、影像、影片等，每個塊均有自定義樣式和行為。
  2. 輕鬆拖放：採用拖曳元件方式，快速構建文件結構。
  3. 外掛式架構：提供多種外掛，如程式碼塊、影像塊、任務塊等。
  4. 簡單易用：上手簡單，幾行程式碼即可整合到任何 web 應用程式中。
  5. 多平臺和多瀏覽器支援：支援多平臺瀏覽器，如 Mac、Windows、iOS、Android、Chrome、Firefox、Safari 等。
  6. 完全可定製：具備完全可定製的能力，使用者可以靈活定義樣式、功能。

總結

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

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

相關文章