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 ;
		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:'<textarea id="postil" rows="10" cols="30"></textarea>',
		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 = "<ins id='"+id+"' comment='"+comment+"' class='postil' >"+c+"</ins>";
			content = content.replace(reg, reHtml);
			$(".content").html(content);
		}
		else if(ie_range) {
			ie_range.pasteHTML("<ins comment='"+value+"' class='postil' id='"+new Date().getTime()+"'>"+ie_range.htmlText+"</ins>");
			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 = $("<div forid='"+$(b).get(0).id+"'>"+content+"<span onClick='removePostil(this)'>　　x</span></div>");
		$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();
}

截图如下：

这种做法是不是刷新页面或者下次登录后，批注都没有了？

写个cookie不得了

不会，因为内容保存到数据库了，所以不会丢失的。要显示批注的时候只需要使用js解析一下就行了。

other_range 如何保存在库中，或是保存它的参数，下次打开时重新实例化这个对象？

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);

text需要的参数可以保存到库中，而other_range需要定位批注的文本，而other_range是加批注时生成的，下次打开或刷新后就变了，所有没办法定位到批注的文本

批注以纪念馆加到原文里面了，保存原文就行了。并不是保存range对象。

如何做到批注与原文分离？

不好意思，打错字了，“纪念馆”应该是自定义标志；目前只能做到显示层面上的分离，不能做到内容上面的分离。

为啥呢？应该可以用节点定位和文本检索做到吧？