Bagaimanakah cara saya memasukkan HTML pada kedudukan kursor dalam div boleh diedit kandungan menggunakan JavaScript?

Sisipkan HTML pada Kursor dalam Contenteditable Div

Apabila bekerja dengan contenteditable div, selalunya perlu untuk memasukkan HTML pada kursor kedudukan. Ini boleh dilakukan menggunakan JavaScript untuk menangkap peristiwa penekan kekunci dan menghalang kelakuan lalai kekunci enter.

Untuk memasukkan HTML, kita boleh menggunakan kaedah insertNode() bagi objek Range. Kaedah ini membolehkan kami memasukkan nod ke dalam DOM di lokasi yang ditentukan. Dalam kebanyakan penyemak imbas, kecuali IE < 9, kita boleh menggunakan kaedah ini secara langsung.

Berikut ialah fungsi yang menunjukkan cara memasukkan HTML pada kedudukan kursor dalam semua penyemak imbas utama, sama ada kandungan dipilih atau tidak:

function pasteHtmlAtCaret(html, selectPastedContent) {
    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 to hold the HTML
            var el = document.createElement("div");
            el.innerHTML = html;
            var frag = document.createDocumentFragment(), node, lastNode;
            while ( (node = el.firstChild) ) {
                lastNode = frag.appendChild(node);
            }

            // Insert the HTML into the document
            range.insertNode(frag);

            // Preserve the selection
            if (lastNode) {
                range = range.cloneRange();
                range.setStartAfter(lastNode);
                if (selectPastedContent) {
                    range.setStartBefore(firstNode);
                } else {
                    range.collapse(true);
                }
                sel.removeAllRanges();
                sel.addRange(range);
            }
        }
    } else if ( (sel = document.selection) && sel.type != "Control") {
        // IE < 9
        var originalRange = sel.createRange();
        originalRange.collapse(true);
        sel.createRange().pasteHTML(html);
        if (selectPastedContent) {
            range = sel.createRange();
            range.setEndPoint("StartToStart", originalRange);
            range.select();
        }
    }
}

Dalam IE < 9, kita boleh menggunakan kaedah pasteHTML() objek Range untuk memasukkan HTML.

Kaedah ini lebih fleksibel, kerana ia membolehkan kita menentukan sama ada kita mahu memilih kandungan yang dimasukkan atau tidak.

Untuk memanggil fungsi ini, cuma masukkan HTML yang anda ingin masukkan dan nilai boolean untuk menunjukkan sama ada hendak memilih kandungan yang dimasukkan atau tidak.

Contohnya:

pasteHtmlAtCaret('
New HTML
', true);
Atas ialah kandungan terperinci Bagaimanakah cara saya memasukkan HTML pada kedudukan kursor dalam div boleh diedit kandungan menggunakan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!