wangEditor
wangEditor copied to clipboard
可以做像word的那种批注功能吗
批注功能
富文本内容在以html形式渲染到页面上后,支持用户鼠标选中一段内容,添加批注,添加批注的这段内容有个下划线的样式(当然如果支持自定义更好),编辑富文本内容时,这段内容可以编辑,如果删除了,批注也就没了。类似word的批注功能
提炼几个功能点
- 选中内容后,选中区域出现图标提示可添加批注
- 选中内容样式可以自定义
- 编辑富文本时,添加了批注的内容可以进行编辑
- 鼠标经过或点击选中内容,需要有事件回调(方便业务展示及定位批注)
- 选中内容和所属批注之间的交互(选中内容和批注点击相互定位)
- 提供方法,获取当前富文本内容中所有批注信息或者指定的批注信息
原型图
参考石墨文档,创建文档,输入一段内容后,选中一段内容,点击右上角添加评论(ctrl+shift+m)
可参考的案例
石墨文档 https://shimo.im
只能自己开发,不是一般的复杂。最近我也在做相关的需求,项目依赖的是v4,所以我是基于v4版本做的 v5, 基于slate,数据驱动,实现后效果应该很好,但是slate上手难度太高,我没做,可以看看极客时间,他们是用slate实现的 v4, 用原生的Selection and Range API修改DOM,每一次标注都会破坏原有DOM结构,出效果很快,边界情况特别多,并且原文修改后同步是个大问题
@Gorvey 大佬,有案例可以参考吗