HTML5: contentEditable

by Terry Young

HTML

<div id="content">
    <a href="https://developer.mozilla.org/en-US/docs/HTML/Content_Editable" target="_blank">https://developer.mozilla.org/en-US/docs/HTML/Content_Editable</a>
    
    <br><br>
    
    <a href="http://caniuse.com/#feat=contenteditable" target="_blank">http://caniuse.com/#feat=contenteditable</a>
</div>

CSS

html, body {
    font-family: Consolas, Arial, Tahoma;
    font-size: 0.9em;
}

body {
    padding: 10px;
}

#content {
    margin: 0;
    border: 0;
    padding: 10px;
    overflow: auto;

    width: 100%;
    height: 300px;
    background-color: #ededed;
    
    /* to hell with IE7 */
    -moz-box-sizing:    border-box;
    -webkit-box-sizing: border-box;
    box-sizing:        border-box;

}

JavaScript

$('#content').prop('contenteditable', true);