我在使用使用“createLink”命令的所见即所得编辑器时尝试添加属性.我认为在浏览执行该命令后返回创建的节点是微不足道的.
事实证明,我只能在IE中获取这个新创建的节点.有任何想法吗？
以下代码演示了此问题(底部的调试日志显示每个浏览器中的不同输出)：
var getSelectedHTML = function() {
if ($.browser.msie) {
return this.getRange().htmlText;
} else {
var elem = this.getRange().cloneContents();
return $("<p/>").append($(elem)).html();
}
};
var getSelection = function() {
if ($.browser.msie) {
return this.editor.selection;
} else {
return this.iframe[0].contentDocument.defaultView.getSelection();
}
};
var getRange = function() {
var s = this.getSelection();
return (s.getRangeAt) ? s.getRangeAt(0) : s.createRange();
};
var getSelectedNode = function() {
var range = this.getRange();
var parent = range.commonAncestorContainer ? range.commonAncestorContainer :
range.parentElement ? range.parentElement():
range.item(0);
return parent;
};
// **** INSIDE SOME EVENT HANDLER ****
if ($.browser.msie) {
this.ec("createLink",true);
} else {
this.ec("createLink",false,prompt("Link URL:","http://"));
}
var linkNode = $(this.getSelectedNode());
linkNode.attr("rel","external");
$.log(linkNode.get(0).tagName);
// Gecko: "body"
// IE: "a"
// Webkit: "undefined"
$.log(this.getSelectedHTML());
// Gecko: "<a href="http://site.com">foo</a>"
// IE: "<A href="http://site.com" rel=external>foo</A>"
// Webkit: "foo"
$.log(this.getSelection());
// Gecko: "foo"
// IE: [object Selection]
// Webkit: "foo"
感谢您对此提供任何帮助,我已经在SO上搜索了相关问题但没有成功！
解决方法
这是我用来获取文本光标的“parentNode”的代码：
var getSelectedNode = function() {
var node,selection;
if (window.getSelection) {
selection = getSelection();
node = selection.anchorNode;
}
if (!node && document.selection) {
selection = document.selection
var range = selection.getRangeAt ? selection.getRangeAt(0) : selection.createRange();
node = range.commonAncestorContainer ? range.commonAncestorContainer :
range.parentElement ? range.parentElement() : range.item(0);
}
if (node) {
return (node.nodeName == "#text" ? node.parentNode : node);
}
};
我调整了我的IE方法来近似你的方法.经过测试和工作的IE8,FF3.6,Safari4,Chrome5.我设置了一个可以测试的jsbin preview.
