富⽂本批注前端技术⽅案
优秀的富文本编辑器批注这个功能⼤家在Word中应该⽐较常见，⽬前web对富⽂本批注做的⽐较好的貌似可能就是⽯墨⽂档了
需求⼤致就是 ⽤户可以对富⽂本内容随意选中呼出⼀些操作按钮 例如⾼亮，批注等 然后对选中内容进⾏批注 例如
有些和划词翻译 选中内容分享⽐较类似
开始我以为是按照这个⽅案进⾏编码实现，如果以这种⽅式处理 主要有两个关键点需要注意 1、选中区的结构⽂字怎么读取 2、⿏标按键抬起时，拿到⿏标的位置信息
问题⼀ ⼤致可以这么处理
let txt = ‘';
if(document.selection) {
// IE
txt = ateRange().text;
} else {
range = Selection();
txt = String();
}
复制代码
问题⼆ 通过mouseup可以拿到具体信息
经过实践，发现有很多问题 富⽂本打上标记有可能⽬标⽂字定位错误 多⾏⽂本很难打标记 最后还是放弃了这个⽅案
思考了⼀番 如果这块如果做好底层必须实现编辑器基本核⼼功能 selection和rang 然后看了下quill editor 和 ueditor对着这两块的处理 后⾯发现quill⽐较适合现代编辑器着重看了些核⼼模块
经过⼀天多的查看quill源码，整理出了思路， 实现⼀个编辑器时间不允许 把核⼼模块中selection和ra
ng直接搬过来 时间和引出的问题也是⽐较紧张的，所以决定基于quill核⼼模块刨除UI相关 实现⼀个⾃定义的编辑器 然后⾃⼰只是开发两个⾃定义的format处理选中区域
经过测试验证还算编辑完美实现了这个需求 感觉⽯墨⽂档也是按照这个思路实现⾃定义的⼀些需求的 过程中也遇到了不少细节问题 还好经验思路是个好东西。 还有就是quill editor确实是⼀个⽐较现代的编辑器，实现的也⽐较完美。以后再做各个编辑器选择，⼀定要看下quill 的源码 或许你就有⽬标了

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。