Insert table

by Blake Plumb

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); 
    range.insertNode(el);
    rangy.getSelection().setSingleRange(range);
});


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