The features developed mainly involve instant code coloring (codecoloring) and Syntax hints (codehints), which will be summarized later in the feature development issue or provide source code.
The following are examples and summaries of the individual's understanding of the Range object and common operations:
Range Object
A Range object represents a contiguous range of documents, such as a user dragging the selected area with the mouse in a browser window.
DOM Standard Range Object
Http://www.w3school.com.cn/xmldom/dom_range.asp
Using the TextRange object in IE
Http://www.hbcms.com/main/dhtml/objects/obj_textrange.html
A common method of building a Range object
In addition to the standard establishment methods in the above documents in development, most of the following methods are established
Standard DOM:
var range=window.getselection (). Getrangeat (0);
Ie:
var range=document.selection.createrange ();
Note: The standard DOM gets the Selection object from the window, and IE is fetched from the Document object.
The standard DOM Range object (referred to as the DOM rang) and the TextRange object of IE (hereinafter referred to as TextRange) are very different in operational mode, so that the DOM range is based on DOM structure control, TextRange is based on text node byte control , read the following example to better understand the mode of operation of both. The Range object below refers to the choice and change in the HTML structure (Designmode=on contenteditable=true State) operation, the operation in textarea is simpler than this, not the current research environment.
The specific methods and properties of the Range object look at the relevant API documentation listed above and explain the common features in the actual development process
1. Region selection get the text in the area
Area selection of TextRange
The TextRange object mainly uses the following methods to control the selection of the region: MoveStart moveEnd move
These three functions use the same parameter syntax: FN (sunit [, icount])
The first parameter refers to the unit of movement, the parameters that can be used: character (character), Word (word), sentence (paragraph), TextEdit (entire edit area)
The second parameter refers to the number of units that are moved, the negative numbers move before the location, and the positive numbers move after the location.
In the actual development of the general use of character, the other several parameters in the Chinese environment and HTML editing, and the expected location is biased.
Example 1:textrange Select 4 characters before the cursor
Copy Code code as follows:
var rg=document.selection.createrange ();
Rg.movestart ("character",-4);
Rg.select ()//explicitly select the text area, and do not call this function to get the selected content
var text=rg.text;//gets the selected text
var htmltext=rg.htmltext;//gets the HTML code for the selected text
Use Rg.htmltext to get the HTML code for the selected text, but the results are unsatisfactory,
For example: <B>AAAA</B>BB, when the AABB segment is selected,. Htmltex returns <B>AA</B>BB instead of AA</B>BB
Other common Position control functions:
Collapse: Select points before and after merging, true to start point, false to end point.
moveToPoint: Move cursor to coordinate movetobookmark: move to Bookmark.
Range selection for Dom range
The DOM Range object selection is mainly based on the DOM node, and all boundary movements and region selection functions are referenced by DOM nodes
SetEnd () Setstart () is a function that controls the position of the front and rear bounds of the range.
There are two parameters, the first parameter is the DOM node, the second is the offset, which is different from the textrange.move, and is the offset from the DOM node.
Such as: There is a text node Node1 nodevalue is Aaabbbccc,setstart (node1,3) to set the starting position between the characters a, b
How do you choose the first 4 characters of the cursor like Example 1, which requires understanding several properties of the DOM Range object:
EndContainer the DOM node that contains the end point of the range.
The end point position in the Endoffset EndContainer.
Startcontainer the DOM node that contains the start point of the range.
The start point position in the Startoffset Startcontainer.
Example 2:dom range Select 4 characters before the cursor
Copy Code code as follows:
var rg=window.getselection (). Getrangeat (0);
Rg.setstart (rg.startcontainer,rg.startoffset-4)//Gets the node and offset of the current range Strat, calculated as a parameter
Explicit selection after calling Setstart, unlike TextRange
var text=rg.tostring ();//Get selected text
Rg.collapse (false);//collapse function is the same as Textrange.collapse
In Example 2, the range selection operation applies to a single text content, and if the HTML content requires further calculation to get it right, overall DOM range selection in a complex DOM structure is more cumbersome.
In addition, Dom range does not have a direct way to get the HTML code for the selected content. In HTML editable state you can use a surroundcontents () method to wrap the content with a label such as a span and then get the content through innerHTML, but when the selection boundary point is within the HTML start and end tags (for example: <a>123 </a> boundary points within a label) throws an exception.
Here is the test with the complete code, the code containing example 1 and Example 2, and a test HTML editable region.
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 transitional//en" >
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
</HEAD>
<BODY>
<script language= "JavaScript" >
<!--
Window.onload=function () {
var iframecontent= "";
var divcontent= "";
var Divchange=false;
var Iframechange=false;
var $=function (s) {return document.getElementById (s);}
$ ("Ifram_div"). innerhtml+= ' <div id= "infoiframe" >iframe</div><iframe id= "Youretextarea" style= " height:200px;width:99%, "class=" _editbox "></iframe>";
var fw=$ ("Youretextarea"). Contentwindow;
var f=fw.document;
F.designmode = ' on ';
F.contenteditable = true;
F.open ();
F.writeln (' F.close ();
if (f.attachevent) {
F.attachevent ("onkeyup", fun1);
}else{
Fw.addeventlistener ("KeyUp", fun1,true);
}
function Fun1 () {
if (f.selection) {
var rg=f.selection.createrange ();
Rg.movestart ("character",-4);
Rg.select ()//explicitly select the text area, and do not call this function to get the selected content
var text=rg.text;//gets the selected text
var htmltext=rg.htmltext;//gets the HTML code for the selected text
alert (text);
}else{
var rg=fw.getselection (). Getrangeat (0);
Rg.setstart (rg.startcontainer,rg.startoffset-4)//Gets the node and offset of the current range Strat, calculated as a parameter
Explicit selection after calling Setstart, unlike TextRange
var text=rg.tostring ();//Get selected text
Rg.collapse (false);//collapse function is the same as Textrange.collapse
alert (text);
}
}
}
-->
</SCRIPT>
<div id= "Ifram_div" ></div>
</BODY>
</HTML>
Current 1/2 page
12 Next read the full text
