JSFiddle - React, Tailwind, and code Playground

by Zihua Li

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="//cdn.quilljs.com/1.0.0-rc.2/quill.js"></script>
<link rel="stylesheet" href="//cdn.quilljs.com/1.0.0-rc.2/quill.bubble.css">
<link rel="stylesheet" href="//cdn.quilljs.com/1.0.0-rc.2/quill.snow.css">
<div class="editor">
  <div id="editor-container"></div>
</div>
<div id="log">
  <h2>Deltas:</h2>
  <ol reversed id="delta"></ol>
</div>

CSS

.editor, #editor-container {
  height: 200px;
}

.editor, #log {
  width: 50%;
  float: left;
  box-sizing: border-box;
}

#log {
  padding-left: 20px;
}

h2 {
  line-height: 1;
  margin: 0 0 10px;
}

JavaScript

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

quill.on('text-change', function (delta) {
  $('#delta').append('<li>' + JSON.stringify(delta) + '</li>');
});