VueQuillEditor

CDN example

HTML

<!-- Include the Quill library -->
<script src="https://cdn.quilljs.com/1.3.4/quill.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!-- Quill JS Vue -->
<script src="https://cdn.jsdelivr.net/npm/vue-quill-editor@3.0.4/dist/vue-quill-editor.js"></script>
<!-- Include stylesheet -->
<link href="https://cdn.quilljs.com/1.3.4/quill.core.css" rel="stylesheet">
<link href="https://cdn.quilljs.com/1.3.4/quill.snow.css" rel="stylesheet">
<link href="https://cdn.quilljs.com/1.3.4/quill.bubble.css" rel="stylesheet">
<!-- Include lodash -->
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js"></script>

<div id="vueapp">
  <quill-editor v-model="debounceText" :options="editorOption">
  </quill-editor>
  <div class="content ql-editor" v-html="textComputed"></div>
</div>

CSS

#vueapp {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.quill-editor,
.content {
  background-color: white;
  max-width: 50vw;
}

JavaScript

Vue.use(VueQuillEditor)
new Vue({
  el: '#vueapp',
  data: {
    text: '<h2>I am Example A</h2>',
    editorOption: {
      theme: 'snow'
    }
  },
  components: {
    LocalQuillEditor: VueQuillEditor.quillEditor
  },
  computed: {
    debounceText: {
    	get() { return this.text; },
      set: _.debounce(function(newValue) {
        this.text = newValue;
      }, 100)
    },
    textComputed() {
      return '<b>' + this.text + '</b>';
    }
  }
});