最近在做一个学校的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 ;

if(window.getSelection) {

selectedText = window.getSelection().toString();

}

else if(document.selection && document.selection.createRange) {

selectedText = document.selection.createRange().text;

}

if(selectedText){

$("#icon").css({

"left" : e.clientX+1,

"top" : e.clientY-30

}).fadeIn(300);

}

else {

$("#icon").hide();

}

});

$("#icon").hover(function(){

$(this).children().removeClass("tipsIcon");

}

,

function(){

$(this).children().addClass("tipsIcon");

}).click(function() {

$("#icon").hide();

addPostil();

});

});

//添加批注

function addPostil() {

//IE支持的range对象

var ie_range ;

//其他浏览器的range对象

var other_range ;

if(window.getSelection) {

other_range = window.getSelection().getRangeAt(0);

}

else if(document.selection && document.selection.createRange) {

ie_range = document.selection.createRange();

}

art.dialog({

id:'inputDialog',

title:'添加批注',

content:'',

lock:true

}

, function(){

var value = document.getElementById("postil").value;

if(!value){

art.dialog({

content:'批注内容不能为空！', time: 1

});

return false;

}

if(other_range) {

/*

//IE之外的浏览器，如果在选择内容包含其他标签的一部分的时候会报异常

var mark = document.createElement("ins");

mark.setAttribute("comment", value);

mark.className = "postil";

mark.id=new Date().getTime();

other_range.surroundContents(mark);

*/

var selected = other_range.extractContents().textContent;

var text = "[ins id='"+(new Date().getTime())+"' comment='"+value+"']"+selected+"[/ins]";

var textNode = document.createTextNode(text);

other_range.insertNode(textNode);

var content = $(".content").html();

var reg = /\[ins id='(\d*)' comment='([\w\W]*)']([\w\W]*)\[\/ins]/gi;

reg.test(content);

var id = RegExp.$1,

comment = RegExp.$2,

c = RegExp.$3;

var reHtml = ""+c+"";

content = content.replace(reg, reHtml);

$(".content").html(content);

}

else if(ie_range) {

ie_range.pasteHTML(""+ie_range.htmlText+"");

ie_range=null;

}

loader();

});

}

//解析批注

function loader(){

var $list = $(".list");

$list.children().remove();

$.each($(".content ins"), function(a, b){

var content = $(b).attr("comment");

var $postil = $("

");

$postil.hover(function(){

$(this).css("border-color", "red");

$("#"+$(this).attr("forid")+"").removeClass().addClass("postilFocus");

}

,

function(){

$(this).css("border-color", "#ddd");

$("#"+$(this).attr("forid")+"").removeClass().addClass("postil");

});

$(b).hover(function(){

$(this).removeClass().addClass("postilFocus");

$("div[forid='"+$(this).get(0).id+"']").css("border-color", "red");

}

,

function(){

$(this).removeClass().addClass("postil");

$("div[forid='"+$(this).get(0).id+"']").css("border-color", "#ddd");

});

$list.append($postil);

});

}

//删除批注

function removePostil(arg){

var $div = $(arg).parent();

var id = $div.attr("forid");

var $source = $("#"+id);

var text = $source.after($source.html());

$source.remove();

loader();

}

截图如下：