JavaScript を使用して contenteditable div のカーソル位置に HTML を挿入するにはどうすればよいですか?

Contenteditable Div のカーソル位置に HTML を挿入

contenteditable div を操作する場合、多くの場合、カーソル位置に HTML を挿入する必要があります。位置。これは、JavaScript を使用してキー押下イベントをキャプチャし、Enter キーのデフォルト動作を防止することで実行できます。

HTML を挿入するには、Range オブジェクトの insertNode() メソッドを使用できます。このメソッドを使用すると、DOM の指定された場所にノードを挿入できます。 IE

ここでは、コンテンツが選択されているかどうかに関係なく、すべての主要なブラウザーでカーソル位置に HTML を挿入する方法を示す関数を示します。

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

IE < 9 では、Range オブジェクトの pastHTML() メソッドを使用して HTML を挿入できます。

このメソッドは、挿入されたコンテンツを選択するかどうかを指定できるため、より柔軟です。

この関数を呼び出すには、挿入する HTML と、挿入されたコンテンツを選択するかどうかを示すブール値を渡すだけです。

の場合例:

pasteHtmlAtCaret('<p>New HTML</p>', true);

以上がJavaScript を使用して contenteditable div のカーソル位置に HTML を挿入するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。