为了兼容性,我使用 Rangy 在 WYSIWYG 编辑器 (uEditor) 中插入节点。
它可以工作,但是在 IE < 9 中,插入的节点被放置在包含元素 (iframe) 的开头,而不是插入符号位置。仅当没有文本选择时才会发生这种情况。
我创建了一个 fiddle ,它很粗糙,但具有相同的效果,尽管使用 div 而不是 uEditor 使用的 jquery/iframe 东西。
这是 fiddle :http://jsfiddle.net/RvNT3/
对于 IE < 9:http://jsfiddle.net/RvNT3/embedded/result/
我知道 fiddle 并不代表我的实际代码,它最终可能取决于浏览器。但是,如果有一种方法可以让它工作(在插入符号处插入而不选择文本),那可能就可以解决问题。
fiddle 代码:
<!--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 */
最佳答案
问题是在 insertNode()
调用发生之前选择已被销毁。 click
事件来得太晚了:iframe 已经失去焦点,并且在 IE 中也失去了插入符位置。您需要尽早执行此操作或防止单击将焦点从 iframe 移开。以下使用 mousedown
事件而不是 click
。
关于javascript - Rangy - insertNode IE < 9 不会在插入符处插入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16921752/