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/[email protected]/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">
  <template v-for="item in items">
    <debounced-quill-editor v-model="item.text" :options="editorOption"></debounced-quill-editor>
    <modified-html :value="item.text"></modified-html>
  </template>
</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: {
    items: [{
        active: true,
        text: 'text1'
      },
      {
        active: true,
        text: 'text2'
      },
      {
        active: true,
        text: 'text3'
      },
      {
        active: true,
        text: 'text4'
      },
      {
        active: true,
        text: 'text5'
      }
    ],
    editorOption: {
      theme: 'snow'
    }
  },
  components: {
    debouncedQuillEditor: {
      props: ['value', 'options'],
      template: '<quill-editor v-model="debouncedValue" :options="options"></quill-editor>',
      computed: {
        debouncedValue: {
          get() {
            return this.value;
          },
          set: _.debounce(function(newValue) {
            this.$emit('input', newValue);
          }, 100)
        }
      }
    },
    modifiedHtml: {
    	props :['value'],
      template: '<div class="content" v-html="textComputed"></div>',
      computed: {
        textComputed() {
          return '<b>' + this.value + '</b>';
        }
      }
    }
  }
});