在内嵌窗格中使用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()再把它插入选区中。
javascript基础从小白到高手系列九百七十九:富文件选择
最新推荐文章于 2024-08-20 12:09:42 发布