すべてのブラウザで ContentEditable Div のカーソル位置に HTML を挿入する方法

ContentEditable Div のカーソル位置に HTML を挿入する

問題ステートメント

解決策

IE 以外のブラウザに HTML を直接挿入するには、Range オブジェクトの insertNode() メソッドを利用します。

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

貼り付けたコンテンツを選択するオプションを備えた更新されたソリューション

必要に応じて、追加のパラメータを使用して挿入されたコンテンツを選択できます。

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 ...
}

このコードは、カーソル位置に HTML を挿入するためのブラウザー間の互換性を提供し、必要に応じて挿入されたコンテンツを選択できる柔軟性を追加します。

以上がすべてのブラウザで ContentEditable Div のカーソル位置に HTML を挿入する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。