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

Sisipkan Html di Caret dalam Div Boleh Diedit

Dalam div boleh diedit kandungan, menangkap penekanan kekunci membolehkan anda menghalang pemasukan aksara yang tidak diingini. Ini menimbulkan keperluan untuk memasukkan elemen HTML secara langsung, seperti teg
. Walaupun penyelesaian yang disediakan untuk memasukkan teks dalam div boleh diedit kandungan berfungsi dalam IE menggunakan kaedah range.pasteHTML, ia menjadikan teg
sebagai teks biasa dalam penyemak imbas lain.

Sisipkan HTML Menggunakan insertNode()

Dalam kebanyakan penyemak imbas, anda boleh menggunakan kaedah insertNode() bagi Julat yang diperoleh daripada pemilihan untuk memasukkan nod HTML. Versi IE di bawah 9 masih menyokong pasteHTML().

Fungsi untuk Memasukkan HTML

Fungsi berikut boleh digunakan untuk memasukkan HTML pada karet dalam semua pelayar utama:

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

Kemas kini: Memilih Disisipkan Kandungan

Untuk senario di mana anda ingin memilih kandungan yang dimasukkan selepas sisipan, fungsi boleh dikemas kini dengan parameter tambahan seperti yang ditunjukkan di bawah:

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

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