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

Question

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

var preCaretRange = null;

function CacheRange() {

  sel = win.getSelection();
  if (sel.rangeCount > 0) {

    preCaretRange = sel.getRangeAt(0);
  }

}



function CreateLink() {
  // get user input
  var linkname = "blah";
  var linkaddr = "http://blah.com";

  var frag = "<a href=\"" + linkaddr + "\" target='_new'>" + linkname + "</a>";

  var rtDiv = document.getElementById("myDiv");
  rtDiv.focus();

  if (preCaretRange == null) {
    rtDiv.innerHTML += " " + frag;
  } else {

    preCaretRange.insertNode($(frag)[0]);


  }

}

<div id=mydiv contenteditable=true onblur="CacheRange(this)"></div>
<input type='button' onclick='CreateLink()' />

新的 html 标签被插入到内容的开头，而不是光标位置。我遵循了很多如何执行此操作的示例，但我的范围不会将其新内容转储到正确的位置。希望有人能发现问题。

Answer 1

对于那些感兴趣的人，我发现了一个 IE 怪癖。如果您单击 non-button 元素（例如，并用 font-awesome 标记 seyled），并尝试做我正在尝试做的事情，即缓存所选范围，然后放回一个新元素它的顶部，在 IE 中，它会将新元素插入到您上次单击的内容之上。但是，如果您使用按钮，则效果很好。去搞清楚。 Chrome.

中没有问题

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

Get cursor position in contentEditable div, open pop up, then insert new html at cursor position

html

javascript

contenteditable