Javascript 在contentEditable div中获取光标位置，打开弹出窗口，然后在光标位置插入新的html

我正在使用内容可编辑的div构建一个非常简单的富文本编辑器。如果用户在div内单击，然后单击链接管理器按钮，并在模式popop中输入一些链接文本和地址，然后单击确定，我想建立一个超链接，并将其插入到div中以前选定的光标位置。我尝试捕获选定范围并缓存它（通过div onblur事件），然后将我的新内容插入该范围，但它总是在内容可编辑区域的开始处转储新内容，例如

var precretange=null；
函数CacheRange（）{
sel=win.getSelection（）；
如果（选择范围计数>0）{
precretange=sel.getRangeAt（0）；
}
}
函数CreateLink（）{
//获取用户输入
var linkname=“blah”；
var linkaddr=”http://blah.com";
var frag=“”；
var rtDiv=document.getElementById（“myDiv”）；
rtDiv.focus（）；
if（precretange==null）{
rtDiv.innerHTML+=“”+frag；
}否则{
precretrange.insertNode（$（frag）[0]）；
}
}

对于那些感兴趣的人，我发现了一个IE怪癖。如果您单击一个非按钮元素（例如，并用字体awesome标记seyled），然后尝试执行我正在尝试执行的操作，即缓存所选范围，然后将新元素放回其顶部，在ie中，它会将新元素插入到您上次单击的内容上。但是，如果您使用按钮，它可以正常工作。想想看。Chrome没有问题。

检查浏览器控制台，你的代码抛出错误。