Bagaimana untuk Memasukkan HTML ke dalam Contenteditable DIV pada Kedudukan Karet?

Memasukkan HTML ke dalam Contenteditable DIV pada Kedudukan Karet

Cabaran:

Dalam div yang boleh diedit kandungan, peristiwa penekanan kekunci menangkap boleh digunakan untuk menghalang kemasukan teks apabila kekunci Enter ditekan. Dengan kursor dalam titik sisipan yang diingini, kami mencari kaedah untuk memasukkan HTML (cth., teg
) tanpa memaparkannya sebagai teks biasa.

Penyelesaian:

Semasa menggunakan Range.pasteHTML() berfungsi dalam IE, pelayar lain memaparkan teg HTML sebagai teks. Fungsi berikut membolehkan kami memasukkan HTML dalam semua pelayar utama, menggantikan teks sedia ada jika dipilih:

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

Fungsi Dipertingkat (Ogos 2013):

Sebagai tindak balas kepada permintaan pengguna, parameter tambahan telah ditambahkan untuk menentukan sama ada kandungan yang dimasukkan perlu atau tidak dipilih.

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

Fungsi dikemas kini ini membolehkan kami mengawal gelagat pemilihan selepas memasukkan kandungan HTML.

Atas ialah kandungan terperinci Bagaimana untuk Memasukkan HTML ke dalam Contenteditable DIV pada Kedudukan Karet?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!