登录  /  注册
首页 > web前端 > css教程 > 正文

文本修改留痕_VML相关

php中文网
发布: 2016-05-16 12:09:46
原创
1638人浏览过

在办公自动化,公文审核的时候,就需要用到 留痕操作了,就是把修改的东西直接在文本上显示,而不直接改动它。在以前,我没有用VML去做,很勉强的用 TextRange 改变文本的颜色,然后增加一个层显示更改信息。第一次修改还可以实现,但不能做到再次修改,因为,第二次修改的时候,那些原来创建的对象都消失了,而这些对象都是通过 Select 操作得到的,用户不选择,脚本就没有办法创建那些对象。
    不久前,我想到了 VML ,开始还觉得是不可能的事情,但我发现了 TextRange 对象一个很强大的方法 getClientRects(),这个方法可以返回 TextRange 对象包含的每一行的矩形信息。意思是说,如果你用鼠表选择一段文本,文本会自动高亮显示,这样看上去就是一块块矩形组成的不规则图形。getClientRects 方法就可以得到这些矩形的坐标和高宽,这样一来,就可以在选择的文本外套一层 VML 画的矩形,Oh my god...真是酷呆了。当我第一次看到它的时候,兴奋的抱着小白(猫)满屋子乱跳。     接下来,讲讲 TextRange 对象以及 getClientRects 和 VML 结合画痕迹:
    TextRange 对象,顾名思义,文本区域,就是网页上的一部分区域,可以是文本也可以是图像和别的段落格式。所有能用鼠标选择的都可以变成 TextRange 对象。IE4 的时候就出现了。TextRange 有个强大的方法就是 execCommand(),它可以执行很多命令,动态更改网页中内容、样式。创建 TextRange 对象一般有两种途径,一种是用户选择了一段文本,可以使用 var oTextRange=document.selection.createRange(); 还有种就是直接把document 创建成 TextRange :var oTextRange=document.createTextRane() 。不知道有没有注意,两个方式使用的函数不一样,第一个因为本省就是文字了,所有使用 createRange(), 第二个不能确定是否都是文字,所有,必须用 createTextRange()。
    使用 getClientRects 返回的是一个 TextRectangle 对象,它是一个集合,没个子集拥有四个属性 bottom,top,left,right ,就是两个角的坐标,这个坐标值是相对于页面的,所以可以直接应用到 VML 中来。

function createRect(num)
{
 var newMark=document.createElement("
");
 edit.insertBefore(newMark);
 var oRcts = oTempRange.getClientRects();//oTempRange是一个 TextRange 对象
 for(var i=0;ioRcts.length;i++)
 {
  var t=oRcts[i].top;
  var l=oRcts[i].left;
  var r=oRcts[i].right;
  var b=oRcts[i].bottom;
  var newRect=document.createElement("");
  newMark.insertBefore(newRect);
  newRect.style.posTop=t+document.body.scrollTop-3;
  newRect.style.posLeft=l-2;
  newRect.style.width=r-l;
  newRect.style.height=b-t;
  newRect.style.visibility="";
 }
}

    其他的代码就不再说了,我想说说整个脚本执行的过程。首先用户用鼠标选择一段文字,然后脚本马上把选择的文字创建成临时 TextRange 对象,并且通过 execCommand 把这段文字的背景颜色改掉,以做对比。当用户点右键的时候,脚本检查到用户的事件源,如果临时 TextRange 对象存在,菜单上将显示 “标记选择中的”这项,如果事件源是已经标记过的文本,菜单上将显示“取消标记”这项。当用户意见选择“标记选中的”的时候,脚本弹出 对话框,提示用户意见输入对选择的这段文字的处理。
    脚本得到用户的选择,就执行上面的代码,用 VML 把选择的文字框起来,然后生成一个层,上面记录的是修改的内容。当用户选择的“取消标记”,本身已经标记过的文字在点右键的事件上就有个 popID=XX 的表达式,popID是个全局变量,通过这个popID 到 Document 中去寻找相应的 VML 标记和层,然后使他们的 outerHTML 为空,就起到了取消标记的目的!
    可以访问下面的页面,可以实现过程的。
    文本修改留痕


    到目前为止,关于VML的介绍已经全部写完了。当然我想这里面错误还是有的,理解上也有很不足,表达上还有欠缺的地方。由于 VML 应用的还不太普遍,但功能强大,我觉得有必要让大家都了解一下VML技术,至少让大家知道,很多东西其实都可以用VML完成的。大家一起研究吧!
智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号