初探富文本之編輯器引擎

在前文中我們介紹了富文本的基礎(chǔ)概念，以及富文本的基本發(fā)展歷程，那么在本文中將會(huì)介紹當(dāng)前主流開(kāi)源的富文本編輯器引擎。當(dāng)前使用最廣泛的富文本編輯器是L1的富文本編輯器，其能滿足絕大部份使用場(chǎng)景，由此也誕生了非常多優(yōu)秀的開(kāi)源富文本引擎，這其中有僅提供引擎的編輯器例如Slate.js，也有提供了部分開(kāi)箱即用的功能的例如Quill.js，也有基于這些引擎二次開(kāi)發(fā)的例如Plate.js，本文主要介紹了Slate.js、Quill.js、Draft.js三款編輯器引擎。

Slate.js

slate是一個(gè)僅僅提供引擎的富文本core，簡(jiǎn)單來(lái)說(shuō)他本身并不提供各種富文本編輯功能，所有的富文本功能都需要自己來(lái)通過(guò)其提供的API來(lái)實(shí)現(xiàn)，甚至他的插件機(jī)制也需要通過(guò)自己來(lái)拓展，所以使用slate來(lái)構(gòu)建富文本編輯器的話可定制度相當(dāng)高。slate的文檔雖然不是特別詳細(xì)，但是他的示例是非常豐富的，在文檔中也提供了一個(gè)演練作為上手的基礎(chǔ)，對(duì)于新手還是比較友好的。話說(shuō)回來(lái)如果只提供一個(gè)引擎的話，誰(shuí)也不知道應(yīng)該怎么用哈哈。

在slate的文檔中有對(duì)于框架的設(shè)計(jì)原則上的描述：

• 插件是一等公民，slate最重要的部分就是插件是一等公民實(shí)體，這意味著你可以完全定制編輯體驗(yàn)，去建立像Medium或是Dropbox這樣復(fù)雜的編輯器，而不必對(duì)庫(kù)的預(yù)設(shè)作斗爭(zhēng)。
• 精簡(jiǎn)的schema核心，slate的核心邏輯對(duì)你編輯的數(shù)據(jù)結(jié)構(gòu)進(jìn)行的預(yù)設(shè)非常少，這意味著當(dāng)你構(gòu)建復(fù)雜用例時(shí)，不會(huì)被任何的預(yù)制內(nèi)容所阻礙。
• 嵌套文檔模型，slate文檔所使用的模型是一個(gè)嵌套的，遞歸的樹(shù)，就像DOM一樣，這意味著對(duì)于高級(jí)用例來(lái)說(shuō)，構(gòu)建像表格或是嵌套引用這樣復(fù)雜的組件是可能的，當(dāng)然你也可以使用單一層次的結(jié)構(gòu)來(lái)保持簡(jiǎn)單性。
• 與DOM相同，slate的數(shù)據(jù)模型基于DOM，文檔是一個(gè)嵌套的樹(shù)，其使用文本選區(qū)selections和范圍ranges，并且公開(kāi)所有的標(biāo)準(zhǔn)事件處理函數(shù)，這意味著像是表格或者是嵌套引用這樣的高級(jí)特性是可能的，幾乎所有你在DOM中可以做到的事情，都可以在slate中做到。
• 直觀的指令，slate文檔執(zhí)行命令commands來(lái)進(jìn)行編輯，它被設(shè)計(jì)為高級(jí)并且非常直觀地進(jìn)行編輯和閱讀，以便定制功能盡可能地具有表現(xiàn)力，這大大的提高了你理解代碼的能力。
• 可協(xié)作的數(shù)據(jù)模型，slate使用的數(shù)據(jù)模型特別是操作如何應(yīng)用到文檔上，被設(shè)計(jì)為允許協(xié)同編輯在最頂層，所以如果你決定要實(shí)現(xiàn)協(xié)同編輯，不必去考慮徹底重構(gòu)。
• 明確的核心劃分，使用插件優(yōu)先的結(jié)構(gòu)和精簡(jiǎn)核心，使得核心和定制的邊界非常清晰，這意味著核心的編輯體驗(yàn)不會(huì)被各種邊緣情況所困擾。

示例

這樣一段文本的數(shù)據(jù)結(jié)構(gòu)如下所示。

[{children: [{ text: "這樣" },{ text: "一段文本", italic: true },{ text: "的" },{ text: "數(shù)據(jù)結(jié)構(gòu)", bold: true },{ text: "如下所示。" },],}, ];

優(yōu)勢(shì)

• 可定制化程度非常高，幾乎所有富文本表現(xiàn)層的功能都需要自行實(shí)現(xiàn)。
• 非常輕量，本體只有一個(gè)內(nèi)核，需要什么就做什么功能，體積可控。
• 在設(shè)計(jì)架構(gòu)時(shí)就針對(duì)協(xié)同提供了OP化的差量變更操作。
• 數(shù)據(jù)結(jié)構(gòu)是類似于DOM的嵌套JSON結(jié)構(gòu)，比較直觀容易理解。

