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 verwenden pasteHTML()
, wie Sie erwähnt haben. Im Folgenden finden Sie eine Funktion, die dies in allen gängigen Browsern ermöglicht. Wenn der Inhalt bereits ausgewählt ist, wird er ersetzt, sodass dies effektiv ein Einfügevorgang ist. 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) {
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, lastNode;
while ( (node = el.firstChild) ) {
lastNode = frag.appendChild(node);
}
range.insertNode(frag);
if (lastNode) {
range = range.cloneRange();
range.setStartAfter(lastNode);
range.collapse(true);
sel.removeAllRanges();
sel.addRange(range);
}
}
} else if (document.selection && document.selection.type != "Control") {
document.selection.createRange().pasteHTML(html);
}
}
UPDATE 21. AUGUST 2013
Wie in den Kommentaren angefordert, finden Sie hier ein aktualisiertes Beispiel mit einem zusätzlichen Parameter, der angibt, ob der eingefügte Inhalt ausgewählt werden soll oder nicht.
Demo: http://jsfiddle.net/timdown/jwvha/527/
Code:
function pasteHtmlAtCaret(html, selectPastedContent) {
var sel, range;
if (window.getSelection) {
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, lastNode;
while ( (node = el.firstChild) ) {
lastNode = frag.appendChild(node);
}
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);
}
}
} else if ( (sel = document.selection) && sel.type != "Control") {
var originalRange = sel.createRange();
originalRange.collapse(true);
sel.createRange().pasteHTML(html);
if (selectPastedContent) {
range = sel.createRange();
range.setEndPoint("StartToStart", originalRange);
range.select();
}
}
}
pasteHtmlAtCaret ()
Funktion in einemonload
Handler platziert, in dem nichts anderes sie sehen kann. Siehe jsfiddle.net/jwvha/211 für das Update .document.execCommand()
funktioniert normalerweise mit dem Rückgängig-Stapel des Browsers, sodass Sie ihn möglicherweise verwenden könnendocument.execCommand("InsertHTML", false, "<b>Some bold text</b>")
. Ich habe jedoch nicht getestet, dass das Rückgängigmachen damit noch funktioniert, und der IE unterstützt diesen Befehl nicht. Schließlich ist eine UndoManager-Spezifikation in Arbeit, die langfristig die Lösung dafür sein wird und in Browsern implementiert wird: dvcs.w3.org/hg/undomanager/raw-file/tip/undomanager.htmlvar 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"; };
quelle
Wenn Sie schnell lesen und hoffen, nicht vom Thema abzukommen, finden Sie hier einen Titel für diejenigen, die wie ich Code auf der Cursorebene 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";
quelle
var r = getSelection().getRangeAt(0); r.insertNode(r.createContextualFragment('<b>Hello</b>')); //select this range getSelection().removeAllRanges(); getSelection().addRange(r); //collapse to end/start getSelection().collapseToEnd()
quelle