Autosave

autosave.markdown

Autosave

A Pen by Quill on CodePen.

License.

index.html

<div class="container"><a href="https://quilljs.com">Navigate away...</a></div>
<div id="editor-container">
  <h2>One Ring to Rule Them All</h2>
  <p><a href="http://en.wikipedia.org/wiki/One_Ring">http://en.wikipedia.org/wiki/One_Ring</a></p>
  <p><br/></p>
  <p>Three Rings for the <em>Elven-kings</em> under the sky,</p>
  <p>Seven for the <u>Dwarf-lords</u><span> in halls of stone,</p>
  <p>Nine for <u>Mortal Men</u>, doomed to die,</p>
  <p>One for the <u>Dark Lord</u> on his dark throne.</p>
  <p><br/></p>
  <p>In the Land of Mordor where the Shadows lie.</span></p>
  <p>One Ring to <strong>rule</strong> them all, One Ring to <strong>find</strong> them,</p>
  <p>One Ring to <strong>bring</strong> them all and in the darkness <strong>bind</strong> them.</p>
  <p>In the Land of Mordor where the Shadows lie.</p>
</div>

script.js

var Delta = Quill.import('delta');
var quill = new Quill('#editor-container', {
  modules: {
    toolbar: true
  },
  placeholder: 'Compose an epic...',
  theme: 'snow'
});

// Store accumulated changes
var change = new Delta();
quill.on('text-change', function(delta) {
  change = change.compose(delta);
});

// Save periodically
setInterval(function() {
  if (change.length() > 0) {
    console.log('Saving changes', change);
    /* 
    Send partial changes
    $.post('/your-endpoint', { 
      partial: JSON.stringify(change) 
    });
    
    Send entire document
    $.post('/your-endpoint', { 
      doc: JSON.stringify(quill.getContents())
    });
    */
    change = new Delta();
  }
}, 5*1000);

// Check for unsaved data
window.onbeforeunload = function() {
  if (change.length() > 0) {
    return 'There are unsaved changes. Are you sure you want to leave?';
  }
}

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>

style.css

#editor-container {
  height: 350px;
}

.container {
  margin-bottom: 10px;
  text-align: right;
}

.container a {
  font-family: Helvetia, sans-serif;
}

styles

<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet" />