javascript - Rangy - insertNode IE < 9 不会在插入符处插入

Question

为了兼容性，我使用 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 = "&nbsp";
            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 */

Answer 1

问题是在 insertNode() 调用发生之前选择已被销毁。 click 事件来得太晚了:iframe 已经失去焦点，并且在 IE 中也失去了插入符位置。您需要尽早执行此操作或防止单击将焦点从 iframe 移开。以下使用 mousedown 事件而不是 click。

http://jsfiddle.net/RvNT3/1/embedded/result/