2021 年 React 的 5 大富文本編輯器
今天，富文本編輯器被用于許多應(yīng)用中，包括簡(jiǎn)單的博客和復(fù)雜的內(nèi)容管理系統(tǒng)。然而，選擇一個(gè)并不容易，因?yàn)橛泻芏嗑哂胁煌δ艿木庉嬈鳌?/p>
因此，在這篇文章中，我將評(píng)估5個(gè)React的富文本編輯器的功能，以幫助你選擇最適合你的要求。
一. Draft.js
這是一款最受歡迎的，能夠滿足基本需求的免費(fèi)編輯器。
Draft.js是Facebook的一個(gè)開(kāi)源項(xiàng)目，為React構(gòu)建。這是一個(gè)強(qiáng)大的、可擴(kuò)展的、可定制的框架，它在React開(kāi)發(fā)者中非常受歡迎。
根據(jù)Facebook的說(shuō)法，這個(gè)庫(kù)被用于Facebook的狀態(tài)、評(píng)論和messenger.com。
優(yōu)點(diǎn)：
扁平化內(nèi)容模型很容易理解。 高度可擴(kuò)展和可定制的插件構(gòu)建在 Draft.js 之上。 自 2016 年以來(lái)，由于 Facebook 支持的龐大且不斷增長(zhǎng)的開(kāi)源開(kāi)發(fā)者社區(qū)，提供了許多教程和支持。
缺點(diǎn)：
當(dāng)需要像表格這樣的復(fù)雜內(nèi)容結(jié)構(gòu)時(shí)，編輯器會(huì)變慢，代碼也會(huì)變得復(fù)雜。 沒(méi)有官方的移動(dòng)支持。 OSX 自定義鍵綁定問(wèn)題。
Draft.js 擁有超過(guò) 20,000 個(gè) GitHub star 和大約 620,000 次每周 NPM 下載。
如果你是一個(gè)初學(xué)者，并希望實(shí)現(xiàn)一個(gè)滿足基本需求的文本編輯器，我為你推薦Draft.js，你可以使用npm或yarn輕松安裝它。
npm install draft-js
yarn add draft-js
二. Slate.js
這是一款支持復(fù)雜內(nèi)容的免費(fèi)編輯器。
Slate.js是另一個(gè)令人興奮的React富文本編輯器，靈感來(lái)自Draft.js。你可以用它來(lái)構(gòu)建像Medium Editor、Dropbox Paper或Google Docs那樣的漂亮編輯器。
雖然Slate.js仍處于測(cè)試階段，但它在GitHub上有超過(guò)20K顆星。
優(yōu)點(diǎn)：
產(chǎn)生JSON輸出，使其更容易與其他模塊集成。 它的嵌套文檔模型支持更復(fù)雜的內(nèi)容結(jié)構(gòu)，如表格、分頁(yè)符和其他自定義功能。 可通過(guò)使用插件進(jìn)行擴(kuò)展。 有很好的描述性文檔和互動(dòng)演示。 受到Salesforce和Airtable的信任。
缺點(diǎn)：
仍處于測(cè)試階段（截至2021年5月），這對(duì)于信任和在生產(chǎn)網(wǎng)站上實(shí)施可能是個(gè)壞消息。
需要更多的初始UI設(shè)置以適應(yīng)編輯器控制。
即便如此，如果你想實(shí)現(xiàn)一個(gè)具有自定義功能的內(nèi)存優(yōu)化的富文本編輯器，Slate.js是你最好的選擇之一，它可以使用yarn或npm輕松安裝。
yarn add slate slate-react
npm install slate slate-react
三. Quill.js
這是一款帶有主題的免費(fèi)API驅(qū)動(dòng)的編輯器。
排名第三的是Quill.js，富文本編輯器具有跨平臺(tái)和跨瀏覽器支持。因此，這是你在臺(tái)式機(jī)、平板電腦和手機(jī)的所有現(xiàn)代瀏覽器上尋找流暢功能的最佳選擇。
Quill.js在GitHub上有29.9萬(wàn)個(gè)星星，在NPM上每周有超過(guò)57萬(wàn)次下載。
優(yōu)點(diǎn)：
由于其API驅(qū)動(dòng)的設(shè)計(jì)，不需要像其他文本編輯器那樣解析HTML或不同的DOM樹(shù)。 支持自定義內(nèi)容和格式，有預(yù)設(shè)的編輯器樣式。 跨平臺(tái)和瀏覽器支持。 易于設(shè)置,容易配置。
缺點(diǎn)：
可能存在XSS安全漏洞。 功能的定制是有限的。 較少的更新和補(bǔ)丁。
你可以使用NPM安裝Quill.js或者使用CDN版本。
npm install [email protected]
<!-- or use the bellow CDN -->
<!-- Main Quill library -->
<script src="http://cdn.quilljs.com/1.3.6/quill.js"></script>
<script src="http://cdn.quilljs.com/1.3.6/quill.min.js"></script>
<!-- Theme included stylesheets -->
<link href="http://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
<link href="http://cdn.quilljs.com/1.3.6/quill.bubble.css" rel="stylesheet">
<!-- Core build with no theme, formatting, non-essential modules --> <link href="http://cdn.quilljs.com/1.3.6/quill.core.css" rel="stylesheet">
<script src="http://cdn.quilljs.com/1.3.6/quill.core.js"></script>
四. TinyMCE
這是一款商業(yè)功能的富文本編輯器。
這個(gè)編輯器是一個(gè)商業(yè)庫(kù)。如果你有一些額外的錢(qián)，并希望擁有一個(gè)不令人頭痛的強(qiáng)大的文本編輯器，TinyMCE是一個(gè)不錯(cuò)的選擇。
優(yōu)點(diǎn)：
支持實(shí)時(shí)協(xié)作。 支持提及和評(píng)論。 先進(jìn)的表格和復(fù)雜內(nèi)容支持。 增強(qiáng)的媒體嵌入支持。 自動(dòng)鏈接檢查器。
缺點(diǎn)：
需要購(gòu)買(mǎi)訂閱才能使用高級(jí)功能。
TinyMCE為你提供了核心（免費(fèi)計(jì)劃，功能有限）、基本（每月25美元）、專業(yè)（每月75美元）和靈活（自定義定價(jià)）等定價(jià)計(jì)劃。
在做出決定之前，您可以隨時(shí)嘗試免費(fèi)版本或試用版。TinyMCE 提供了很好的文檔，包括有關(guān)其功能和安裝的所有詳細(xì)信息。
文檔：https://www.tiny.cloud/docs/
五. KendoReact
這是一個(gè)商業(yè)生產(chǎn)就緒的編輯器。
Kendo可能是市場(chǎng)上最著名的商業(yè)UI組件庫(kù)。
它是一個(gè)高度穩(wěn)定的、可用于生產(chǎn)的庫(kù)，無(wú)疑具有最好的客戶支持服務(wù)。
優(yōu)點(diǎn)：
閃電般的性能。 高度的可定制性。 可用于生產(chǎn)應(yīng)用。 全球化支持。
缺點(diǎn)：
需要購(gòu)買(mǎi)，極其昂貴。
與免費(fèi)編輯器相比，Kendo有一些奇妙的功能。如果你對(duì)文本編輯器有高度競(jìng)爭(zhēng)性的業(yè)務(wù)需求，并且正在尋找一個(gè)無(wú)憂無(wú)慮的未來(lái)解決方案，那么這個(gè)編輯器是為你準(zhǔn)備的。
Kendo有3種不同的計(jì)劃：KendoReact. KendoUI和DevCraft，每個(gè)開(kāi)發(fā)者的永久許可證從899美元到1499美元不等。
與DevCraft相比，前兩個(gè)套餐有一些限制，你可以在他們的網(wǎng)站上找到完整的比較。
六. TipTap
這是一款免費(fèi)的現(xiàn)代文本編輯器。
這是一款非常推薦的編輯器。盡管這個(gè)編輯器還在測(cè)試階段，但有許多令人興奮的功能。
TipTap是一個(gè)無(wú)頭編輯器，它允許你完全自定義。這個(gè)編輯器也支持實(shí)時(shí)協(xié)作。
優(yōu)點(diǎn)：
UI 可定制性。 鍵盤(pán)快捷鍵。 移動(dòng)支持。 協(xié)同編輯。
缺點(diǎn)：
仍處于測(cè)試版（但穩(wěn)定并由快速增長(zhǎng)的開(kāi)發(fā)人員社區(qū)支持）。
盡管相當(dāng)新，TipTap 擁有超過(guò) 1 萬(wàn)個(gè) GitHub 星和每周 93,000 多次 NPM 下載。
如果你正在尋找一個(gè)免費(fèi)的、功能豐富的、來(lái)自React的現(xiàn)代文本編輯器？在這種情況下，我強(qiáng)烈推薦TipTap供你試用。
# 使用 npm
安裝 npm install @tiptap/core @tiptap/starter-kit
# 使用 Yarn 安裝
yarn add @tiptap/core @tiptap/starter-kit
總結(jié)
以上的富文本編輯器只是眾多React可用編輯器的一個(gè)子集。介紹了6個(gè)不同的編輯器，它們的優(yōu)點(diǎn)和缺點(diǎn)，以挑選出適合你的理想編輯器。
我希望我的建議能幫助你為你的項(xiàng)目選擇最好的富文本編輯器。
謝謝您的閱讀！! !
2021-07-15
2021-07-14
