网络编辑论坛

注册

 

发新话题 回复该主题

前端三大浪漫是个啥 [复制链接]

1#


  脉脉上有个帖子,讲到前端三大浪漫,分别是富文本编辑器、在线excel和CRDT。


  一、富文本编辑器


  富文本编辑器市面上已经有很多优秀的开源版本了,但是问题在于每个产品的富文本编辑器需求不一样,所以可能导致有一些时候需要手撸编辑器


  例如/p>


  Draft.js


  Slate.js


  wangEditor


  这些富文本编辑器还有衍生出他们的针对不同框架的版本,例如React,还有一些插件。感兴趣的可以去github搜索给个star,方便以后用得上


  作者当时手写过桌面软件的富文本编辑器(Electron,类似
  二、在线excel


  推荐一个githubstar数量11.6K的开源库,luckysheet


  demo体验
  支持:


  1.格式设置。包括字体、字号、颜色、文本对齐、自动换行以及excel支持的各种数据类型


  2.单元格。拖拽选取、下拉填充、自动填充、查找替换、合并单元格等。


  3.行列。隐藏、插入、删除、冻结。


  4.操作。撤销、复制、粘贴、剪切、快捷键、格式刷、筛选排序、批注、共享编辑。


  5.函数。内置常见公式,并支持自定义公式。


  6.图表。目前支持折线图、柱状图、面积图、条形图、饼图,支持插入图片。


  三、CRDT-无冲突复制数据类型


  科普:


  在分布式计算中,无冲突复制数据类型(英语:CRDT)是一种可以在网络中的多台计算机上复制的数据结构,副本可以独立和并发地更新,而不需要在副本之间进行协调,并且在数学上总是可以解决可能出现的不一致问题。[1][2][3][4][5][6][7][8]


  CRDT的概念是由MarcShapiro、NunoPregui?a、CarlosBaquero和MarekZawirski于年正式定义。[9]开发的最初动机是协作式文本编辑(英语:Collaborativereal-timeeditor)和移动计算。CRDTs也被用于在线聊天系统、在线赌博和SoundCloud音频分发平台中。NoSQL分布式数据库Redis、Riak和CosmosDB有CRDT数据类型。


  推荐一个8Kstar的前端CRDT实时协作库Yjs:
  Yjs主要的内部特点:


  基于双向链表和StructStore的基础数据结构


  基于YATA算法的并发冲突解决机制


  基于DeleteSet和Transaction机制的撤销重做


  基于两阶段划分的同步机制


  它支持:


  建模数据结构


  解决并发冲突


  回溯历史记录


  同步网络状态等


  使用示例


  import*asYfromyjs


  //应用中的全部协作状态均可在单个YDoc容器中承载


  //将该实例传入WebSocket等协议的provider后即可支持网络同步


  constdoc=newY.Doc()


  //在YDoc上可以创建不同类型的顶层YModel实例


  //这里创建了一个顶层名为root的YMap


  constyRoot=doc.getMap(root)


  //也可以用class构造器来实例化独立的YMap等YModel


  //可直接用getsetdelete等常见API对YModel增删改查


  constyPoint=newY.Map()


  yPoint.set(x,0)


  yPoint.set(y,0)


  //YMap的值也可以是YMap,从而构造出嵌套的数据类型


  yRoot.set(point,yPoint)


  //YMap中还可以存入YText等其他YModel,形成复合的数据类型


  constyName=newY.Text()


  yName.insert(0,WilsonEdwards)


  yRoot.set(name,yName)

分享 转发
TOP
发新话题 回复该主题