Insert html at cursor in a contenteditable div

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

by Shah Danial

HTML

<div id="test" contenteditable="true">
Shah Danial adalah lelaki yang hensem
<br/>
<br/>
Ya mmg hensem pon
</div>


<br/><br/>

<button id='insert-html'>
BUTTON
</button>

<br/><br/>

<button id='check'>
CHECK
</button>

CSS

/*

console.log('new');

function pasteHtmlAtCaret(html, win, doc) {
    var sel, range;
    if (window.getSelection) {
        // IE9 and non-IE
        sel = window.getSelection();
        if (sel.getRangeAt && sel.rangeCount) {
            range = sel.getRangeAt(0);
            range.deleteContents();
            console.log(range);

            // 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);
    }
}


function butu(){
//console.log(window, document.selection);
var html = 'MY HTML';
setSelection(html, window, document);
}



*/

JavaScript

console.log('new');

function pasteHtmlAtCaret(html, win, doc) {
    var sel, range;
    if (win.getSelection) {
        // IE9 and non-IE
        sel = win.getSelection();
        if (sel.getRangeAt && sel.rangeCount) {
            range = sel.getRangeAt(0);
            range.deleteContents();
            console.log(range);

            // 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 (doc.selection && doc.selection.type != "Control") {
        // IE < 9
        doc.selection.createRange().pasteHTML(html);
    } 
}

 document.getElementById('test').addEventListener('focusout', function(e) {
      e.preventDefault();
      setCaretPosition(e);
   });


function setCaretPosition(ctrl, start, end) {
      // IE >= 9 and other browsers
      if(ctrl.setSelectionRange){
         ctrl.focus();
         ctrl.setSelectionRange(start, end);
      }
      // IE < 9
      else if (ctrl.createTextRange) {
         var range = ctrl.createTextRange();
         range.collapse(true);
         range.moveEnd('character', end);
         range.moveStart('character', start);
         range.select();
      }
   }
   
   



document.getElementById('check').addEventListener('click', function(e) {
insert_html('<a href="http://google.com/">MY HTML LINK</a>')
});

function...