Insert html at cursor in a contenteditable div

http://stackoverflow.com/questions/6690752/insert-html-at-cursor-in-a-contenteditable-div

by mark edwards

HTML

<input type="button" value="Paste HTML 1" onclick="document.getElementById('test1').focus(); pasteHtmlAtCaret('<b>INSERTED</b>'); ">\

<input type="button" value="Paste HTML 2" onclick="document.getElementById('test2').focus(); pasteHtmlAtCaret('<b>INSERTED</b>'); ">

<div id="test1" contenteditable="true">
    Here is some nice text 111
</div>

<div id="test2" contenteditable="true">
    Here is some nice text 222
</div>

JavaScript

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
            // non-standard and not supported in all 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);
    }
}