📄 step33.html
字号:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>Thinking in VML</title>
</head>
<STYLE>
v\:* { BEHAVIOR: url(#default#VML) }
</STYLE>
<LINK REL="stylesheet" TYPE="text/css" HREF="style.css" />
<body>
<table align="center">
<tr>
<td align="center" class="title"><strong>文本修改留痕</strong></td>
</tr>
<tr>
<td >
<div class="memo" style="width:700;line-height:23px">
在办公自动化，公文审核的时候，就需要用到 留痕操作了，就是把修改的东西直接在文本上显示，而不直接改动它。在以前，我没有用VML去做，很勉强的用 TextRange 改变文本的颜色，然后增加一个层显示更改信息。第一次修改还可以实现，
但不能做到再次修改，因为，第二次修改的时候，那些原来创建的对象都消失了，而这些对象都是通过 Select 操作得到的，用户不选择，脚本就没有办法创建那些对象。<br>
不久前，我想到了 VML ，开始还觉得是不可能的事情，但我发现了 TextRange 对象一个很强大的方法 getClientRects(),这个方法可以返回 TextRange 对象包含的每一行的矩形信息。意思是说，如果你用鼠表选择一段文本，文本会自动高亮显示，
这样看上去就是一块块矩形组成的不规则图形。getClientRects 方法就可以得到这些矩形的坐标和高宽，这样一来，就可以在选择的文本外套一层 VML 画的矩形，Oh my god...真是酷呆了。当我第一次看到它的时候，兴奋的抱着小白(猫)满屋子乱跳。
接下来，讲讲 TextRange 对象以及 getClientRects 和 VML 结合画痕迹：<br>
TextRange 对象，顾名思义，文本区域，就是网页上的一部分区域，可以是文本也可以是图像和别的段落格式。所有能用鼠标选择的都可以变成 TextRange 对象。IE4 的时候就出现了。TextRange 有个强大的方法就是 execCommand()，它可以执行很多命令，动态更改网页中内容、样式。
创建 TextRange 对象一般有两种途径，一种是用户选择了一段文本，可以使用 var oTextRange=document.selection.createRange(); 还有种就是直接把document 创建成 TextRange :var oTextRange=document.createTextRane() 。不知道有没有注意，两个方式使用的函数不一样，第一个因为本省就是文字了，所有使用 createRange(),
第二个不能确定是否都是文字，所有，必须用 createTextRange()。<br>
使用 getClientRects 返回的是一个 TextRectangle 对象，它是一个集合，没个子集拥有四个属性 bottom,top,left,right ，就是两个角的坐标，这个坐标值是相对于页面的，所以可以直接应用到 VML 中来。
<div class="memo">
function createRect(num)<br>
{<br>
var newMark=document.createElement("<div id='mark"+num+"'></div>");<br>
edit.insertBefore(newMark);<br>
var <font color=red>oRcts = oTempRange.getClientRects()</font>;//oTempRange是一个 TextRange 对象<br>
for(var i=0;i<<font color=red>oRcts.length</font>;i++)<br>
{<br>
var t=oRcts[i].top;<br>
var l=oRcts[i].left;<br>
var r=oRcts[i].right;<br>
var b=oRcts[i].bottom;<br>
var newRect=document.createElement("<v:roundRect oncontextmenu='popID="+num+";popUp();' id='Rect"+num+"no"+i+"' style='position:absolute;visibility:hidden' filled=f strokeColor=red strokeWeight=1.5pt></v:roundRect>");<br>
newMark.insertBefore(newRect);<br>
newRect.style.posTop=t+document.body.scrollTop-3;<br>
newRect.style.posLeft=l-2;<br>
newRect.style.width=r-l;<br>
newRect.style.height=b-t;<br>
newRect.style.visibility="";<br>
}<br>
}<br>
</div>
<br>
其他的代码就不再说了，我想说说整个脚本执行的过程。首先用户用鼠标选择一段文字，然后脚本马上把选择的文字创建成临时 TextRange 对象，并且通过 execCommand 把这段文字的背景颜色改掉，以做对比。当用户点右键的时候，
脚本检查到用户的事件源，如果临时 TextRange 对象存在，菜单上将显示 “标记选择中的”这项，如果事件源是已经标记过的文本，菜单上将显示“取消标记”这项。当用户意见选择“标记选中的”的时候，脚本弹出 对话框，提示用户意见输入对选择的这段文字的
处理。<br>
脚本得到用户的选择，就执行上面的代码，用 VML 把选择的文字框起来，然后生成一个层，上面记录的是修改的内容。当用户选择的“取消标记”，本身已经标记过的文字在点右键的事件上就有个 popID=XX 的表达式，popID是个全局变量，
通过这个popID 到 Document 中去寻找相应的 VML 标记和层，然后使他们的 outerHTML 为空，就起到了取消标记的目的！<br>
可以访问下面的页面，可以实现过程的。<br>
<a href="edit/test.html" target="_blank">文本修改留痕</a><br><br><br>
到目前为止，关于VML的介绍已经全部写完了。当然我想这里面错误还是有的，理解上也有很不足，表达上还有欠缺的地方。由于 VML 应用的还不太普遍，但功能强大，我觉得有必要让大家都了解一下VML技术，至少让大家知道，很多东西其实都可以用VML完成的。大家一起研究吧！
<p align="right">2002年4月24日 下午</p>
</div>
</td>
</tr>
<tr>
<td class="title">
<p align="right"><a href="javascript:self.scrollTo(0,0)">Top</a></p>
<a href="index.html">返回目录</a><br>
上一节:<a href="step32.html">矢量地图</a><br>
下一节:结束
</td>
</tr>
</table>
</body>
</html>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -