Question

我正在使用内容可编辑div构建一个非常简单的RTF编辑器。如果用户在div中单击，然后单击链接管理器按钮，然后将某些链接文本和地址输入到模式弹出窗口中，然后单击“确定”，我想构建一个超链接并将其插入到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怪癖。如果您单击一个非按钮元素（例如，并用font-awesome标记了标签），然后尝试执行我想做的事情，即缓存所选范围，则将一个新元素放回其顶部，在IE中，它将在您上次单击的内容上方插入新元素。但是，如果使用按钮，则可以正常工作。去搞清楚。 Chrome中没有问题。

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

1 个答案: