hi, 大家好, 我是徐小夕.
最近一直在研究多模态文档引擎, 也设计了一款类似钉钉文档, 飞书文档的编辑器flowmix/docx:
经过一段时间的研究, 终于做了第一版多人协同功能, 目前支持多人在线编辑器文档, 并显示不同用户的鼠标位置以及用户列表, 接下来就和大家分享演示一下.
(Ps: 文末会赠送3本Vue实战书籍, 欢迎留言反馈~)
flowmix/docx多人协同功能演示
体验地址: http://flowmix.turntip.cn/docx-crop
flowmix/docx文档编辑器的多人协同, 目前支持的特点有:
1. 编辑同一段文档时, 支持增量更新内容
2. 不同用户会显示不同颜色的光标, 并在编辑时会在编辑位置显示虚线外框
3. 添加内容时会全量更新; 删除, 修改, 和交换内容顺序, 都支持增量更新
flowmix/docx多人协同技术方案
我们都知道多人协同离不开实时通信, 本质上也就离不开后端, 所以在多人协同实现上我采用了websocket.
接下来就是解决多人更新时, 数据协同的问题.
之前我也在公众号分享过多人协同的技术实现, 大家可以采用Yjs + Websocket实现, 当然这个方案实现成本和工作量相对较大, 业内也没有成熟的开源方案.
目前我研究的方案是基于差异算法(diff)实现, 并参考React的虚拟Dom更新思路, 设计了一套更新算法(类似于diff.js的实现架构), 基本实现了基础场景的文档协同更新:
当然还有一些小的优化项, 私有化部署的客户后续可以基于这套方案二次开发和优化, 来满足自身的UI需求和业务需求.
flowmix/docx多模态文档引擎后面会以每月定期更新1-2版的速度持续为大家带来更好用的功能和用户体验, 打造AI驱动的智能文档引擎, 如果你也有类似的需求, 欢迎和我们交流反馈.
基于flowmix/docx的多模态文档Saas平台
目前我们基于flowmix/docx多模态文档引擎写了一款文档Saas产品——橙子轻文档. 后续会对标Notion和飞书, 做一款All in One的内容驱动的办公协作平台, 最新进展我会定期同步在flowmix视界公众号中, 大家感兴趣可以关注一下:
如果大家有好的建议也欢迎随时交流反馈~
体验地址: http://orange.turntip.cn/doc
读者福利(评论送书啦)
最近发现一本还不错的前端学习书籍, 这里分享一下:
内容简介
《Vue.js 3 TypeScript从入门到项目实践》以实战为主线，结合众多代码示例和一个完整的项目案例，全面、系统地介绍Vue 3和TypeScript的相关技术及其在实际项目开发中的应用。
本书在讲解中穿插介绍了一些开发技巧，可以帮助读者提高代码质量和项目开发的效率。
《Vue.js 3 TypeScript从入门到项目实践》共13章，分为3篇。
第1篇基础知识，包括初识Vue、TypeScript基础知识、Vue的基本指令、CSS样式绑定、数据响应式基础、组件化开发。
第2篇进阶提升，包括HTTP网络请求、使用Vue Router构建单页应用、Vuex状态管理与应用调优、项目构建利器Webpack、搭建后台模拟环境。
第3篇项目实战，包括商城后台管理系统项目设计与框架搭建以及功能模块的实现。《Vue.js 3 TypeScript从入门到项目实践》内容丰富，实用性强，适合有一定Web开发和JavaScript编程基础的前端工程师阅读，也适合熟悉Vue 2而想进一步系统学习Vue 3的Web前端开发从业人员阅读，还适合大中专院校和社会培训机构作为Web开发类课程的教材。
如果大家感兴趣, 可以在评论区对本篇文章做出30字以上建议和反馈, 我会选出3名小伙伴进行送书~
