html 鼠标悬停批注,HTML 页面添加批注

最近在做一个学校的XXX系统项目，因项目有个需求就是要像在word里面的添加批注功能一样，就是选中一段文字，然后为这些页面添加一些额外的信息；刚开始我们的方案是记录选中内容的下标，然后保存到数据库中，当要显示的时候就再数据库中读取下面然后在客户端用js合并，做着做着发现这种方法很烦，最后我们决定采用另一种方案，就是在在选中的文字两端加上自定义标记，批注的内容就是保存到自定义标签的属性里面去。

想法是有了，开始着手做Demo了，一开始我们就像在CKEditor里面做一个插件，看了一天的CKEditor的API和源码，搞到一头雾水，写CKEditor插件太复杂了，有要什么初始化、又要什么execute、一堆东西，最后放弃了这方案，最后决定还是自己写一个添加批注的工具出来，写到一半的时候竟发现一个国内强大的HTML编辑器KindEditor，只需几行代码就解决了(为什么不早点发现(T-T))；既然工具已经写了一半了，还是把它写完了，最终Demo出来了。

在这里就跟大家分享一下，大家看一下还有没有好的做法。

/**

* @作者：WilliamSha

* @时间：2011-10-18 下午07:52:01

* @项目名：XXX

* @描述：操作批注工具

*/

//初始化页面元素

$(function(){

$(".content").mouseup(function(e){

var selectedText ;

i