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

Memasukkan HTML pada Kedudukan Kursor dalam Div Boleh Diedit Kandungan

Pernyataan Masalah

Memasukkan HTML, seperti

Penyelesaian

Untuk memasukkan HTML terus ke dalam penyemak imbas selain daripada IE, gunakan kaedah insertNode() bagi objek Julat:

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();
            var el = document.createElement("div");
            el.innerHTML = html;
            var frag = document.createDocumentFragment(), node;
            while (node = el.firstChild) {
                frag.appendChild(node);
            }
            range.insertNode(frag);
            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);
    }
}

Penyelesaian Kemas Kini dengan Pilihan untuk Memilih Kandungan Tampal

Secara pilihan, anda boleh memilih kandungan yang dimasukkan menggunakan parameter tambahan:

function pasteHtmlAtCaret(html, selectPastedContent) {
    // ... Original code ...
    var firstNode = frag.firstChild;
    range.insertNode(frag);
    if (lastNode) {
        range = range.cloneRange();
        range.setStartAfter(lastNode);
        if (selectPastedContent) {
            range.setStartBefore(firstNode);
        } else {
            range.collapse(true);
        }
        sel.removeAllRanges();
        sel.addRange(range);
    }
    // ... Original code ...
}

Kod ini menyediakan keserasian merentas penyemak imbas untuk memasukkan HTML pada kedudukan kursor, dengan fleksibiliti tambahan untuk memilih kandungan yang dimasukkan jika dikehendaki.

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