JSFiddle - React, Tailwind, and code Playground

by Reusablecode

HTML

<head> <meta charset="utf-8"> <meta name="viewport" content="width=620">
    <title>HTML5 Demo: ContentEditable</title> 
    <link rel="stylesheet" href="/css/html5demos.css" type="text/css"> 
    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Droid+Sans|Droid+Sans+Mono|Droid+Serif|Josefin+Sans+Std+Light|Lobster|Reenie+Beanie|Yanone+Kaffeesatz"><script src="/js/h5utils.js"></script>
</head>
<body>
    <section id="wrapper">
        <header>
            <h1>ContentEditable</h1>     </header> <article>   <section>     <p>Any elements with the <code>contenteditable</code> attribute set will have a grey outline as you hover over. Feel free to edit and change their contents.  I'm using local storage to maintain your changes.</p>   </section>   <section id="editable" contenteditable="true">     <h2>Go ahead, edit away!</h2>     <p>Here's a typical paragraph element</p>     <ol>       <li>and now a list</li>       <li>with only</li>       <li>three items</li>     </ol>   </section>   <div>    
        <input type="button" id="clear" value="Clear changes">   </div> 
        </article> 
        <footer><a href="/">HTML5 demos</a>/<a id="built" href="http://twitter.com/rem">@rem built this</a>/<a href="#view-source">view source</a></footer>  </section> 
</body>

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'); }