Text modification retention marks _VML related

Source: Internet
Author: User
In office automation, document Audit, it is necessary to use the left Mark operation, is to change the things directly in the text display, and do not directly change it. In the past, I did not use VML to do, very reluctant to change the color of the text with TextRange, and then add a layer to display the change information. The first modification can also be implemented, but cannot be modified again, because, the second time, the original created objects are gone, and these objects are obtained through the select operation, the user does not choose, the script will not be able to create those objects.
Not long ago, I thought of VML and started to think it was impossible, but I found TextRange object a very powerful method getclientrects (), which returns the rectangle information for each row contained by the TextRange object. This means that if you use a mouse table to select a piece of text, the text is automatically highlighted so that it appears to be an irregular shape of a block of rectangles. The Getclientrects method allows you to get the coordinates of these rectangles and the height of the width, so that you can select the text in the coat layer of the VML drawing rectangle, Oh my god ... It's really cool. When I first saw it, the excitement of holding the small white (cat) Full room jumping. Next, you'll talk about TextRange objects and the combination of getclientrects and VML painting traces:
TextRange objects, as the name implies, the text area, which is part of the page, can be text or images and other paragraph formatting. All that can be selected with the mouse can become TextRange objects. IE4 when the time came. TextRange has a powerful way of ExecCommand (), which can execute many commands to dynamically change the content and style of a Web page. There are two ways to create a TextRange object: A user chooses a text and can use Var otextrange=document.selection.createrange (); There is also the kind of direct document created Textrange:var Otextrange=document.createtextrane (). Do not know that there is no notice, two ways to use the function is not the same, the first because the province is the text, all use Createrange (), the second cannot determine whether all the text, all, must be used createTextRange ().
Using Getclientrects returned is a Textrectangle object, it is a collection, no subset has four properties Bottom,top,left,right, is the coordinates of two corners, this coordinate value is relative to the page, so you can directly apply to In VML. function Createrect (num)
{
var newmark=document.createelement ("");
Edit.insertbefore (NewMark);
var orcts = otemprange.getclientrects ();//otemprange is a TextRange object
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= "";
}
}

The rest of the code is gone, and I want to talk about the entire script execution process. First, the user selects a paragraph of text with the mouse, and then the script immediately creates the selected text as a temporary TextRange object, and execcommand the background color of the text to make a comparison. When the user right-click, the script checks to the user's event source, if the temporary TextRange object exists, the menu will display "Mark Select" This item, if the event source is already marked text, the menu will display "unmark" this item. When the user opinion selects "Mark selected", the script pops up the dialog box, prompting the user to input the processing of the selected text.
The script gets the user's choice, executes the above code, uses the VML to put the selected text box up, and then generates a layer, which records the modified content. When the user chooses the "unmark", the text itself has been marked with a POPID=XX expression on the right-click event, Popid is a global variable, through this popid to the Document to find the corresponding VML tags and layers, and then make their outerhtml empty, It's the purpose of the cancellation tag!
You can access the following page to implement the process.
Text modification retention Marks


So far, the introduction of VML has all been written. Of course, I think there are mistakes in this, there is also a lack of understanding, there is still lack of expression of the place. Because the VML application is not very common, but powerful, I think it is necessary for everyone to understand the VML technology, at least let everyone know that many things can actually be done with VML. Let's study together!
  • Related Article

    Contact Us

    The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

    If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

    A Free Trial That Lets You Build Big!

    Start building with 50+ products and up to 12 months usage for Elastic Compute Service

    • Sales Support

      1 on 1 presale consultation

    • After-Sales Support

      24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.