Wie man ausgewählten Text mit HTML in einem contenteditable Element ersetzt?

Mit einem zufrieden stellenden Element wie kann ich den ausgewählten Inhalt durch mein eigenes HTML ersetzen?

Solutions Collecting From Web of "Wie man ausgewählten Text mit HTML in einem contenteditable Element ersetzt?"

Sehen Sie hier für die Arbeit jsFiddle: http://jsfiddle.net/dKaJ3/2/

function getSelectionHtml() { var html = ""; if (typeof window.getSelection != "undefined") { var sel = window.getSelection(); if (sel.rangeCount) { var container = document.createElement("div"); for (var i = 0, len = sel.rangeCount; i < len; ++i) { container.appendChild(sel.getRangeAt(i).cloneContents()); } html = container.innerHTML; } } else if (typeof document.selection != "undefined") { if (document.selection.type == "Text") { html = document.selection.createRange().htmlText; } } alert(html); } 

Code aus Tim Down : Gibt HTML von einem benutzerdefinierten Text zurück

Um den ausgewählten HTML-Code zu erhalten, können Sie die function verwenden, die ich für diese Frage geschrieben habe . Um die Auswahl durch eigenes HTML zu ersetzen, können Sie diese function verwenden . Hier ist eine Version der Ersetzungsfunktion, die anstelle eines DOM-Knotens eine HTML-Zeichenfolge einfügt:

 function replaceSelectionWithHtml(html) { var range; if (window.getSelection && window.getSelection().getRangeAt) { range = window.getSelection().getRangeAt(0); range.deleteContents(); var div = document.createElement("div"); div.innerHTML = html; var frag = document.createDocumentFragment(), child; while ( (child = div.firstChild) ) { frag.appendChild(child); } range.insertNode(frag); } else if (document.selection && document.selection.createRange) { range = document.selection.createRange(); range.pasteHTML(html); } } replaceSelectionWithHtml("REPLACEMENT HTML");