Quill Playground

index.html

<div id="editor-container"></div>
<form submit="#">
  <input type="hidden" id="myHtml"/>
  <button type="submit">Submit</submit>
</form>

quill-playground.markdown

Quill Playground

A Pen by Alex Krolick on CodePen.

License.

script.js

window.unsavedChanges = false;

var quill = new Quill('#editor-container', {
  modules: {
    toolbar: [
      [{ header: [1, 2, false] }],
      ['bold', 'italic', 'underline'],
      ['image', 'code-block']
    ]
  },
  placeholder: 'Compose an epic...',
  theme: 'snow' // or 'bubble'
});

window.addEventListener("beforeunload", function (e) {
  if (window.unsavedChanges) {
    e.returnValue = 'Unsaved Changes!';
    return 'Unsaved Changes!';
  };
});

var syncHtml = _.debounce(function() {
  $('myHtml').val(quill.getContents());
  window.unsavedChanges = false;
}, 500);

quill.on('text-change', function() {
  window.unsavedChanges = true;
  syncHtml();
});
         

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.3.0/highlight.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/KaTeX/0.6.0/katex.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.15.0/lodash.min.js"></script>
<script src="//cdn.quilljs.com/1.0.3/quill.js"></script>

style.css

#editor-container {
  height: 150px;
}

styles

<link href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.3.0/styles/monokai-sublime.min.css" rel="stylesheet" />
<link href="//cdnjs.cloudflare.com/ajax/libs/KaTeX/0.6.0/katex.min.css" rel="stylesheet" />
<link href="//cdn.quilljs.com/1.0.3/quill.bubble.css" rel="stylesheet" />
<link href="//cdn.quilljs.com/1.0.3/quill.snow.css" rel="stylesheet" />