我正在开发像 Web 应用程序这样的富文本编辑器，基本上是用 javascript 编写的 XML 编辑器。
我的 javascript 代码需要包装来自 contentEditable div 容器的节点选择。 我正在使用 MDC 中描述的方法.但是因为我需要将 div 容器内容同步到我的 XML DOM，所以我想避免部分选择，如 w3c ranges 中所述。 :
<BODY><H1>Title</H1><P>Blah xyz.</P></BODY
............^----------------^............
这个选择从 H1 开始到 P 结束，我希望它完全包括 H1,P。
有没有一种简单的方法可以将选择范围扩大到完全覆盖部分选择的 child ？ 基本上我想使用 range.surroundContents() 而不会遇到异常。
(代码不需要与 opera/IE 一起工作)
最佳答案
查看 MDC 文档，我设法做了这样的事情:
Selection.prototype.coverAll = function() {
var ranges = [];
for(var i=0; i<this.rangeCount; i++) {
var range = this.getRangeAt(i);
while(range.startContainer.nodeType == 3
|| range.startContainer.childNodes.length == 1)
range.setStartBefore(range.startContainer);
while(range.endContainer.nodeType == 3
|| range.endContainer.childNodes.length == 1)
range.setEndAfter(range.endContainer);
ranges.push(range);
}
this.removeAllRanges();
for(var i=0; i<ranges.length; i++) {
this.addRange(ranges[i]);
}
return;
};
您可以在这里尝试:http://jsfiddle.net/GFuX6/9/
编辑: 更新以使浏览器正确显示增强的选择。它会按照您的要求进行操作，即使选择包含多个范围(使用 Ctrl)也是如此。
要使几个部分节点加粗，这里有一个解决方案:
Selection.prototype.boldinize = function() {
this.coverAll();
for(var i=0; i<this.rangeCount; i++) {
var range = this.getRangeAt(i);
var parent = range.commonAncestorContainer;
var b = document.createElement('b');
if(parent.nodeType == 3) {
range.surroundContents(b);
} else {
var content = range.extractContents();
b.appendChild(content);
range.insertNode(b);
}
}
};
关于javascript - 使用 javascript 扩展 DOM 范围以覆盖部分选定的节点，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/2477192/