2021 年 React 的 5 大富文本編輯器

5 大富文本編輯器

今天，富文本編輯器被用於許多應用中，包括簡單的博客和複雜的內容管理系統。然而，選擇一個並不容易，因爲有很多具有不同功能的編輯器。

因此，在這篇文章中，我將評估 5 個 React 的富文本編輯器的功能，以幫助你選擇最適合你的要求。

一. Draft.js

Draft

這是一款最受歡迎的，能夠滿足基本需求的免費編輯器。

Draft.js 是 Facebook 的一個開源項目，爲 React 構建。這是一個強大的、可擴展的、可定製的框架，它在 React 開發者中非常受歡迎。

根據 Facebook 的說法，這個庫被用於 Facebook 的狀態、評論和 messenger.com。

優點：

• 扁平化內容模型很容易理解。

• 高度可擴展和可定製的插件構建在 Draft.js 之上。

• 自 2016 年以來，由於 Facebook 支持的龐大且不斷增長的開源開發者社區，提供了許多教程和支持。

缺點：

• 當需要像表格這樣的複雜內容結構時，編輯器會變慢，代碼也會變得複雜。

• 沒有官方的移動支持。

• OSX 自定義鍵綁定問題。

Draft.js 擁有超過 20,000 個 GitHub star 和大約 620,000 次每週 NPM 下載。

如果你是一個初學者，並希望實現一個滿足基本需求的文本編輯器，我爲你推薦 Draft.js，你可以使用 npm 或 yarn 輕鬆安裝它。

npm install draft-js 
yarn add draft-js

二. Slate.js

這是一款支持複雜內容的免費編輯器。

Slate.js

Slate.js 是另一個令人興奮的 React 富文本編輯器，靈感來自 Draft.js。你可以用它來構建像 Medium Editor、Dropbox Paper 或 Google Docs 那樣的漂亮編輯器。

雖然 Slate.js 仍處於測試階段，但它在 GitHub 上有超過 20K 顆星。

優點：

• 產生 JSON 輸出，使其更容易與其他模塊集成。

• 它的嵌套文檔模型支持更復雜的內容結構，如表格、分頁符和其他自定義功能。

• 可通過使用插件進行擴展。

• 有很好的描述性文檔和互動演示。

• 受到 Salesforce 和 Airtable 的信任。

缺點：

• 仍處於測試階段（截至 2021 年 5 月），這對於信任和在生產網站上實施可能是個壞消息。

• 需要更多的初始 UI 設置以適應編輯器控制。

即便如此，如果你想實現一個具有自定義功能的內存優化的富文本編輯器，Slate.js 是你最好的選擇之一，它可以使用 yarn 或 npm 輕鬆安裝。

yarn add slate slate-react
npm install slate slate-react

三. Quill.js

這是一款帶有主題的免費 API 驅動的編輯器。

Quill.js

排名第三的是 Quill.js，富文本編輯器具有跨平臺和跨瀏覽器支持。因此，這是你在臺式機、平板電腦和手機的所有現代瀏覽器上尋找流暢功能的最佳選擇。

Quill.js 在 GitHub 上有 29.9 萬個星星，在 NPM 上每週有超過 57 萬次下載。

優點：

• 由於其 API 驅動的設計，不需要像其他文本編輯器那樣解析 HTML 或不同的 DOM 樹。

• 支持自定義內容和格式，有預設的編輯器樣式。

• 跨平臺和瀏覽器支持。

• 易於設置, 容易配置。

缺點：

• 可能存在 XSS 安全漏洞。

• 功能的定製是有限的。

• 較少的更新和補丁。

你可以使用 NPM 安裝 Quill.js 或者使用 CDN 版本。

npm install quill@1.3.6
<!-- or use the bellow CDN -->
<!-- Main Quill library --> 
<script src="//cdn.quilljs.com/1.3.6/quill.js"></script> 
<script src="//cdn.quilljs.com/1.3.6/quill.min.js"></script>  
<!-- Theme included stylesheets --> 
<link href="//cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet"> 
<link href="//cdn.quilljs.com/1.3.6/quill.bubble.css" rel="stylesheet">  
<!-- Core build with no theme, formatting, non-essential modules --> <link href="//cdn.quilljs.com/1.3.6/quill.core.css" rel="stylesheet"> 
<script src="//cdn.quilljs.com/1.3.6/quill.core.js"></script>

四. TinyMCE

這是一款商業功能的富文本編輯器。

TinyMCE

這個編輯器是一個商業庫。如果你有一些額外的錢，並希望擁有一個不令人頭痛的強大的文本編輯器，TinyMCE 是一個不錯的選擇。

優點：

• 支持實時協作。

• 支持提及和評論。

• 先進的表格和複雜內容支持。

• 增強的媒體嵌入支持。

• 自動鏈接檢查器。

缺點：

• 需要購買訂閱才能使用高級功能。

TinyMCE 爲你提供了核心（免費計劃，功能有限）、基本（每月 25 美元）、專業（每月 75 美元）和靈活（自定義定價）等定價計劃。

在做出決定之前，您可以隨時嘗試免費版本或試用版。TinyMCE 提供了很好的文檔，包括有關其功能和安裝的所有詳細信息。

文檔：https://www.tiny.cloud/docs/

五. KendoReact

這是一個商業生產就緒的編輯器。

KendoReact

Kendo 可能是市場上最著名的商業 UI 組件庫。

它是一個高度穩定的、可用於生產的庫，無疑具有最好的客戶支持服務。

優點：

• 閃電般的性能。

• 高度的可定製性。

• 可用於生產應用。

• 全球化支持。

缺點：

• 需要購買，極其昂貴。

與免費編輯器相比，Kendo 有一些奇妙的功能。如果你對文本編輯器有高度競爭性的業務需求，並且正在尋找一個無憂無慮的未來解決方案，那麼這個編輯器是爲你準備的。

Kendo 有 3 種不同的計劃：KendoReact.  KendoUI 和 DevCraft，每個開發者的永久許可證從 899 美元到 1499 美元不等。

與 DevCraft 相比，前兩個套餐有一些限制，你可以在他們的網站上找到完整的比較。

六. TipTap

這是一款免費的現代文本編輯器。

TipTap

這是一款非常推薦的編輯器。儘管這個編輯器還在測試階段，但有許多令人興奮的功能。

TipTap 是一個無頭編輯器，它允許你完全自定義。這個編輯器也支持實時協作。

優點：

• UI 可定製性。

• 鍵盤快捷鍵。

• 移動支持。

• 協同編輯。

缺點：

• 仍處於測試版（但穩定並由快速增長的開發人員社區支持）。

儘管相當新，TipTap 擁有超過 1 萬個 GitHub 星和每週 93,000 多次 NPM 下載。

如果你正在尋找一個免費的、功能豐富的、來自 React 的現代文本編輯器？在這種情況下，我強烈推薦 TipTap 供你試用。

# 使用 npm
安裝 npm install @tiptap/core @tiptap/starter-kit
# 使用 Yarn 安裝
yarn add @tiptap/core @tiptap/starter-kit

總結

以上的富文本編輯器只是衆多 React 可用編輯器的一個子集。介紹了 6 個不同的編輯器，它們的優點和缺點，以挑選出適合你的理想編輯器。

我希望我的建議能幫助你爲你的項目選擇最好的富文本編輯器。

謝謝您的閱讀！!  !

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