Modification de texte liée aux traces_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="";
 }
}

Je ne parlerai plus des autres codes, je veux parler de l'ensemble du processus d'exécution du script. Tout d'abord, l'utilisateur sélectionne un morceau de texte avec la souris, puis le script crée immédiatement un objet TextRange temporaire à partir du texte sélectionné et modifie la couleur d'arrière-plan du texte via execCommand pour comparaison. Lorsque l'utilisateur clique avec le bouton droit, le script vérifie la source d'événement de l'utilisateur. Si l'objet TextRange temporaire existe, le menu affichera l'élément "Marquer la sélection". Si la source d'événement est déjà marquée, le menu affichera "Annuler". Marquez cet élément. Lorsque l'utilisateur sélectionne « Marquer la sélection », le script affiche une boîte de dialogue invitant l'utilisateur à saisir le traitement du texte sélectionné.
Lorsque le script obtient la sélection de l'utilisateur, il exécute le code ci-dessus, utilise VML pour encadrer le texte sélectionné, puis génère un calque sur lequel le contenu modifié est enregistré. Lorsque l'utilisateur sélectionne "Unmark", le texte qui a été marqué aura l'expression popID=XX sur l'événement de clic droit est une variable globale. Utilisez ce popID pour trouver la balise et la couche VML correspondantes dans le document. puis videz leur externalHTML, ce qui sert à annuler la marque !
Vous pouvez visiter la page ci-dessous pour vous rendre compte de la démarche.
Traces de modification de texte


Jusqu'à présent, toute l'introduction à VML a été écrite. Bien sûr, je pense qu’il y a encore des erreurs ici, qu’il y a aussi de nombreux défauts de compréhension et qu’il y a encore des défauts d’expression. Étant donné que VML n'est pas encore largement utilisé, mais qu'il est puissant, je pense qu'il est nécessaire que tout le monde comprenne la technologie VML, au moins pour faire savoir à tout le monde que beaucoup de choses peuvent réellement être réalisées en utilisant VML. Étudions ensemble !