In office automation and official documents review, trace-keeping operations are required, which means displaying the modified things directly on the text without directly changing them. In the past, I didn't use VML to do it, so I reluctantly used TextRange to change the color of the text, and then added a layer to display the change information. The first modification can be implemented, but it cannot be modified again, because when the second modification, the original created objects disappeared, and these objects are obtained through Select operations. If the user does not choose, the script will not be able to create those objects.
Not long ago, I thought of VML and thought it was impossible at first, but I discovered a very powerful method for the TextRange object getClientRects(), which can return rectangular information for each row contained in the TextRange object. This means that if you use the mouse table to select a piece of text, the text will be automatically highlighted, which will look like an irregular figure composed of rectangles. The getClientRects method can get the coordinates and heights of these rectangles, so that you can draw a VML rectangle on the selected text coat. Oh my god... It's so cool. When I first saw it, I was excited to hold Xiaobai (cat) and jump around the room. Next, let’s talk about the TextRange object and the combination of getClientRects and VML drawing traces:
TextRange object, as the name suggests, is a text area, which is part of the area on the web page, which can be text or image and other paragraph formats. All that can be selected with the mouse can be turned into a TextRange object. It appears when IE4. TextRange has a powerful method, execCommand(), which can execute many commands and dynamically change the content and styles of the web page. There are generally two ways to create a TextRange object. One is that the user selects a piece of text and can use var oTextRange=(); the other is to directly create the document into TextRange :var oTextRange=(). I don't know if I have noticed that the functions used in the two methods are different. The first is because this province is text. All use createRange(), and the second is not sure whether they are text. All must use createTextRange().
Use getClientRects to return a TextRectangle object, which is a collection, and no subset has four attributes bottom, top, left, right, which are the coordinates of two corners. This coordinate value is relative to the page, so it can be directly applied to VML.
I won’t talk about other codes anymore, I want to talk about the entire script execution process. First, the user selects a text with the mouse, and then the script immediately creates the selected text into a temporary TextRange object, and changes the background color of the text through execCommand for comparison. When the user right-clicks, the script checks the user's event source. If the temporary TextRange object exists, the item "Tag Selection" will be displayed on the menu. If the event source is already marked text, the item "Cancel Tag" will be displayed on the menu. When the user comment selects "Tag Selected", a dialog box pops up in the script prompts the user for inputting the processing of the selected text.
When the script gets the user's choice, it executes the above code, uses VML to frame the selected text, and then generates a layer, which records the modified content. When the user selects "Unmark", the text that has been marked itself has a popID=XX expression on the right-click event. popID is a global variable. Through this popID, you can find the corresponding VML tags and layers in the Document, and then make their outerHTML empty, which will serve the purpose of canceling the tag!
You can access the following page to implement the process.
Text modification leaves traces
So far, the introduction to VML has been written. Of course, I think there are still mistakes here, there are also shortcomings in understanding, and there are still some shortcomings in expression. Since VML applications are not very common, but they are powerful, I think it is necessary to let everyone understand VML technology, at least let everyone know that many things can actually be done in VML. Let’s study together!
Not long ago, I thought of VML and thought it was impossible at first, but I discovered a very powerful method for the TextRange object getClientRects(), which can return rectangular information for each row contained in the TextRange object. This means that if you use the mouse table to select a piece of text, the text will be automatically highlighted, which will look like an irregular figure composed of rectangles. The getClientRects method can get the coordinates and heights of these rectangles, so that you can draw a VML rectangle on the selected text coat. Oh my god... It's so cool. When I first saw it, I was excited to hold Xiaobai (cat) and jump around the room. Next, let’s talk about the TextRange object and the combination of getClientRects and VML drawing traces:
TextRange object, as the name suggests, is a text area, which is part of the area on the web page, which can be text or image and other paragraph formats. All that can be selected with the mouse can be turned into a TextRange object. It appears when IE4. TextRange has a powerful method, execCommand(), which can execute many commands and dynamically change the content and styles of the web page. There are generally two ways to create a TextRange object. One is that the user selects a piece of text and can use var oTextRange=(); the other is to directly create the document into TextRange :var oTextRange=(). I don't know if I have noticed that the functions used in the two methods are different. The first is because this province is text. All use createRange(), and the second is not sure whether they are text. All must use createTextRange().
Use getClientRects to return a TextRectangle object, which is a collection, and no subset has four attributes bottom, top, left, right, which are the coordinates of two corners. This coordinate value is relative to the page, so it can be directly applied to VML.
function createRect(num)
{
var newMark=("<div id='mark"+num+"'></div>");
(newMark);
var oRcts = ();//oTempRange is a TextRange object
for(var i=0;i<;i++)
{
var t=oRcts[i].top;
var l=oRcts[i].left;
var r=oRcts[i].right;
var b=oRcts[i].bottom;
var newRect=("<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>");
(newRect);
=t+-3;
=l-2;
=r-l;
=b-t;
="";
}
}
{
var newMark=("<div id='mark"+num+"'></div>");
(newMark);
var oRcts = ();//oTempRange is a TextRange object
for(var i=0;i<;i++)
{
var t=oRcts[i].top;
var l=oRcts[i].left;
var r=oRcts[i].right;
var b=oRcts[i].bottom;
var newRect=("<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>");
(newRect);
=t+-3;
=l-2;
=r-l;
=b-t;
="";
}
}
I won’t talk about other codes anymore, I want to talk about the entire script execution process. First, the user selects a text with the mouse, and then the script immediately creates the selected text into a temporary TextRange object, and changes the background color of the text through execCommand for comparison. When the user right-clicks, the script checks the user's event source. If the temporary TextRange object exists, the item "Tag Selection" will be displayed on the menu. If the event source is already marked text, the item "Cancel Tag" will be displayed on the menu. When the user comment selects "Tag Selected", a dialog box pops up in the script prompts the user for inputting the processing of the selected text.
When the script gets the user's choice, it executes the above code, uses VML to frame the selected text, and then generates a layer, which records the modified content. When the user selects "Unmark", the text that has been marked itself has a popID=XX expression on the right-click event. popID is a global variable. Through this popID, you can find the corresponding VML tags and layers in the Document, and then make their outerHTML empty, which will serve the purpose of canceling the tag!
You can access the following page to implement the process.
Text modification leaves traces
So far, the introduction to VML has been written. Of course, I think there are still mistakes here, there are also shortcomings in understanding, and there are still some shortcomings in expression. Since VML applications are not very common, but they are powerful, I think it is necessary to let everyone understand VML technology, at least let everyone know that many things can actually be done in VML. Let’s study together!