为了兼容,我使用Rangy在WYSIWYG编辑器(uEditor)中插入节点。
它可以工作,但是在IE <9中,插入的节点被放在包含元素(iframe)的开头,而不是插入符号位置。只有在没有文本选择的情况下才会发生这种情况。
我已经创建了一个小提琴,它很粗糙,但有相同的效果,尽管使用了div而不是uEditor使用的jquery/iframe之类的东西。
这就是问题所在:http://jsfiddle.net/RvNT3/
对于IE < 9:http://jsfiddle.net/RvNT3/embedded/result/
我知道小提琴并不能代表我的实际代码,最终它可能取决于浏览器。但是,如果有一种方法可以让它工作(插入到插入符号而不选择文本),它可能就能做到这一点。
小提琴代码:
<!--HTML-->
<div id="pageFrame" >
Some text
</div>
<br/>
<input type="button" id="clickNode" value="Insert Node" />
<!--End HTML-->
//Javascript
var theDiv = document.getElementById('pageFrame');
theDiv.contentEditable = true;
document.getElementById('clickNode').onclick = ( function() {
addTheNode();
});
function addTheNode()
{
rangy.init();
var range = rangy.getSelection().getRangeAt(0);
alert(range);
var newNode = document.createElement("code");
newNode.className = "code";
newNode.contentEditable = false;
newNode.innerHTML = " ";
range.insertNode(newNode);
}
//End Javascript
/*CSS*/
body { font-family: verdana; font-size:11px;}
div { border:1px solid #000000; padding:5px; }
code { display:block; border:1px solid #ff0000 }
/*End CSS */发布于 2013-06-05 16:46:42
问题是,在insertNode()调用发生之前,选择就被销毁了。click事件来得太晚了: iframe已经失去了焦点,在IE中也失去了插入符号的位置。您需要更早地执行此操作,否则会阻止单击将焦点从iframe移开。下面使用的是mousedown事件而不是click。
https://stackoverflow.com/questions/16921752
复制相似问题