VueQuillEditor

CDN example

by Shashank Shekhar

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">

<div id="vueapp">
    <p>{{message}}</p>
    <quill-editor v-model="content"
                  ref="quillEditorA"
                  :options="editorOption"
                  :toolbarOptions="toolbarOptions"
                  @blur="onEditorBlur($event)"
                  @focus="onEditorFocus($event)"
                  @ready="onEditorReady($event)">
		</quill-editor>
    <div class="content ql-editor" v-html="content"></div>
    <br>
    <local-quill-editor v-model="content2"
                        ref="quillEditorB"
                        :options="editorOption"
                        @blur="onEditorBlur($event)"
                        @focus="onEditorFocus($event)"
                        @ready="onEditorReady($event)">
		</local-quill-editor>
    <div class="content ql-editor" v-html="content2"></div>
</div>

CSS

.quill-editor,
.content {
  background-color: white;
}

JavaScript

Vue.use(VueQuillEditor)
new Vue({
	 el: '#vueapp',
	 data: {
     message: 'Hi from Vue.',
     content: '<h2>I am Example A</h2>',
     content2: '<h2>I am Example B</h2>',
     editorOption: {
        theme: 'snow'
      },
      toolbarOptions : [
    ['bold', 'italic', 'underline', 'strike']
  ]
	 	},
    components: {
    	LocalQuillEditor: VueQuillEditor.quillEditor
    },
    methods: {
      onEditorBlur(quill) {
        console.log('editor blur!', quill)
      },
      onEditorFocus(quill) {
        console.log('editor focus!', quill)
      },
      onEditorReady(quill) {
        console.log('editor ready!', quill)
      }
    },
    computed: {
      editorA() {
        return this.$refs.quillEditorA.quill
      },
      editorB() {
        return this.$refs.quillEditorB.quill
      }
    },
    mounted() {
      console.log('this is quill A instance object', this.editorA, 'B instance', this.editorB)
    }
	})