Get HTML from selection

by timdown

HTML

<script src="http://jquerypp.com/release/latest/jquerypp.js"></script>
<script src="http://rangy.googlecode.com/svn/trunk/dev/rangy-core.js"></script>
<script src="http://rangy.googlecode.com/svn/trunk/dev/rangy-textrange.js"></script>
<div id="text">Isjishwhusf <b>am</b> some text, select me and I will show you what you have selected.</div>
<textarea id="status"></textarea>

CSS

body{ 
    font-family: Helvetica,"Lucida Grande","Lucida Sans",Arial,Helvetica,sans-serif;
}

#text {
    padding: 5px;
    background-color: #FFFF66;
}

#status {
    padding: 10px;
}

#status span {
    font-weight: bold;
    color: #505050;
}

JavaScript

function selectionHTML(container) {
    var selection = rangy.getSelection();
    if (selection.rangeCount > 0) {
        var range = selection.getRangeAt(0);
        return {
            offsets: range.toCharacterRange(container),
            html: range.toHtml()
        };
    }
    return null;
}

$('body').on('mouseup', function(ev) {
    var result = selectionHTML();
    console.log(result);
    $('#status').html(rangy.innerText(this).slice(result.offsets.start, result.offsets.end));
});