it-swarm.com.de

Fügen Sie html bei caret in ein inhaltsbearbeitbares div ein

Ich habe ein div mit contenteditable gesetzt und ich erfasse Tastendruck mit jquery, um preventDefault () aufzurufen, wenn die Eingabetaste gedrückt wird. Ähnlich wie diese Frage beim Einfügen von Text am Cursor möchte ich HTML direkt einfügen. Der Kürze halber werden wir sagen, es ist ein br-Tag. Die Antwort auf die obige Frage funktioniert tatsächlich in IE wie es die range.pasteHTML-Methode verwendet, aber in anderen Browsern würde das br-Tag als Klartext und nicht als HTML angezeigt. Wie könnte ich das ändern? antworten Sie, um HTML und nicht Text einzufügen?

67
Niall

In den meisten Browsern können Sie die insertNode() -Methode des Bereichs verwenden, den Sie aus der Auswahl erhalten. In IE <9 können Sie pasteHTML() verwenden, wie Sie bereits erwähnt haben. Im Folgenden finden Sie eine Funktion, die dies in allen gängigen Browsern ausführt. Wenn bereits Inhalt ausgewählt ist, wird dieser ersetzt. Das ist also praktisch eine Einfügeoperation. Außerdem habe ich Code hinzugefügt, um das Caret nach dem Ende des eingefügten Inhalts zu platzieren.

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

Code:

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

UPDATE 21. AUGUST 2013

Wie in den Kommentaren angefordert, ist hier ein aktualisiertes Beispiel mit einem zusätzlichen Parameter, der angibt, ob der eingefügte Inhalt ausgewählt werden soll.

Demo: http://jsfiddle.net/timdown/jwvha/527/

Code:

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

wenn Sie schnell lesen und hoffen, dass Sie nicht vom Thema abweichen, finden Sie hier einen Titel für diejenigen, die wie ich Code auf der Cursor-Ebene eines div einfügen müssen:

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

'editeur' ist 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>

vergiss nicht:

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