JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://raw.github.com/eligrey/FileSaver.js/master/FileSaver.js"></script>
<link rel="stylesheet" href="https://dl.dropbox.com/u/92126558/css/normalize.css">
<p>Hi I want to use contenteditable div instead of using the below textarea
    but preserving the saving functionality!</p>
<p>I've tried lot but unable to figureout :)</p>
<form>
    <div id="editor" contentEditable="true" placeholder="Start writing..."></div>
</form>
<form id="toolbar">
    <label>Filename:
        <input type="text" id="filename" placeholder="file name" />.txt</label>
    <input type="submit" value="Save" />
</form>

CSS

#editor {
    width:300px;
    height:150px;
    margin: 10px;
    background:lightblue;
}

JavaScript

(function (view) {
    "use strict";
    var
    document = view.document,
        $ = function (id) {
            return document.getElementById(id);
        },
        session = view.sessionStorage
        // only get URL when necessary in case Blob.js hasn't defined it yet
        ,
        get_blob = function () {
            return view.Blob;
        },
        text = $("editor"),
        text_options_form = $("toolbar"),
        text_filename = $("filename");


    text_options_form.addEventListener("submit", function (event) {
        event.preventDefault();
        var BB = get_blob();
        saveAs(
        new BB(
        [text.innerHTML || text.placeholder], {
            type: "text/plain;charset=" + document.characterSet
        }), (text_filename.value || text_filename.placeholder) + ".txt");
    }, false);


    view.addEventListener("unload", function () {

        session.text = text.innerHTML;
        session.text_filename = text_filename.value;

    }, false);
}(self));