不足

• 依舊處于Beta階段，可能會(huì)有重大API變化，例如0.50版本就是全新重構(gòu)的。
• 雖然有協(xié)同的設(shè)計(jì)，但沒(méi)有轉(zhuǎn)換操作的OT算法或CRDT算法的直接支持。
• 僅有內(nèi)核的架構(gòu)同樣也是不足，所有的功能都需要自行實(shí)現(xiàn)，成本比較高。
• 新版slate是無(wú)schema的，這也就意味著Normalize需要自行實(shí)現(xiàn)。

參考

• slate官方文檔https://docs.slatejs.org/。
• slate官方示例https://www.slatejs.org/examples/richtext。
• 個(gè)人基于slate實(shí)現(xiàn)的富文本編輯器https://github.com/WindrunnerMax/DocEditor。
• 基于slate的開(kāi)箱即用富文本編輯器https://plate.udecode.io/docs/playground。
• slate的OT協(xié)同實(shí)現(xiàn)參考https://github.com/solidoc/slate-ot。
• slate協(xié)同的OTTypes參考https://github.com/pubuzhixing8/ottype-slate。
• slate的CRDT協(xié)同實(shí)現(xiàn)參考https://github.com/humandx/slate-automerge。
• slate與YJS協(xié)同結(jié)合的參考https://github.com/BitPhinix/slate-yjs。
• 關(guān)于slate非常不錯(cuò)的文章https://github.com/yoyoyohamapi/book-slate-editor-design。

Quill.js

quill是一個(gè)現(xiàn)代富文本編輯器，具備良好的兼容性及強(qiáng)大的可擴(kuò)展性，還提供了部分開(kāi)箱即用的功能。quill是在2012年開(kāi)源的，quill的出現(xiàn)給富文本編輯器帶了很多新的東西，也是目前開(kāi)源編輯器里面受眾非常大的一款編輯器，至今為止的生態(tài)已經(jīng)非常的豐富，可以在Github等找到大量的示例，包括比較完善的協(xié)同實(shí)例。

在quill的文檔中有對(duì)于框架的設(shè)計(jì)原則上的描述：

• API驅(qū)動(dòng)設(shè)計(jì)，quill所有的功能都是通過(guò)API來(lái)實(shí)現(xiàn)的并且可以直觀的通過(guò)API來(lái)獲得數(shù)據(jù)的變化，以文本為中心的基礎(chǔ)上構(gòu)建的API，不需要解析HTML或者DIFF DOM樹(shù)，這樣的設(shè)計(jì)可以讓quill的功能更加的靈活與更高的可拓展性。
• 自定義內(nèi)容和格式，quill公開(kāi)了自己的文檔模型，這是對(duì)DOM的強(qiáng)大抽象，允許擴(kuò)展和定制，由此數(shù)據(jù)結(jié)構(gòu)的主角變成了Blots、Parchment、Delta。
• 跨平臺(tái)，quill有著比較良好的兼容性，在舊版本的瀏覽器中也可以相同的方式運(yùn)行，在用戶體驗(yàn)上不同瀏覽器中也可以有著相同的視圖與交互效果，并且可以在桌面和移動(dòng)設(shè)備上使用。
• 易于使用，quill攜帶了部分開(kāi)箱即用的功能，如果不需要定制的話，這些功能已經(jīng)足夠了，同時(shí)quill又有著非常高的可拓展性，用來(lái)自定義各種功能。

示例

這樣一段文本的數(shù)據(jù)結(jié)構(gòu)如下所示。

{ops: [{ insert: "這樣" },{ insert: "一段文本", attributes: { italic: true } },{ insert: "的" },{ insert: "數(shù)據(jù)結(jié)構(gòu)", attributes: { bold: true } },{ insert: "如下所示。\\n" },], };

優(yōu)勢(shì)

• API驅(qū)動(dòng)設(shè)計(jì)，基礎(chǔ)功能的支持很豐富，并且支持拓展。
• 實(shí)現(xiàn)了視圖層，實(shí)現(xiàn)上與框架無(wú)關(guān)，無(wú)論是Vue還是React都可以輕松使用。
• 使用了更加直觀的Delta來(lái)描述數(shù)據(jù)結(jié)構(gòu)，本身實(shí)現(xiàn)了操作轉(zhuǎn)換的邏輯，可以非常方便地實(shí)現(xiàn)協(xié)同。
• 生態(tài)非常豐富，有著非常多的插件與設(shè)計(jì)方案可以參考，特別是對(duì)于協(xié)同的支持可參考的地方非常多。

不足

• Delta數(shù)據(jù)結(jié)構(gòu)是扁平的，也就是一維的數(shù)據(jù)結(jié)構(gòu)，這樣在實(shí)現(xiàn)例如表格的功能時(shí)就比較麻煩。
• quill 2.0已經(jīng)開(kāi)發(fā)了很久了，但是還沒(méi)有正式發(fā)布，目前的1.3.7版本已經(jīng)有很多年沒(méi)有更新了。
• quill自帶的功能很豐富，但這也就意味著其包的大小會(huì)比較大一些。

