本文首發：
最好用的 5 款 React 富文本編輯器 - 卡拉雲富文本編輯器常用于網絡上各種形式的内容展示，從簡單的靜态部落格到複雜的内容管理系統。它應用于多種應用程式，如部落格、文章、清單以及更強大的界面 —— 電商網站商品詳情和部落格上的。然而，從這麼多功能各異的編輯器中挑選出一個合适的并不容易。
我測評了 5 款 React 富文本編輯器，比較了他們編輯器的核心功能， 希望我的測評可以幫你找到最合适你應用場景的編輯器。如果你完全不會前端，也不用擔心，可以使用卡拉雲，僅需簡單拖拽即可生成「富文本」編輯器，卡拉雲幫你快速搭建屬于你自己的應用程式，詳見本文文尾。
1. Draft.js — 能夠滿足基礎需求的免費編輯器
Draft.js 是 Facebook 為了 React 而開發的一個 React.js 開源架構。 它是健壯、可擴充及可定制的，在 React 開發者中非常受歡迎。
Draft.js 提供了管理各項配置的工具，包括事件觸發器上的編輯器樣式和單個文本實體（如标題和塊引用）的塊樣式。對于在編輯器中建立的内容，我們希望将其轉換為便于在頁面上顯示的 HTML。一些庫如 draft-convert 和 draftjs-to-html 可用于轉換這些資料。
優點
- 易于了解的扁平化内容模型。
- 建構在 Draft.js 上的高度可擴充及可定制的插件。
- 自 2016 年以來，由 Facebook 支援的龐大且不斷增長的開發者社群提供了許多的教程和支援。
缺點
- 缺乏官方的移動端支援。
- OSX 自定義鍵綁定的問題。
- 當需要表格這樣複雜的内容結構時，編輯器将會變慢，代碼也會變得複雜。
如果你是初學者且希望找到一個能滿足基礎需求的文本編輯器，試試 Draft.js 吧。
使用 npm 或 yarn 安裝：
npm install draft-js
yarn add draft-js 2. Slate.js — 支援複雜内容格式的免費編輯器
Slate.js 是另一款超好用的 react 富文本編輯器，可用于建構優雅、功能強悍的編輯器如 Medium Editor、Google Docs 等。
- 可使用插件進行擴充。
- 輸出 JSON 格式的内容，更容易與其他子產品內建。
- 嵌套文檔模型支援更複雜的内容結構，如表格、分頁符和其他自定義功能。
- 操作編輯器控件需要 UI 設定。
- 仍處于 beta 階段，在生産環境下站點的實踐和信賴上可能會令人失望。
如果你希望找到帶有自定義功能的記憶體優化的編輯器，Slate.js 是最佳的選擇。
使用 yarn 或 npm 安裝：
yarn add slate slate-react
npm install slate slate-react 3. Quill.js — 帶有主題的免費 API 的文本編輯器
Quill.js 是一個快速、輕量級的富文本編輯器。它支援跨平台和跨浏覽器，其主題可擴充、可配置，是你在諸多平台的現代浏覽器上能找到功能流暢的最佳選擇。
- 易于設定和使用。
- 跨平台和浏覽器支援。
- 預設編輯器樣式的主題支援。
- 輸出 HTML 格式的内容，無需像其他編輯器一樣解析。
- 有限的定制功能。
- 較少的更新和更新檔。
- 可能的 XSS 安全漏洞。
使用 yarn 或 npm 安裝:
npm install react-quill
yarn add react-quill 4. TinyMCE — 功能豐富的商業性編輯器
TinyMCE 是一款非常強大的 WYSIWYG 富文本編輯器，具有高度的可定制、可擴充性。如果你預算充足同時希望找到一款沒有後顧之憂的編輯器，那麼就是它了。
- 自動連結檢查器。
- 支援實時協作。
- 支援提及和評論。
- 支援增強的媒體嵌入。
- 支援進階表格和複雜的内容格式。
- 需要付費訂閱才能使用其進階功能。
做決定前你可以先試用免費版本， TinyMCE 提供了詳盡的技術文檔，從如何安裝到功能介紹，寫的非常清晰。
5. KendoReact — 可直接用于商業性産品的編輯器
KendoReact 是專業的 UI 元件和資料可視化庫，旨在幫助你使用 React 更快地設計和建構業務應用程式。
- 閃電般的性能。
- 高度的可定制。
- 可直接用于開發應用程式。
- 價格偏貴。
與免費的富文本編輯器相比，Kendo 有許多非常棒的功能。如果你對文本編輯器有極具競争力的業務性需求，同時也在尋找一個日後也沒有麻煩的編輯器， 那麼就是 KendoReact 了。
6. TipTap — 樣式很有調調的免費編輯器（多送一款編輯器測評）
TipTap 是一個沒有提供使用者界面的富文本編輯器。它允許你完全地自定義建構任何想要的界面，同時也支援實時的協作。
- 可定制的 UI。
- 支援鍵盤快捷鍵。
- 支援移動端。
- 協同編輯。
- 依舊處于測試階段。
如果你在尋找功能豐富、外觀現代的免費編輯器，試試 TipTap 吧：
## install with npm
npm install @tiptap/core @tiptap/starter-kit
## install with Yarn
yarn add @tiptap/core @tiptap/starter-kit 總結
本文比較了 6 種 React 富文本編輯器的優缺點，我們可以根據自己工作中的實際場景來對編輯器進行挑選。
如果你想搭建自己的背景工具，但你對前端并沒有那麼熟悉，可以考慮使用卡拉雲，卡拉雲内置了富文本編輯器，完全不用你操心前端，隻需要簡單拖拽即可立即在頁面上生成富文本編輯器。
卡拉雲是新一代低代碼開發工具，免安裝部署，可一鍵接入包括 MySQL 在内的常見資料庫及 API。可根據自己的工作流，定制開發。無需繁瑣的前端開發，隻需要簡單拖拽，即可快速搭建企業内部工具。數月的開發工作量，使用卡拉雲後可縮減至數天，
歡迎免費試用卡拉雲。
卡拉雲可根據公司工作流需求，輕松搭建資料看闆或其他内部工具，并且可一鍵分享給組内的小夥伴。
更多資料庫相關教程可通路
卡拉雲檢視。
擴充閱讀：
- MySQL 時間戳用什麼類型 - MySQL 時間函數詳解
- 最好用的七大頂級 API 接口測試工具
- 最好用的 5 款 React 富文本編輯器
- 如何在 MySQL / MariaDB 中跳過多張表導出或指定多張表導出備份
- 如何将 MySQL / MariaDB 的查詢結果儲存到檔案
- 如何在 MySQL 中導入和導出 CSV / Excel 檔案
如果覺得本文對你有幫助，還請點個贊。歡迎評論區一起讨論。