前言

        对网页的选中内容进行批注或者备注，在使用了第三方的rangy库后发现并不能满足要求，于是查询相关资料，自己封装了一个js库，此处演示js库的使用。

 一、需求

        需求是这样的：我们需要进行在线的代码审查，代码提交上来之后需要对有问题的代码进行标注（网页内容标注），也就是网页批注的功能。

拿到需求后，首先搜索了一下目前网上有没有现成的js库，查到了rangy，传送门

二、问题

        下载了官网的实例后，参考示例继续修改发现基本能满足需求，1开始是用的序列化、反序列化，发现每次序列化的值都不相同，于是查看文档调整了之后值倒是不改变了，但是尝试修改页面内容时，位置又错乱了，尝试多次都没有解决非标注部分页面改变造成的位置不一致的问题，可能是我研究的不够深入，多次尝试未果后放弃了使用rangy，开始尝试自己写。

        在此要感谢2篇文章提供的思路和帮助：        

「划线高亮」和「插入笔记」—— 不止是前端知识点

如何用 JS 实现“划词高亮”的在线笔记功能？️

        通过对这两篇文章的学习，自此基础上自己封装了一个js库，touchNote，网页批注touchnote: touchNote是一款基于jQuery封装的HTML文章批注插件，帮助开发者轻松实现类似网页在线批注。支持网页文本划线高亮、添加网页备注信息等。

三、touchNote使用

下载源码的demo中有使用示例

1.引入库

代码如下（示例）：

<!-- 样式 -->
<link href="src/touchnote.css?20210421115725" rel="stylesheet">	

<!-- jquery -->
<script type="text/javascript" src="js/jquery-1.12.4.min.js?20191016082530"></script>
<!-- touchnote.js -->
<script type="text/javascript" src="src/touchnote.js?20210712162526" ></script>

2.初始化

代码如下（示例）：

// 初始数据
var notesdata = [{'nid':'1', 'keyid':"tn-1628153524469",'keycode':{"startMeta":{"parentTagName":"DIV","parentIndex":-2,"textOffset":41},"endMeta":{"parentTagName":"DIV","parentIndex":-2,"textOffset":56},"text":"指的是句子中所有词可能构成的图","id":"tn-1628153524469"}, 'remarks':'图片', 'userid':2, 'username':'兔先生', 'createtime':'2021-07-05 09:12:17.0'},
{'nid':'2', 'keyid':"h1625464240253",'keycode':{"startMeta":{"parentTagName":"DIV","parentIndex":-2,"textOffset":64},"endMeta":{"parentTagName":"DIV","parentIndex":-2,"textOffset":68},"text":"下一个词","id":"tn-1628153598413"}, 'remarks':'下一个词<span>带标签', 'userid':3, 'username':'超超', 'createtime':'2021-07-05 13:51:01.0'}];
// 标注的容器	
var highlightEle = $("#text-highlight");
highlightEle.touchNote({
	root:highlightEle[0],
	/** 父节点选择器，只有符合选择器的才作为父节点 */
	parSelectors : 'div', // 父节点，作为位置偏移的基准，保存后不可改变，否则可能影响定位
	hldatas : notesdata //初始化数据
});

最终效果图如下：

更多示例可以参考demo目录