web-dev-qa-db-ja.com

contenteditable divのキャレットにhtmlを挿入します

Contenteditableセットのdivがあり、Enterキーが押されたときにjqueryを使用してpreventDefault（）を呼び出すキー押下をキャプチャしています。カーソルにテキストを挿入する この質問 と同様に、htmlを直接挿入したいと思います。簡潔にするために、brタグと言います。上記の質問に対する答えを使用すると、実際にはrange = pasteHTMLメソッドを使用するIEで動作しますが、他のブラウザではhtmlタグではなくプレーンテキストとして表示されます。テキストではなくhtmlを挿入すると答えますか？

javascriptjquerycontenteditable
67
Niall

ほとんどのブラウザでは、選択から取得した範囲のinsertNode()メソッドを使用できます。 IE <9では、前述のようにpasteHTML()を使用できます。以下は、すべての主要なブラウザでこれを行う関数です。コンテンツが既に選択されている場合、置き換えられます。また、挿入されたコンテンツの末尾の後にキャレットを配置するコードを追加しました。

jsFiddle： http://jsfiddle.net/jwvha/1/

コード：

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

            // Range.createContextualFragment() would be useful here but is
            // only relatively recently standardized and is not supported in
            // some browsers (IE9, for one)
            var el = document.createElement("div");
            el.innerHTML = html;
            var frag = document.createDocumentFragment(), node, lastNode;
            while ( (node = el.firstChild) ) {
                lastNode = frag.appendChild(node);
            }
            range.insertNode(frag);

            // Preserve the selection
            if (lastNode) {
                range = range.cloneRange();
                range.setStartAfter(lastNode);
                range.collapse(true);
                sel.removeAllRanges();
                sel.addRange(range);
            }
        }
    } else if (document.selection && document.selection.type != "Control") {
        // IE < 9
        document.selection.createRange().pasteHTML(html);
    }
}

2013年8月21日更新

コメントで要求されているように、挿入されたコンテンツを選択するかどうかを指定する追加のパラメーターを含む更新された例があります。

デモ： http://jsfiddle.net/timdown/jwvha/527/

コード：

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

            // Range.createContextualFragment() would be useful here but is
            // only relatively recently standardized and is not supported in
            // some browsers (IE9, for one)
            var el = document.createElement("div");
            el.innerHTML = html;
            var frag = document.createDocumentFragment(), node, lastNode;
            while ( (node = el.firstChild) ) {
                lastNode = frag.appendChild(node);
            }
            var firstNode = frag.firstChild;
            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();
        }
    }
}
173
Tim Down
var doc = document.getElementById("your_iframe").contentWindow.document;

// IE <= 10
if (document.selection){
    var range = doc.selection.createRange();
        range.pasteHTML("<b>Some bold text</b>");

// IE 11 && Firefox, Opera .....
}else if(document.getSelection){
    var range = doc.getSelection().getRangeAt(0);
    var nnode = doc.createElement("b");
    range.surroundContents(nnode);
    nnode.innerHTML = "Some bold text";
};
12
user3126867

すぐに読み、トピックから外れることを期待して、ここに私のような、divのカーソルレベルでコードを挿入する必要がある人のためのトラックがあります。

document.getElementById('editeur').contentWindow.document.execCommand('insertHTML', false, '<br />');

「editeur」はiframeです。

<iframe id="editeur" src="contenu_editeur_wysiwyg.php">
</iframe>

contenu_editeur_wysiwyg.php：

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<div>
</div>
</body>
</html>

忘れないでください：

document.getElementById('editeur').contentDocument.designMode = "on";
0
delaio