如何在 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中文網其他相關文章！