富文本批注前端技术方案

最新推荐文章于 2025-05-19 08:41:32 发布

weixin_33804582

最新推荐文章于 2025-05-19 08:41:32 发布

阅读量2.8k

点赞数

CC 4.0 BY-SA版权

文章标签：前端 javascript ui ViewUI

原文链接：https://juejin.im/post/5c862374e51d4523c06c505c

批注这个功能大家在Word中应该比较常见，目前web对富文本批注做的比较好的貌似可能就是石墨文档了

需求大致就是用户可以对富文本内容随意选中呼出一些操作按钮例如高亮，批注等然后对选中内容进行批注例如

有些和划词翻译选中内容分享比较类似

开始我以为是按照这个方案进行编码实现，如果以这种方式处理主要有两个关键点需要注意 1、选中区的结构文字怎么读取 2、鼠标按键抬起时，拿到鼠标的位置信息

问题一大致可以这么处理

  let txt = ‘'; 

  if(document.selection) {
    // IE
    txt = document.selection.createRange().text;
  } else {
    range = document.getSelection();
    txt = range.toString();
  }
复制代码

问题二通过mouseup可以拿到具体信息

经过实践，发现有很多问题富文本打上标记有可能目标文字定位错误多行文本很难打标记最后还是放弃了这个方案

思考了一番 如果这块如果做好底层必须实现编辑器基本核心功能 selection和rang 然后看了下quill editor 和 ueditor对着这两块的处理后面发现quill比较适合现代编辑器着重看了些核心模块

经过一天多的查看quill源码，整理出了思路，实现一个编辑器时间不允许把核心模块中selection和rang直接搬过来时间和引出的问题也是比较紧张的，所以决定基于quill核心模块刨除UI相关实现一个自定义的编辑器然后自己只是开发两个自定义的format处理选中区域

经过测试验证还算编辑完美实现了这个需求感觉石墨文档也是按照这个思路实现自定义的一些需求的过程中也遇到了不少细节问题还好经验思路是个好东西。还有就是quill editor确实是一个比较现代的编辑器，实现的也比较完美。以后再做各个编辑器选择，一定要看下quill的源码或许你就有目标了