Insert table

HTML

<script src="http://dl.dropbox.com/u/59918876/rangy-core-1.2.3.min.js"></script>
<div contenteditable="true"><p>text <a href="#">text</a> more text </p></div>
<button type="button">Add Table</button>

CSS

div{
 width: 500px;
 height: 300px;
 border: 1px solid #0000FF;    
}

table td{
    border: 1px solid #000;
    padding: 5px;
}

JavaScript

$('button').click(function(){
    rangy.init();
    var range = getFirstRange();
    var el = document.createElement("table");
    var tableHtml = "<table><tr><td>table text</td><td>table text</td></tr><tr><td>table text</td><td>table text</td></tr></table>";
    $(el).html(tableHtml); 
    
    var badNodes = {a: 1, p: 1};
    
    var n = range.startContainer;
    var tag = n.nodeName;
    while (tag == '#text') {
        n = n.parentNode;
        tag = n.nodeName;
    }
    
    if (badNodes[tag.toLowerCase()]) {
        while (badNodes[n.parentNode.nodeName.toLowerCase()]) {
            n = n.parentNode;
            tag = n.nodeName;
        }        
        range.setEndAfter(n);
        var clipped = range.extractContents();
        n.parentNode.insertBefore(el, n.nextSibling);
        el.parentNode.insertBefore(clipped, el.nextSibling);
    } else {
        range.insertNode(el);
    }
    
    rangy.getSelection().setSingleRange(range);
});


function getFirstRange() {
       var sel = rangy.getSelection();
       return sel.rangeCount ? sel.getRangeAt(0) : null;
    }