如何在 ContentEditable Div 的光标处插入 HTML？

在 ContentEditable Div 的光标处插入 HTML

使用允许编辑的 div 时，您可能需要直接在以下位置插入 HTML光标。虽然像 insertText() 这样的方法可以添加纯文本，但浏览器通常会将以此方式插入的 HTML 显示为文本，而不是执行它。

要克服此限制，需要更复杂的方法。一种解决方案涉及利用 Range 对象的 insertNode() 方法。然而，IE8及以下版本依赖于pasteHTML()。

实现

以下函数处理跨主要浏览器的HTML插入：

function pasteHtmlAtCaret(html) {
  // Obtain the selection range
  var sel, range;
  if (window.getSelection) {
    // For non-IE browsers
    sel = window.getSelection();
    range = sel.getRangeAt(0);
  } else if (document.selection) {
    // For IE8 and below
    range = document.selection.createRange();
  }

  // Delete existing content in the range
  range.deleteContents();

  // Create an element to hold the HTML
  var el = document.createElement("div");
  el.innerHTML = html;
  
  // Create a fragment to insert
  var frag = document.createDocumentFragment();

  // Loop through elements in the div
  while ((node = el.firstChild)) {
    frag.appendChild(node);
  }
  
  // Insert the fragment into the range
  range.insertNode(frag);

  // Position the caret after the inserted content
  range = range.cloneRange();
  range.setStartAfter(frag.lastChild);
  range.collapse(true);
  if (sel) sel.removeAllRanges();
  if (sel) sel.addRange(range);
}

改进

基于用户请求，开发了带有附加参数的更新版本：

function pasteHtmlAtCaret(html, selectPastedContent) {
  // ... (same as before)

  // Modify based on parameter
  if (selectPastedContent) {
    range.setStartBefore(frag.firstChild);
  } else {
    range.collapse(true);
  }

  // Update the selection
  sel.removeAllRanges();
  sel.addRange(range);
}

设置为 true 时，此参数允许您在执行时选择插入的内容。

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