HTML an der Cursorposition in ein inhaltsbearbeitbares Div einfügen
Problemstellung
HTML einfügen, z. B.
Lösung
Um HTML direkt in andere Browser als IE einzufügen, verwenden Sie die Methode insertNode() des Range-Objekts:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | 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;
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" ) {
document.selection.createRange().pasteHTML(html);
}
}
|
Nach dem Login kopieren
Aktualisierte Lösung mit Option zur Auswahl eingefügter Inhalte
Optional können Sie den eingefügten Inhalt mithilfe eines zusätzlichen Parameters auswählen:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | function pasteHtmlAtCaret(html, selectPastedContent) {
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);
}
}
|
Nach dem Login kopieren
Dieser Code bietet browserübergreifende Kompatibilität zum Einfügen von HTML an der Cursorposition und bietet bei Bedarf die zusätzliche Flexibilität, den eingefügten Inhalt auszuwählen.
Das obige ist der detaillierte Inhalt vonWie füge ich in allen Browsern HTML an der Cursorposition in ein ContentEditable-Div ein?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!