contentEditable Selection Information

Get selected text, range, etc... inside a content editable element.

by Swivelgames

HTML

<article>
    <header>
        <h1 contenteditable="true">Test Title</h1>
    </header>
    <p id="editable" contenteditable="true">
        Test Content...
    </p>
</article><br /><hr />
Selection Informaiton: <span id="info_output"></span>

CSS

article {
            padding:5px;
            margin:5px;
            background:#fafafc;
            border:1px solid #ccc;
            border-radius:2px;
            -moz-border-radius:2px;
            -webkit-border-radius:2px;
        }

            article>header>h1 {
                padding:0;
                margin:3px 0 0 7px;
                font-family:serif;
                font-size:1.8em;
                font-weight:normal;
                color:#3d3d80;
            }

            article>header>h2,
            article>footer>h2 {
                line-height:25px;
                margin:0 0 0 16px;
                font-size:0.85em;
                font-weight:normal;
                color:#4c4c95;
                outline:0px;
            }

            article>p {
                line-height:22px;
                margin:0px 0 0 3px;
                padding:2px 10px 4px 10px;
                border-left:3px solid #d6d6d6;
                font-size:0.85em;
                color:#333;
                outline:0px;
            }

            article>p:first-of-type { padding-top:2px !important; }
            article>p+p { padding-top:8px; }

JavaScript

$(document).ready(function () {
    $('#info_output').html('Testing');
    
    $('#editable').click(function() {
        var outputText = $('#info_output');
        var selection = window.getSelection();
        $(outputText).html(selection.toString()+"<br />"+
                           selection.isCollapsed+"<br />"+
                           selection.anchorOffset+"<br />"+
                           selection.focusOffset+"<br />");
    });
});