`
sha851092391
  • 浏览: 72437 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

HTML 页面添加批注

javascript 
阅读更多
    最近在做一个学校的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();
}

截图如下：
  • 大小: 10.7 KB
分享到：
| 轻松搭建SVN服务器
评论
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中是如何实现的呢？ 谢谢
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    前端页面添加文字批注.rar

    前端页面动态添加标注，更改背景颜色，并且实现了动态删除页面操作。页面实例基于jquery.js,下载后可以直接打开index.html查看效果。

    html+JavaScript网页批注.zip

    因项目有个需求就是要像在word里面的添加批注功能一样，就是选中一段文字，然后为这些页面添加一些额外的信息，在选中的文字两端加上自定义标记，批注的内容就是保存到自定义标签的属性里面去。

    JavaWord类库操作API_Free Spire.Doc for Java_5.1.0

    批注；表格；段落设置；域；打印；邮件合并；Word宏；添加条码、二维码；字体设置；文本框等。 2.应用场景：Word文档创建、编辑、转换、预览及保存等需求的程序设计、系统等。 3.适用人群：所有（包括初学者及任何...

    PDF Reader Pro v2.7.7

    可连续添加批注工具 ・签名 – 在任意位置利用触控板，键盘或图片创建手写签名或图片签名 ・图章 – 添加标准预设图章，如机密，批准，未批准，或自定义文字图章或者图片图章 ・链接 – 将文字与PDF页面或邮件Email...

    Apress.Pro.WPF.in.C.Sharp.2008.2nd.Edition.Feb.2008

    9.2.5 在另外一个页面中宿主页面 212 9.2.6 在Web浏览器中宿主页面 213 9.3 页面历史 214 9.3.1 深入分析WPF中的URI 214 9.3.2 导航历史 215 9.3.3 维护自定义的属性 216 9.4 导航服务 217 9.4.1 通过编程进行导航 ...

    我记录网站综合系统 v1.0.zip

    √添加了 HtmlText批注，允许ctx.PostValue直接获取html文本 √编辑器在firefox不显示光标问题 √json：对象列表生成字符串的bug √验证框架增加了对 select/checkbox/radio的支持 √弹窗中form返回带上多余的...

    我记录网站综合系统 1.6源码

    菜单：解决添加本地abcd.html 多出abcd.html.aspx 后缀的问题 1.6新版特别推荐 微博功能： 1）支持优酷、土豆、ku6、56网的视频，但要注意的是，视频必须是播放页的网址，不是flash的网址 2）支持at功能、话题...

    wake:唤醒是静态网站生成器

    唤醒 唤醒是一个静态站点生成器。...她在文件上的批注 每个文档标记 导航/拓扑 非常基本的语言工具集成 跨页面链接 目录支持 版本0.3（路线图） 每个文档的目录（进行中：2.1） 跨文档标记（索引） 照片库支持

    福昕PDF阅览器绿色版.rar

    -拥有批注、谈论、拼写检查、文本标示、文本挑选东西、图画标示、打字机东西、检查谈论或添加谈论到文本对话框或者插图中等注释东西，一起拥有便利的文本查找功用。 -支撑XFA表单填写功用。XFA表单是属于交互式表单...

    客户管理系统

    旧版地址：http://www.jb51.net/codes/272886.html 软件名称:云点滴客户关系管理CRMOA系统 软件版本:v1.02.13简体中文安装部署版 软件大小:8.12M 软件类型：简体中文/国产软件/免费版 软件分类:电子商务/客户...

    KeepIt:最强大的最小雨果主题

    台式机上为100/100 通过基于JSON-LD的正确SEO SCHEMA优化了SEO性能样式更整洁的beetwen页面和部分多语言支持分页支持Google Analytics（分析）支持Disqus评论系统Gitalk评论系统缬氨酸评论系统批注评论系统言论评论...

    flash shiti

    getURL表示使浏览器浏览到指定页面 B. gotoAndPlay表示跳转到指定帧并播放 C. gotoAddStop表示跳转到指定帧并停止播放 D. loadMovie表示引入一个外部电影到指定层 37.比较运算符分为哪几种？ A. 数值比较...

Magicbox
Global site tag (gtag.js) - Google Analytics