參考

• quill官方文檔https://quilljs.com/docs/quickstart/。
• quill官方示例https://quilljs.com/standalone/full/。
• quill的Delta設(shè)計(jì)與實(shí)現(xiàn)https://quilljs.com/docs/delta/。
• quill協(xié)同的OTTypes參考https://github.com/ottypes/rich-text。
• quill的OT協(xié)同實(shí)現(xiàn)參考https://github.com/share/sharedb/tree/master/examples/rich-text。
• quill的CRDT-yjs的協(xié)同實(shí)現(xiàn)參考https://github.com/yjs/y-quill。

Draft.js

draft是用于在React中構(gòu)建富文本編輯器的框架，其為創(chuàng)建和自定義文本編輯器提供了強(qiáng)大的API，并且旨在易于擴(kuò)展和與其他庫(kù)集成，與React結(jié)合可以使開(kāi)發(fā)者在進(jìn)行編輯器開(kāi)發(fā)時(shí)既不用操作DOM、也不用單獨(dú)學(xué)習(xí)一套構(gòu)建UI的范式，而是可以直接編寫React組件實(shí)現(xiàn)編輯器的UI。draft整體理念與React非常的吻合，例如使用狀態(tài)管理保存數(shù)據(jù)結(jié)構(gòu)、使用immutable.js庫(kù)、數(shù)據(jù)結(jié)構(gòu)的修改基本全部代理了瀏覽器的默認(rèn)行為、通過(guò)狀態(tài)管理的方式修改富文本數(shù)據(jù)等。

在draft的README中有對(duì)于框架的設(shè)計(jì)原則上的描述：

• 可擴(kuò)展和可定制，提供了構(gòu)建塊來(lái)創(chuàng)建各種豐富的文本組合體驗(yàn)，從基本文本樣式到嵌入式媒體的支持。
• 聲明式富文本，draft無(wú)縫融入React，使用React用戶熟悉的聲明式的API抽象出渲染、選擇和輸入行為的細(xì)節(jié)。
• 不可變的編輯器狀態(tài)，draft模型是使用immutable.js構(gòu)建的，提供具有功能狀態(tài)更新的API，并積極利用數(shù)據(jù)持久性來(lái)實(shí)現(xiàn)可擴(kuò)展的內(nèi)存使用。

示例

這樣一段文本的數(shù)據(jù)結(jié)構(gòu)如下所示。

{blocks: [{key: "3eesq",text: "這樣一段文本的數(shù)據(jù)結(jié)構(gòu)如下所示。",type: "unstyled",depth: 0,inlineStyleRanges: [{ offset: 2, length: 4, style: "ITALIC" },{ offset: 7, length: 4, style: "BOLD" },],entityRanges: [],data: {},},],entityMap: {}, };

優(yōu)勢(shì)

• 具有靈活的API，可以輕松地?cái)U(kuò)展和自定義塊和內(nèi)聯(lián)元素等。
• 使用React作為UI層以及數(shù)據(jù)管理，可以充分利用React生態(tài)，對(duì)React用戶友好。
• 沒(méi)有過(guò)重大的Breaking Change，在穩(wěn)定性與細(xì)節(jié)的處理上比較具有優(yōu)勢(shì)。

不足

• 完全依賴于React作為UI層，與React深度綁定，在其他UI框架上很難使用。
• 數(shù)據(jù)結(jié)構(gòu)模型的設(shè)計(jì)上不是很靈活，在實(shí)現(xiàn)表格等嵌套結(jié)構(gòu)時(shí)比較受限。
• draft針對(duì)性能進(jìn)行了大量?jī)?yōu)化，但是在呈現(xiàn)大量?jī)?nèi)容時(shí)還是會(huì)感受到卡頓。

參考

• draft官方文檔https://draftjs.org/docs/overview。
• draft官方示例https://draftjs.org/。
• draft的codesandbox示例https://codesandbox.io/s/github/gupta-piyush19/Draft-JS-Editor。

每日一題

https://github.com/WindrunnerMax/EveryDay

參考

https://github.com/hzjswlgbsj/blog https://zhuanlan.zhihu.com/p/425265438 https://jkrsp.com/slate-js-vs-draft-js/ https://www.zhihu.com/question/404836496 https://www.zhihu.com/question/449541344 https://juejin.cn/post/6844903838982340622 https://juejin.cn/post/7034480408888770567 https://juejin.cn/post/6974609015602937870 https://github.com/cudr/slate-collaborative https://blog.logrocket.com/what-is-slate-js-replace-quill-draft-js/ https://dev.to/charrondev/getting-to-know-quilljs---part-1-parchment-blots-and-lifecycle--3e76

總結(jié)

以上是生活随笔為你收集整理的初探富文本之编辑器引擎的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。