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

 

　　例如:

 

　　Draft.js

 

　　Slate.js

 

　　wangEditor

 

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

 

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

 

 

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

 

　　demo體驗地址：https://mengshukeji.github.io/LuckysheetDemo/

 

　　支持：

 

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

 

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

 

　　3.行列。隱藏、插入、刪除、凍結。

 

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

 

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

 

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

 

 

　　科普：

 

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

 

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

 

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

 

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

 

　　基于雙向鏈表和 StructStore 的基礎數(shù)據(jù)結構

 

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

 

　　基于 DeleteSet 和 Transaction 機制的撤銷重做

 

　　基于兩階段劃分的同步機制

 

　　它支持：

 

　　建模數(shù)據(jù)結構

 

　　解決并發(fā)沖突

 

　　回溯歷史記錄

 

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

 

　　使用示例

 

　　import * as Y from 'yjs'

 

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

 

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

 

　　const doc = new Y.Doc()

 

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

 

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

 

　　const yRoot = doc.getMap('root')

 

　　// 也可以用 class 構造器來實例化獨立的 YMap 等 YModel

 

　　// 可直接用 get set delete 等常見 API 對 YModel 增刪改查

 

　　const yPoint = new Y.Map()

 

　　yPoint.set('x', 0)

 

　　yPoint.set('y', 0)

 

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

 

　　yRoot.set('point', yPoint)

 

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

 

　　const yName = new Y.Text()

 

　　yName.insert(0, 'Wilson Edwards')

 

　　yRoot.set('name', yName)