Rangy - insertNode IE <9不插入插入符號

Question

我正在使用Rangy兼容性來在所見即所得編輯器（uEditor）中插入節點。

它可以工作，但是在IE <中，插入的節點位於包含元素（iframe）的開始位置，而不是在插入位置。這隻發生在沒有文本選擇的情況下。

我創建了一個小提琴，雖然使用div而不是jQuery/iframe，但uEditor使用的效果卻很粗糙，但效果相同。

這裏的小提琴：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 = "&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/