兰吉-insertNode IE <9不会在插入符处插入

Question

I am using Rangy for compatibility to insert a node within a WYSIWYG editor (uEditor).

It works, however in IE < 9 the inserted node is placed at the beginning of the containing element (iframe) instead of at the caret position. This only happens when there is no text selection.

I've created a fiddle, it's crude but has the same effects though using a div not the jquery/iframe thingy the uEditor uses.

Here's the fiddle: http://jsfiddle.net/RvNT3/

And for IE < 9: http://jsfiddle.net/RvNT3/embedded/result/

I know the fiddle isn't representative of my actual code, and it may be down to the browser ultimately. But if there's a way to get it to work (Insert at caret without text selection) that may just do the trick.

fiddle code:

<!--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

The problem is that the selection is destroyed before the insertNode() call happens. The click event is too late: the iframe has already lost focus and in IE has also lost the caret position. You need to do it earlier or prevent the click from moving the focus away from the iframe. The following uses the mousedown event instead of click .

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