富文本編輯器市面上已經(jīng)有很多優(yōu)秀的開(kāi)源版本了，但是問(wèn)題在于每個(gè)產(chǎn)品的富文本編輯器需求不一樣，所以可能導(dǎo)致有一些時(shí)候需要手?jǐn)]編輯器

 

　　例如:

 

　　Draft.js

 

　　Slate.js

 

　　wangEditor

 

　　這些富文本編輯器還有衍生出他們的針對(duì)不同框架的版本，例如React，還有一些插件。感興趣的可以去github搜索給個(gè)star,方便以后用得上

 

　　作者當(dāng)時(shí)手寫(xiě)過(guò)桌面軟件的富文本編輯器（Electron,類似微信的聊天編輯器），痛苦得很，要控制光標(biāo)、焦點(diǎn)，復(fù)制粘貼，適配多個(gè)操作系統(tǒng)環(huán)境的QQ、微信、wps等軟件的復(fù)制粘貼等。感覺(jué)都能寫(xiě)好多篇論文了。
 

 

 

　　推薦一個(gè)github star數(shù)量11.6K的開(kāi)源庫(kù),luckysheet

 

　　demo體驗(yàn)地址：https://mengshukeji.github.io/LuckysheetDemo/

 

　　支持：

 

　　1.格式設(shè)置。包括字體、字號(hào)、顏色、文本對(duì)齊、自動(dòng)換行以及excel支持的各種數(shù)據(jù)類型

 

　　2.單元格。拖拽選取、下拉填充、自動(dòng)填充、查找替換、合并單元格等。

 

　　3.行列。隱藏、插入、刪除、凍結(jié)。

 

　　4.操作。撤銷、復(fù)制、粘貼、剪切、快捷鍵、格式刷、篩選排序、批注、共享編輯。

 

　　5.函數(shù)。內(nèi)置常見(jiàn)公式，并支持自定義公式。

 

　　6.圖表。目前支持折線圖、柱狀圖、面積圖、條形圖、餅圖，支持插入圖片。
 

 

 

　　科普：

 

　　在分布式計(jì)算中，無(wú)沖突復(fù)制數(shù)據(jù)類型（英語(yǔ)：CRDT）是一種可以在網(wǎng)絡(luò)中的多臺(tái)計(jì)算機(jī)上復(fù)制的數(shù)據(jù)結(jié)構(gòu)，副本可以獨(dú)立和并發(fā)地更新，而不需要在副本之間進(jìn)行協(xié)調(diào)，并且在數(shù)學(xué)上總是可以解決可能出現(xiàn)的不一致問(wèn)題。[1][2][3][4][5][6][7][8]

 

　　CRDT的概念是由Marc Shapiro、Nuno Pregui?a、Carlos Baquero和Marek Zawirski于2011年正式定義。[9] 開(kāi)發(fā)的最初動(dòng)機(jī)是協(xié)作式文本編輯（英語(yǔ)：Collaborative real-time editor）和移動(dòng)計(jì)算。CRDTs也被用于在線聊天系統(tǒng)、在線賭博和SoundCloud音頻分發(fā)平臺(tái)中。NoSQL分布式數(shù)據(jù)庫(kù)Redis、Riak和Cosmos DB有CRDT數(shù)據(jù)類型。

 

　　推薦一個(gè)8K star的前端 CRDT 實(shí)時(shí)協(xié)作庫(kù) Yjs：https://github.com/yjs/yjs

 

　　Yjs 主要的內(nèi)部特點(diǎn)：

 

　　基于雙向鏈表和 StructStore 的基礎(chǔ)數(shù)據(jù)結(jié)構(gòu)

 

　　基于 YATA 算法的并發(fā)沖突解決機(jī)制

 

　　基于 DeleteSet 和 Transaction 機(jī)制的撤銷重做

 

　　基于兩階段劃分的同步機(jī)制

 

　　它支持：

 

　　建模數(shù)據(jù)結(jié)構(gòu)

 

　　解決并發(fā)沖突

 

　　回溯歷史記錄

 

　　同步網(wǎng)絡(luò)狀態(tài)等

 

　　使用示例

 

　　import * as Y from 'yjs'

 

　　// 應(yīng)用中的全部協(xié)作狀態(tài)均可在單個(gè) YDoc 容器中承載

 

　　// 將該實(shí)例傳入 WebSocket 等協(xié)議的 provider 后即可支持網(wǎng)絡(luò)同步

 

　　const doc = new Y.Doc()

 

　　// 在 YDoc 上可以創(chuàng)建不同類型的頂層 YModel 實(shí)例

 

　　// 這里創(chuàng)建了一個(gè)頂層名為 root 的 YMap

 

　　const yRoot = doc.getMap('root')

 

　　// 也可以用 class 構(gòu)造器來(lái)實(shí)例化獨(dú)立的 YMap 等 YModel

 

　　// 可直接用 get set delete 等常見(jiàn) API 對(duì) YModel 增刪改查

 

　　const yPoint = new Y.Map()

 

　　yPoint.set('x', 0)

 

　　yPoint.set('y', 0)

 

　　// YMap 的值也可以是 YMap，從而構(gòu)造出嵌套的數(shù)據(jù)類型

 

　　yRoot.set('point', yPoint)

 

　　// YMap 中還可以存入 YText 等其他 YModel，形成復(fù)合的數(shù)據(jù)類型

 

　　const yName = new Y.Text()

 

　　yName.insert(0, 'Wilson Edwards')

 

　　yRoot.set('name', yName)