HTML5 Content Editable

by Shobhit Sharma

HTML

<article>
    <section id="editable" contenteditable="true">
         <h2>Edit Content Live - HTML5</h2>

        <p>Here's a typical paragraph element</p>
        <ol>
            <li>test 1</li>
            <li>test 2</li>
            <li>test 3</li>
        </ol>
    </section>
    <div>
        <input type="button" id="clear" value="Clear changes" />
    </div>

JavaScript

var editable = document.getElementById('editable');

addEvent(editable, 'blur', function () {
    // lame that we're hooking the blur event
    localStorage.setItem('contenteditable', this.innerHTML);
    document.designMode = 'off';
});

addEvent(editable, 'focus', function () {
    document.designMode = 'on';
});

addEvent(document.getElementById('clear'), 'click', function () {
    localStorage.clear();
    window.location = window.location; // refresh
});

if (localStorage.getItem('contenteditable')) {
    editable.innerHTML = localStorage.getItem('contenteditable');
}