javascript基础从小白到高手系列六百七十九：富文件选择

在内嵌窗格中使用getSelection()方法，可以获得富文本编辑器的选区。这个方法暴露在
document 和window 对象上，返回表示当前选中文本的Selection 对象。每个Selection 对象都拥
有以下属性。
 anchorNode：选区开始的节点。
 anchorOffset：在anchorNode 中，从开头到选区开始跳过的字符数。
 focusNode：选区结束的节点。
 focusOffset：focusNode 中包含在选区内的字符数。
 isCollapsed：布尔值，表示选区起点和终点是否在同一个地方。
 rangeCount：选区中包含的DOM 范围数量。
Selection 的属性并没有包含很多有用的信息。好在它的以下方法提供了更多信息，并允许操作
选区。
 addRange(range)：把给定的DOM 范围添加到选区。
 collapse(node, offset)：将选区折叠到给定节点中给定的文本偏移处。
 collapseToEnd()：将选区折叠到终点。
 collapseToStart()：将选区折叠到起点。
 containsNode(node)：确定给定节点是否包含在选区中。
 deleteFromDocument()：从文档中删除选区文本。与执行execCommand(“delete”, false,
null)命令结果相同。
 extend(node, offset)：通过将focusNode 和focusOffset 移动到指定值来扩展选区。
 getRangeAt(index)：返回选区中指定索引处的DOM范围。
 removeAllRanges()：从选区中移除所有DOM 范围。这实际上会移除选区，因为选区中至少
要包含一个范围。
 removeRange(range)：从选区中移除指定的DOM 范围。
 selectAllChildren(node)：清除选区并选择给定节点的所有子节点。
 toString()：返回选区中的文本内容。
Selection 对象的这个方法极其强大，充分利用了DOM 范围来管理选区。操纵DOM范围可以实
现比execCommand()更细粒度的控制，因为可以直接对选中文本的DOM 内容进行操作。来看下面的
例子：
let selection = frames[“richedit”].getSelection();
// 取得选中的文本
let selectedText = selection.toString();
// 取得表示选区的范围
let range = selection.getRangeAt(0);
// 高亮选中的文本
let span = frames[“richedit”].document.createElement(“span”);
span.style.backgroundColor = “yellow”;
range.surroundContents(span);
以上代码会在富文本编辑器中给选中文本添加黄色高亮背景。实现方式是在默认选区使用DOM范
围，用surroundContents()方法给选中文本添加背景为黄色的标签。
getSelection()方法在HTML5 中进行了标准化，IE9 以及Firefox、Safari、Chrome 和Opera 的所
有现代版本中都实现了这个方法。
IE8 及更早版本不支持DOM 范围，不过它们允许通过专有的selection 对象操作选中的文本。如
本章前面所讨论的，这个selection 对象是document 的属性。要取得富文本编辑器中选中的文本，
必须先创建一个文本范围，然后再访问其text 属性：
let range = frames[“richedit”].document.selection.createRange();
let selectedText = range.text;
使用IE 文本范围执行HTML 操作不像使用DOM 范围那么可靠，不过也是可以做到的。要实现与
使用DOM 范围一样的高亮效果，可以组合使用htmlText 属性和pasteHTML()方法：
let range = frames[“richedit”].document.selection.createRange();
range.pasteHTML(
‘${range.htmlText}’);
以上代码使用htmlText 取得了当前选区的HTML，然后用一个标签将其包围起来并通过
pasteHTML()再把它插入选区中。