主頁 > 知識庫 > 文本修改留痕

文本修改留痕

在辦公自動化，公文審核的時候，就需要用到留痕操作了，就是把修改的東西直接在文本上顯示，而不直接改動它。在以前，我沒有用VML去做，很勉強的用 TextRange 改變文本的顏色，然后增加一個層顯示更改信息。第一次修改還可以實現(xiàn)，但不能做到再次修改，因為，第二次修改的時候，那些原來創(chuàng)建的對象都消失了，而這些對象都是通過 Select 操作得到的，用戶不選擇，腳本就沒有辦法創(chuàng)建那些對象。
    不久前，我想到了 VML ，開始還覺得是不可能的事情，但我發(fā)現(xiàn)了 TextRange 對象一個很強大的方法 getClientRects(),這個方法可以返回 TextRange 對象包含的每一行的矩形信息。意思是說，如果你用鼠表選擇一段文本，文本會自動高亮顯示，這樣看上去就是一塊塊矩形組成的不規(guī)則圖形。getClientRects 方法就可以得到這些矩形的坐標(biāo)和高寬，這樣一來，就可以在選擇的文本外套一層 VML 畫的矩形，Oh my god...真是酷呆了。當(dāng)我第一次看到它的時候，興奮的抱著小白(貓)滿屋子亂跳。     接下來，講講 TextRange 對象以及 getClientRects 和 VML 結(jié)合畫痕跡：
    TextRange 對象，顧名思義，文本區(qū)域，就是網(wǎng)頁上的一部分區(qū)域，可以是文本也可以是圖像和別的段落格式。所有能用鼠標(biāo)選擇的都可以變成 TextRange 對象。IE4 的時候就出現(xiàn)了。TextRange 有個強大的方法就是 execCommand()，它可以執(zhí)行很多命令，動態(tài)更改網(wǎng)頁中內(nèi)容、樣式。創(chuàng)建 TextRange 對象一般有兩種途徑，一種是用戶選擇了一段文本，可以使用 var oTextRange=document.selection.createRange(); 還有種就是直接把document 創(chuàng)建成 TextRange :var oTextRange=document.createTextRane() 。不知道有沒有注意，兩個方式使用的函數(shù)不一樣，第一個因為本省就是文字了，所有使用 createRange(), 第二個不能確定是否都是文字，所有，必須用 createTextRange()。
    使用 getClientRects 返回的是一個 TextRectangle 對象，它是一個集合，沒個子集擁有四個屬性 bottom,top,left,right ，就是兩個角的坐標(biāo)，這個坐標(biāo)值是相對于頁面的，所以可以直接應(yīng)用到 VML 中來。

function createRect(num)
{
var newMark=document.createElement("div id='mark"+num+"'>/div>");
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("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>");
  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="";
}
}

    其他的代碼就不再說了，我想說說整個腳本執(zhí)行的過程。首先用戶用鼠標(biāo)選擇一段文字，然后腳本馬上把選擇的文字創(chuàng)建成臨時 TextRange 對象，并且通過 execCommand 把這段文字的背景顏色改掉，以做對比。當(dāng)用戶點右鍵的時候，腳本檢查到用戶的事件源，如果臨時 TextRange 對象存在，菜單上將顯示 “標(biāo)記選擇中的”這項，如果事件源是已經(jīng)標(biāo)記過的文本，菜單上將顯示“取消標(biāo)記”這項。當(dāng)用戶意見選擇“標(biāo)記選中的”的時候，腳本彈出對話框，提示用戶意見輸入對選擇的這段文字的處理。
    腳本得到用戶的選擇，就執(zhí)行上面的代碼，用 VML 把選擇的文字框起來，然后生成一個層，上面記錄的是修改的內(nèi)容。當(dāng)用戶選擇的“取消標(biāo)記”，本身已經(jīng)標(biāo)記過的文字在點右鍵的事件上就有個 popID=XX 的表達式，popID是個全局變量，通過這個popID 到 Document 中去尋找相應(yīng)的 VML 標(biāo)記和層，然后使他們的 outerHTML 為空，就起到了取消標(biāo)記的目的！
    可以訪問下面的頁面，可以實現(xiàn)過程的。
    文本修改留痕

    到目前為止，關(guān)于VML的介紹已經(jīng)全部寫完了。當(dāng)然我想這里面錯誤還是有的，理解上也有很不足，表達上還有欠缺的地方。由于 VML 應(yīng)用的還不太普遍，但功能強大，我覺得有必要讓大家都了解一下VML技術(shù)，至少讓大家知道，很多東西其實都可以用VML完成的。大家一起研究吧！

標(biāo)簽：滄州河南新疆長治紅河樂山沈陽上海

巨人網(wǎng)絡(luò)通訊聲明：本文標(biāo)題《文本修改留痕》，本文關(guān)鍵詞；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題，煩請?zhí)峁┫嚓P(guān)信息告之我們，我們將及時溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無關(guān)。

佳木斯湛栽影视文化发展公司

文本修改留痕

QQ咨詢

電話咨詢