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

截图如下：

评论

8 楼 sha851092391 2013-11-28  

v2xmxl 写道

sha851092391 写道

v2xmxl 写道

sha851092391 写道

v2xmxl 写道

“写到一半的时候竟发现一个国内强大的HTML编辑器KindEditor，只需几行代码就解决了（为什么不早点发现(T-T)）”
这不是你写的吗？

这个是大学里面某项目中的功能，需求是老师使用浏览器审批学生的论文，但是论文不允许用编辑器修改，所以只能自己手写了。

好吧～
还想请问下，这个是怎么存数据库的呢？

当初我们是用数据库表记录批注的位置，但是这种要需记录的数据太多，最后我们废弃了，最后选择了另外一种解决方案，就是数据库记录中保存一份每添加批注的论文内容，另一份就是已经添加批注内容的。

那是一张表记录完整的论文内容，另一张表记录论文的id、添加批注的论文内容和批注内容，是吧？

另一份批注和内容是混在一起的。

7 楼 v2xmxl 2013-11-28  

sha851092391 写道

v2xmxl 写道

sha851092391 写道

v2xmxl 写道

“写到一半的时候竟发现一个国内强大的HTML编辑器KindEditor，只需几行代码就解决了（为什么不早点发现(T-T)）”
这不是你写的吗？

这个是大学里面某项目中的功能，需求是老师使用浏览器审批学生的论文，但是论文不允许用编辑器修改，所以只能自己手写了。

好吧～
还想请问下，这个是怎么存数据库的呢？

当初我们是用数据库表记录批注的位置，但是这种要需记录的数据太多，最后我们废弃了，最后选择了另外一种解决方案，就是数据库记录中保存一份每添加批注的论文内容，另一份就是已经添加批注内容的。

那是一张表记录完整的论文内容，另一张表记录论文的id、添加批注的论文内容和批注内容，是吧？

6 楼 sha851092391 2013-11-28  

v2xmxl 写道

sha851092391 写道

v2xmxl 写道

“写到一半的时候竟发现一个国内强大的HTML编辑器KindEditor，只需几行代码就解决了（为什么不早点发现(T-T)）”
这不是你写的吗？

这个是大学里面某项目中的功能，需求是老师使用浏览器审批学生的论文，但是论文不允许用编辑器修改，所以只能自己手写了。

好吧～
还想请问下，这个是怎么存数据库的呢？

当初我们是用数据库表记录批注的位置，但是这种要需记录的数据太多，最后我们废弃了，最后选择了另外一种解决方案，就是数据库记录中保存一份每添加批注的论文内容，另一份就是已经添加批注内容的。

5 楼 v2xmxl 2013-11-28  

sha851092391 写道

v2xmxl 写道

“写到一半的时候竟发现一个国内强大的HTML编辑器KindEditor，只需几行代码就解决了（为什么不早点发现(T-T)）”
这不是你写的吗？

这个是大学里面某项目中的功能，需求是老师使用浏览器审批学生的论文，但是论文不允许用编辑器修改，所以只能自己手写了。

好吧～
还想请问下，这个是怎么存数据库的呢？

4 楼 sha851092391 2013-11-28  

v2xmxl 写道

“写到一半的时候竟发现一个国内强大的HTML编辑器KindEditor，只需几行代码就解决了（为什么不早点发现(T-T)）”
这不是你写的吗？

这个是大学里面某项目中的功能，需求是老师使用浏览器审批学生的论文，但是论文不允许用编辑器修改，所以只能自己手写了。

3 楼 v2xmxl 2013-11-28  

“写到一半的时候竟发现一个国内强大的HTML编辑器KindEditor，只需几行代码就解决了（为什么不早点发现(T-T)）”
这不是你写的吗？

2 楼 sha851092391 2013-11-28  

v2xmxl 写道

请问，在kindeditor中是如何实现的呢？ 谢谢

KindEditor（简称KE）没搞过，但是具体思路就是开发一个KE的插件，你可以去官网看下怎么开发一个插件，插件所做的事情就是把选中的文本替换成使用特殊标签括起来的内容，其实和选中的文本字体加粗或是倾斜等的实现是一样的。

1 楼 v2xmxl 2013-11-28  

请问，在kindeditor中是如何实现的呢？ 谢谢