0

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

1 回答 1

3

问题是选择在insertNode()调用发生之前就被破坏了。事件click为时已晚：iframe 已经失去焦点，在 IE 中也失去了插入符号的位置。您需要提前执行此操作或防止单击将焦点从 iframe 移开。以下使用mousedown事件而不是click.

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

于 2013-06-05T08:46:42.483 回答