使用javascript扩展DOM范围以覆盖部分选定的节点 [英] Use javascript to extend a DOM Range to cover partially selected nodes
问题描述
我的JavaScript代码需要包装一些选择的节点contentEditable div容器。
我正在使用 MDC 中描述的方法。但是，由于我需要将div容器内容同步到我的XML DOM，我想避免部分选择，如 w3c范围：
< BODY>< H1&标题& H1>< P> Blah xyz。< / P>< / BODY
........ ^ ---------------- ^ ............
这个选择从H1开始，在P结束，我希望它包括H1，P完全。
有没有简单的方法来扩展选择，以完全覆盖部分选择的孩子？
基本上我想使用range.surroundContents（），而不会遇到异常。
（代码不需要使用opera / IE） / p>
查看MDC文档，我管理做这样的事情：
Selection.prototype.coverAll = function（）{
var ranges = []; （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（）; （var i = 0; i< ranges.length; i ++）{
this.addRange（ranges [i]）;
}
return;
};
您可以在这里尝试： http://jsfiddle.net/GFuX6/9/
编辑：
更新了浏览器正确显示增强的选择。即使选择包含多个范围（使用Ctrl），也可以执行所需的操作。
要使几个部分节点粗体，这里有一个解决方案：
Selection.prototype.boldinize = function（）{
this.coverAll（）; （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）;
}
}
};
I'm working on a rich text editor like web application, basically a XML editor written in javascript.
My javascript code needs to wrap a selection of nodes from the contentEditable div container. I'm using the methods described at MDC. But since I need to synchronize the div containers content to my XML DOM I would like to avoid partial selections as described in w3c ranges:
<BODY><H1>Title</H1><P>Blah xyz.</P></BODY
............^----------------^............
This selection starts inside H1 and ends inside P, I'd like it to include H1,P completely.
Is there an easy way to extend the selection to cover partially selected children completely? Basically I want to use range.surroundContents() without running into an exception.
(The code doesn't need to work with opera/IE)
Looking at the MDC documentation, I manage do something like this:
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;
};
You can try it here : http://jsfiddle.net/GFuX6/9/
edit: Updated to have the browser display correctly the augmented selection. It does what you asked for, even if the selection contains several ranges (with Ctrl).
To make several partial nodes Bold, here is a solution:
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扩展DOM范围以覆盖部分选定的节点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
