wangEditor icon indicating copy to clipboard operation
wangEditor copied to clipboard

可以做像word的那种批注功能吗

Open passyou opened this issue 2 years ago • 2 comments

批注功能

富文本内容在以html形式渲染到页面上后,支持用户鼠标选中一段内容,添加批注,添加批注的这段内容有个下划线的样式(当然如果支持自定义更好),编辑富文本内容时,这段内容可以编辑,如果删除了,批注也就没了。类似word的批注功能

提炼几个功能点

  • 选中内容后,选中区域出现图标提示可添加批注
  • 选中内容样式可以自定义
  • 编辑富文本时,添加了批注的内容可以进行编辑
  • 鼠标经过或点击选中内容,需要有事件回调(方便业务展示及定位批注)
  • 选中内容和所属批注之间的交互(选中内容和批注点击相互定位)
  • 提供方法,获取当前富文本内容中所有批注信息或者指定的批注信息

原型图

参考石墨文档,创建文档,输入一段内容后,选中一段内容,点击右上角添加评论(ctrl+shift+m)

可参考的案例

石墨文档 https://shimo.im

passyou avatar Jul 10 '23 06:07 passyou

只能自己开发,不是一般的复杂。最近我也在做相关的需求,项目依赖的是v4,所以我是基于v4版本做的 v5, 基于slate,数据驱动,实现后效果应该很好,但是slate上手难度太高,我没做,可以看看极客时间,他们是用slate实现的 v4, 用原生的Selection and Range API修改DOM,每一次标注都会破坏原有DOM结构,出效果很快,边界情况特别多,并且原文修改后同步是个大问题

Gorvey avatar Jul 24 '23 02:07 Gorvey

@Gorvey 大佬,有案例可以参考吗

dongongfeiyu avatar Apr 18 '24 01:04 dongongfeiyu