聊聊开发富文本编辑器：range对象

• 《聊聊开发富文本编辑器：Range对象》
• 《聊聊开发富文本编辑器：execCommand方法》

• Range对象
• Range对象的属性和方法
• selection对象
• 常见案例代码

getCurrentRange = function() {   
  var sel = window.getSelection();   
  if (sel.getRangeAt && sel.rangeCount) {   
    return sel.getRangeAt(0);   
  }   
},   
saveSelection = function() {   
  selectedRange = getCurrentRange();   
},   
restoreSelection = function() {   
  var selection = window.getSelection();   
  if (selectedRange) {   
    try {   
      selection.removeAllRanges();   
    } catch (ex) {   
      document.body.createTextRange().select();   
      document.selection.empty();   
    }  
    selection.addRange(selectedRange);   
  }   
}

var selectedRange;
function saveSelection(){
  if(window.getSelection){
    /*主流的浏览器，包括chrome、Mozilla、Safari*/
    return window.getSelection();
  }else if(document.selection){
    /*IE下的处理*/
    return document.selection.createRange();
  }
  return null;
};

range = window.getSelection().getRangeAt(index)

当用户没有按下鼠标时候，该参数的值为0.  
当用户按下鼠标的时候，该参数值为1.  
当用户使用鼠标同时按住ctrl键时选取了一个或者多个区域时候，该参数值代表用户选取区域的数量。  
当用户取消区域的选取时，该属性值为1，代表页面上存在一个空的Range对象；

function saveSelection(){
  if(window.getSelection){
    /*主流的浏览器，包括chrome、Mozilla、Safari*/
    var sel = window.getSelection();
    if(sel.rangeCount > 0){
      return sel.getRangeAt(0);
    }
  }else if(document.selection){
    /*IE下的处理*/
    return document.selection.createRange();
  }
  return null;
};

document.createRange()：用于创建一个Range对象（范围）

document.body.createTextRange()：用于创建一个textRange对象

selectNode(node)：设置该范围的边界点，使它包含指定节点和指定节点的所有子孙节点。

selectNodeContents(node)：设置该范围的边界点，使它包含指定节点的子孙节点，但不包含指定节点本身。

deleteContents()：将Range对象中所包含的内容从页面中删除

setStart(node,index)：将指定节点中的某处位置指定为Range对象所代表区域的起点位置

setEnd(node,index)：将指定节点中的某处位置指定Range对象所代表区域的结束位置

setStartBefore(node)：将指定节点的起点位置指定为Range对象所代表区域的起点位置。

setStartAfter()：将指定节点的终点位置指定为Range对象所代表区域的起点位置。

setEndBefore()：将指定节点的起点位置指定为Range对象所代表区域的终点位置。

setEndAfter()： 将指定节点的终点位置指定为Range对象所代表区域的终点位置。

cloneRange()：对当前的Range对象进行复制，该方法返回一个复制的Range对象

cloneContents()：复制当前Range对象所代表区域中的HTML代码并返回新的DocumentFragment对象。

extractContents()：将Range对象所代表区域中的html代码克隆到一个DocumentFragment对象中，然后从页面中删除这段HTML代码

detach()：释放Range对象。

insertNode(node)：将指定的节点插入到某个Range对象所代表的区域中，插入位置为Range对象所代表区域的起点位置，如果该节点已经存在于页面中，该节点将被移动到Range对象代表的区域的起点处。

collpase(boolean)  用于使范围的边界点重合。当为true时，将范围的结束点设为与开始点相同的值；当为false时，将范围的开始点设为与结束点相同的值。

compareBoundaryPoints(how,sourceRange)：用来比较两个Range对象,返回1,0,-1（0表示相等，等于1时，当前范围在sourceRange之后，等于-1时，当前范围在sourceRange之前）

toString()：返回该范围表示的文档区域的纯文本内容。

START_TO_START	用指定范围的开始点与当前范围的开始点进行比较。  
START_TO_END	用指定范围的开始点与当前范围的结束点进行比较。  
END_TO_END	用指定范围的结束点与当前范围的结束点进行比较。  
END_TO_START	用指定范围的结束点与当前范围的开始点进行比较。

anchorNode：返回范围的开始点的Document节点，和range对象的endContainer作用一样。

anchorOffset：返回startContainer中的开始点位置，和range对象的startOffset作用一样。

focusNode：返回范围的结束点的Document节点，和range对象的endContainer作用一样。

focusOffset：返回endContainer中的结束点位置，和range对象的endOffset作用一样。

isCollapsed：范围的开始点与结束点是否重叠

removeAllRanges()：删除selection中原有的所有range

addRange(range)：将新的range添加到selection中

htmlText：返回字符串，为textRange的HTML内容，与innerHTML作用一样，只读 
text：返回字符串，为textRange的文本内容，相当于innerText，可读写。

moveStart("character",index)：选定范围的开始点向后移动index个字符

moveEnd("character",index)：选定范围的结束点向后移动index个字符

pasterHTML()：黏贴HTML到一个文本节点时，该文本节点自动分隔。

selectionStart：获取范围的开始点，可读写

selectionEnd：获取范围的结束点，可读写

selectionDiraction

select()：在焦点状态下，移动光标至第一个字符后面

setSelectionRange(start,end)：设置范围的开始点和结束点。

如果textbox没有selection时，selectionStart和selectionEnd相等，都是焦点的位置。
在使用setSelectionRange()时  
如果end小于start，会讲selectionStart和selectionEnd都设置为end；  
如果start和end参数大于textbox内容的长度（textbox.value.length），start和end都会设置为value属性的长度。

function saveSelection(){
  if(window.getSelection){
    /*主流的浏览器，包括chrome、Mozilla、Safari*/
    var sel = window.getSelection();
    if(sel.rangeCount > 0){
      return sel.getRangeAt(0);
    }
  }else if(document.selection){
    /*IE下的处理*/
    return document.selection.createRange();  
  }
  return null;
};

var selectedRange = saveSelection();  // 保存获取到的Range对象

function restoreSelection() {   
  var selection = window.getSelection();   
  if (selectedRange) {   
    try {   
      selection.removeAllRanges();  /*清空所有Range对象*/ 
    } catch (ex) {
      /*IE*/   
      document.body.createTextRange().select();   
      document.selection.empty();   
    };
    /*恢复保存的范围*/    
    selection.addRange(selectedRange);   
  }   
}

function selectAllText(elem){
  if(window.getSelection){
    elem.focus();
    var range = window.getSelection();
    range.selectAllChildren(elem);
    range.collapseToEnd();
  }else if(document.selection){
    var range = document.selection.createTextRange();
    range.moveToElementText(elem);
    range.collapse(false);
    range.select(); /*避免产生空格*/
  }
}