How to replace selected text with html in a contenteditable element? [duplicate]

Question

With a contenteditable element how can I replace the selected content with my own html?

Answer 1

See here for working 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 taken from Tim Down: Return HTML from a user-selected text

Answer 2

To get the selected HTML, you can use the function I wrote for this question. To replace the selection with your own HTML, you can use this function. Here's a version of the replacer function that inserts an HTML string instead of a DOM node:

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("<b>REPLACEMENT HTML</b>");