テキスト変更トレース_VML関連

在办公自动化，公文审核的时候，就需要用到 留痕操作了，就是把修改的东西直接在文本上显示，而不直接改动它。在以前，我没有用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;i<oRcts.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完成的。大家一起研究吧！