富文本批注前端技术方案

批注这个功能大家在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的源码 或许你就有目标了