Teks pengubahsuaian jejak_VML berkaitan

在办公自动化，公文审核的时候，就需要用到 留痕操作了，就是把修改的东西直接在文本上显示，而不直接改动它。在以前，我没有用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="";
 }
}

Saya tidak akan bercakap tentang kod lain lagi, saya mahu bercakap tentang keseluruhan proses pelaksanaan skrip. Mula-mula, pengguna memilih sekeping teks dengan tetikus, dan kemudian skrip serta-merta mencipta objek TextRange sementara daripada teks yang dipilih, dan menukar warna latar belakang teks melalui execCommand untuk perbandingan. Apabila pengguna mengklik kanan, skrip menyemak sumber acara pengguna Jika objek TextRange sementara wujud, menu akan memaparkan item "Tandakan Dipilih" Jika sumber acara sudah ditandai teks, menu akan memaparkan "Batal". Tandai item ini. Apabila pengguna memilih "Tandakan dipilih", skrip muncul kotak dialog yang menggesa pengguna untuk memasukkan pemprosesan teks yang dipilih.
Apabila skrip mendapat pilihan pengguna, ia melaksanakan kod di atas, menggunakan VML untuk membingkai teks yang dipilih, dan kemudian menjana lapisan di mana kandungan yang diubah suai direkodkan. Apabila pengguna memilih "Nyahtanda", teks yang telah ditandakan akan mempunyai ungkapan popID=XX pada acara klik kanan popID ialah pembolehubah global Gunakan popID ini untuk mencari teg dan lapisan VML yang sepadan dalam Dokumen. dan kemudian kosongkan outerHTML mereka, yang berfungsi untuk membatalkan tanda!
Anda boleh melawat halaman di bawah untuk merealisasikan prosesnya.
Jejak pengubahsuaian teks


Setakat ini, semua pengenalan kepada VML telah ditulis. Sudah tentu saya rasa masih ada kesilapan di sini, banyak juga kekurangan dalam pemahaman, dan masih ada kekurangan dalam ungkapan. Memandangkan VML belum digunakan secara meluas lagi, tetapi ia berkuasa, saya fikir adalah perlu untuk semua orang memahami teknologi VML, sekurang-kurangnya untuk memberitahu semua orang bahawa banyak perkara sebenarnya boleh diselesaikan menggunakan VML. Jom belajar sama-sama!