开发的功能主要涉及即时代码着色(CodeColoring)和语法提示(CodeHints)功能，稍后会总结功能开发中问题或提供源码。

以下是个人对Range对象的了解和常用操作的实例和总结：

Range对象

Range对象表示文档的连续范围区域，如用户在浏览器窗口中用鼠标拖动选中的区域。

dom标准Range对象

http://www.w3school.com.cn/xmldom/dom_range.asp

在ie中使用TextRange对象

http://www.hbcms.com/main/dhtml/objects/obj_textrange.html

range对象常用的建立方法

在开发中除了上述文档中的标准建立方法，大多如下方式建立

标准dom:

var range=window.getSelection().getRangeAt(0);

ie:

var range=document.selection.createRange();

注意：标准dom是从window中获取selection对象，而ie是从document对象中获取。

标准dom range对象(以下称dom rang)和ie的TextRange对象(以下称TextRange),在操作模式上有很大区别，可以说dom range是基于dom结构控制的，TextRange是基于文本节点字节控制的，阅读下面示例会更好理解这二者的操作模式。以下所说的range对象是指在html结构中进行选择和更改(designMode=on contentEditable=true状态下)操作，在textarea中的操作比这简单，不是当前的研究环境。

range对象的具体方法和属性请查看上边列出的相关api文档，下面对实际开发过程中常用功能讲解

1.区域选择 获取区域中文本

TextRange的区域选择

TextRange对象主要使用以下方法控制区域的选择：moveStart moveEnd move

这三个函数使用相同的参数语法:fn(sUnit [, iCount])

第一个参数是指移动的单位，可以使用的参数：character(字符)、word(词)、sentence(段落)、textedit(整个编辑区)

第二个参数指移动的数量单位，负数向所在位置之前移动，正数向所在位置之后移动。

在实际开发中一般使用character，其他几个参数在中文环境和html编辑时，和预想位置有偏差。

例1：TextRange选择光标前4个字符

var rg=document.selection.createRange();

rg.moveStart("character",-4);

rg.select();//显式选择文本区域，不调用此函数也可以获得选择的内容

var text=rg.text;//获得选择的文本

var htmlText=rg.htmlText;//获得选择文本的html代码

用rg.htmlText获得选择文本的html代码，但获得结果不尽人意，

如:aaaabb ,当选择aabb段时，.htmlTex返回的是aabb而不是aabb

其他常用位置控制函数：

collapse： 合并前后选择点，true为开始点，false为结尾点。

moveToPoint： 移动光标到坐标 moveToBookmark： 移动到书签。

dom range的区域选择

dom range对象选择区域主要以dom节点为为坐标，所有边界移动和区域选择函数都是以dom节点为参照的

setEnd()setStart()是控制范围的前边界点和后边界点位置的函数，

有两个参数，第一个参数是dom节点，第二个参数是偏移量，这个参数和TextRange.move中不同，是相对于dom节点的偏移量。

如：有文字节点node1 nodeValue是aaabbbccc,setStart(node1,3)则设置开始位置在字符a、b之间

那如何像例1一样选择光标前4个字符呢，这需要了解dom range对象的几个属性：

endContainer 包含范围的结束点的 dom节点。

endOffset endContainer 中的结束点位置。

startContainer 包含范围的开始点的 dom节点。

startOffset startContainer 中的开始点位置。

例2：dom range选择光标前4个字符

var rg=window.getSelection().getRangeAt(0);

rg.setStart(rg.startContainer,rg.startOffset-4);//获得当前range strat所在节点和偏移量，计算后作为参数

//在调用setStart后即显式选择，与TextRange不同

var text=rg.toString();//获得选择文本

rg.collapse(false);//collapse函数与TextRange.collapse相同

例2中range选择范围操作适用于单一的文本内容，如果是html内容就需要进一步计算才能正确得到，总的来看dom range在复杂dom结 构中进行相对范围选择是比较麻烦的。

另外，dom range没有直接的方法获得选择内容的html代码。在html可编辑状态下可以通过surroundContents()方法用一个span之类的标签包裹住内容后再通过innerHTML获得内容，但是在选择范围边界点在html开始和结束标签内时(如：123边界点在a标签内)会抛出一个异常。

以下是测试用完整代码，包含例1和例2的代码和一个测试用html可编辑区。

New Document

2.插入文本

TextRange插入文本

使用TextRang插入文本比较简单，直接调用pasteHTML()方法就可以直接插入html代码。

Dom Range插入文本

使用Dom Range插入文本相对复杂一些，Dom Range对象使用insertNode()方法实现插入，但是insertNode是在Range的开始位置插入一 个节点，参数是一个节点而不是字符串，我们可以通过插入文本节点实现，如果使用document.createTextNode建立文本节点，文本中的HTML标记会自动转换，但空格是个特例，并不会自动转换为 ,这使我在开发代码缩进时很头疼，最后解决的办法，是使用Rang.createContextualFragment,这个方法虽然在文档中没有找到，但测试多个浏览器都支持此方法,此方法返回的是一个DocumentFragment对

象。以下是示例代码：

例3：

Js代码

var rg = window.getSelection().getRangeAt(0);

var fragment = rg.createContextualFragment(str);

rg.insertNode(fragment);

这段代码虽然实现插入了文本，但是光标位置却在插入文本之前，因为“insertNode是在Range的开始位置插入一 个节点”，接下来我们实现光标的控制，这需要设置Range对象的位置，并更新Selection对象的Range，代码如下：

例4：

Js代码

var selection=window.getSelection();

var rg=selection.getRangeAt(0);

var fragment = rg.createContextualFragment(str);

var oLastNode = fragment.lastChild; //获得DocumentFragment的末尾位置

rg.insertNode(fragment);

rg.setEndAfter(oLastNode);//设置末尾位置

rg.collapse(false);//合并范围至末尾

selection.removeAllRanges();//清除range

selection.addRange(rg);//设置range

以下是一个代码缩进功能的部分代码作为示例：按tab键时会在当前位置，插入4个空格，解决在编辑时不能输入tab的问题。实际应用中的功能包括多行缩进和自动缩进。

New Document

3.替换

综合介绍的选择和插入的方法可完成替换功能，TextRange比较简单pasteHTML方法会替换原来Range选中的文本，Dom Range的insertNode不会删除原range选中内容，需要调用deleteContents()方法先删除选择内容。

以上介绍了使用Range对象常用的区域选择、插入文本和替换操作，希望在大家开发在线编辑器时有所帮助，粗略之处还请见谅。