文本修改留痕_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 {
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完成的。大家一起研究吧！

