首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >Rangy - insertNode IE <9不在插入符号处插入

问Rangy - insertNode IE <9不在插入符号处插入
EN

Stack Overflow用户
提问于 2013-06-04 23:29:28
回答 1查看 877关注 0票数 0

为了兼容,我使用Rangy在WYSIWYG编辑器(uEditor)中插入节点。

它可以工作,但是在IE <9中,插入的节点被放在包含元素(iframe)的开头,而不是插入符号位置。只有在没有文本选择的情况下才会发生这种情况。

我已经创建了一个小提琴,它很粗糙,但有相同的效果,尽管使用了div而不是uEditor使用的jquery/iframe之类的东西。

这就是问题所在:http://jsfiddle.net/RvNT3/

对于IE < 9:http://jsfiddle.net/RvNT3/embedded/result/

我知道小提琴并不能代表我的实际代码,最终它可能取决于浏览器。但是,如果有一种方法可以让它工作(插入到插入符号而不选择文本),它可能就能做到这一点。

小提琴代码:

代码语言:javascript
复制
<!--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 */
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2013-06-05 16:46:42

问题是,在insertNode()调用发生之前,选择就被销毁了。click事件来得太晚了: iframe已经失去了焦点,在IE中也失去了插入符号的位置。您需要更早地执行此操作,否则会阻止单击将焦点从iframe移开。下面使用的是mousedown事件而不是click。

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

票数 3
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/16921752

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档