如何在 ContentEditable Div 的插入符处插入 HTML？

在 Contenteditable Div 中的插入符号处插入 Html

在 contenteditable div 中，捕获按键可以防止插入不需要的字符。这就提出了直接插入 HTML 元素的要求，例如
标签。虽然为 contenteditable div 中的文本插入提供的解决方案在 IE 中使用 range.pasteHTML 方法工作，但它在其他浏览器中将
标签呈现为纯文本。

使用 insertNode() 插入 HTML

在大多数浏览器中，您可以利用从选择中获取的 Range 的 insertNode() 方法来插入 HTML 节点。 IE 9以下版本仍然支持pasteHTML()。

插入HTML的函数

以下函数可用于在所有主流浏览器中插入HTML：

function pasteHtmlAtCaret(html) {
  var sel, range;
  if (window.getSelection) {
    sel = window.getSelection();
    if (sel.getRangeAt && sel.rangeCount) {
      range = sel.getRangeAt(0);
      range.deleteContents();
      var el = document.createElement("div");
      el.innerHTML = html;
      var frag = document.createDocumentFragment(), node, lastNode;
      while ((node = el.firstChild)) {
        lastNode = frag.appendChild(node);
      }
      range.insertNode(frag);
      if (lastNode) {
        range = range.cloneRange();
        range.setStartAfter(lastNode);
        range.collapse(true);
        sel.removeAllRanges();
        sel.addRange(range);
      }
    }
  } else if (document.selection && document.selection.type != "Control") {
    document.selection.createRange().pasteHTML(html);
  }
}

更新：选择已插入内容

对于插入后想要选择插入内容的场景，可以使用附加参数更新该函数，如下所示：

function pasteHtmlAtCaret(html, selectPastedContent) {
  // Implementation with logic for selecting the inserted content if selectPastedContent is true
}

以上是如何在 ContentEditable Div 的插入符处插入 HTML？的详细内容。更多信息请关注PHP中文网其他相关文章！