什么是用户交互层
在文档编辑器的架构上,直接和用户交互相关的逻辑模块,我们会称为用户交互层,一般涵盖
- 内容呈现
- 选区
- 光标
- 用户输入
- 悬浮操作菜单
- 等
竞品对比
效果对比
选中的效果,我个人认为排名为
- 金山文档
- 飞书
- notion / google docs
金山文档在呈现block块的概念最好
-
整体清晰的块结构
-
局部块效果:高亮块/有序无序列表
飞书在列表上,是没有选中前面的序号的,这个也是原生系统选区的一个问题
不过飞书也有跨区的实现,选区是自己绘制的,实现思路和金山文档的一致
方案对比
- notion/feishu是基于contenteditable实现的选区系统
- 金山文档是自己实现的选区/光标/输入
- google docs是基于canvas, 排版和选区都是自己实现的
浏览器差异
需要考虑pc/mobile/pad各种设备,不同浏览器/客户端/小程序等容器,同时兼顾选区效果/光标/操作交互一致性体验问题
- 选区高亮效果不统一
- 点击定位的准确性
- input输入(各种输入法的差异)
- 移动端水滴已经拖动选中效果
- 等
自实现选区系统
利用浏览器原生的选区/光标系统是足够用的,但是如果要一致性更好,就需要花多点精力去实现更复杂的选区系统了
那么如何去实现一套选区系统呢?
画一个大致的架构图,参考的是canvas自实现选区的做法,更多细节不方便透漏。如果有不对的地方,欢迎评论讨论
评论记录:
回复评论: