Bagaimana untuk Memasukkan HTML pada Kursor dalam Div Boleh Diedit Kandungan?

Memasukkan HTML pada Kursor dalam Div Boleh Diedit Kandungan

Apabila bekerja dengan div yang membenarkan pengeditan, anda mungkin mahu memasukkan HTML terus di kursor. Walaupun kaedah seperti insertText() boleh menambah teks biasa, penyemak imbas biasanya memaparkan HTML yang disisipkan dengan cara ini sebagai teks dan bukannya melaksanakannya.

Untuk mengatasi had ini, pendekatan yang lebih terperinci diperlukan. Satu penyelesaian melibatkan memanfaatkan kaedah insertNode() bagi objek Julat. Walau bagaimanapun, IE8 dan ke bawah bergantung pada pasteHTML().

Pelaksanaan

Fungsi berikut mengendalikan sisipan HTML merentas pelayar utama:

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);
}

Peningkatan

Berdasarkan permintaan pengguna, versi yang dikemas kini dengan parameter tambahan telah dibangunkan:

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);
}

Apabila ditetapkan kepada benar, parameter ini membolehkan anda memilih kandungan yang dimasukkan semasa pelaksanaan.

Atas ialah kandungan terperinci Bagaimana untuk Memasukkan HTML pada Kursor dalam Div Boleh Diedit Kandungan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!