如何将 HTML 插入到 Contenteditable DIV 的插入符位置？

将 HTML 插入到 Contenteditable DIV 的插入符位置

挑战：

在 contenteditable div 中，按键事件捕获可用于防止按下 Enter 键时输入文本。当光标位于所需的插入点时，我们寻找一种方法来插入 HTML（例如
标签）而不将其显示为纯文本。

解决方案：

虽然在 IE 中使用 Range.pasteHTML() 有效，但其他浏览器将 HTML 标签显示为文本。以下功能允许我们在所有主要浏览器中插入 HTML，如果选择则替换现有文本：

function pasteHtmlAtCaret(html) {
  var sel, range;
  if (window.getSelection) {
    // IE9 and non-IE
    sel = window.getSelection();
    if (sel.getRangeAt && sel.rangeCount) {
      range = sel.getRangeAt(0);
      range.deleteContents();

      // Create a document fragment from the HTML string
      var el = document.createElement("div");
      el.innerHTML = html;
      var frag = document.createDocumentFragment();
      while ((node = el.firstChild)) {
        frag.appendChild(node);
      }

      range.insertNode(frag);

      // Preserve the selection after the inserted content
      if (frag.lastChild) {
        range = range.cloneRange();
        range.setStartAfter(frag.lastChild);
        range.collapse(true);
        sel.removeAllRanges();
        sel.addRange(range);
      }
    }
  } else if (document.selection && document.selection.type != "Control") {
    // IE < 9
    document.selection.createRange().pasteHTML(html);
  }
}

增强功能（2013 年 8 月）：

响应用户请求时，添加了一个附加参数来指定是否应插入内容

function pasteHtmlAtCaret(html, selectPastedContent) {
  // Similar functionality as the original function
  // ...
}

此更新的功能允许我们在插入 HTML 内容后控制选择行为。

以上是如何将 HTML 插入到 Contenteditable DIV 的插入符位置？的详细内容。更多信息请关注PHP中文网其他相关文章！