Vue Quill Editor

VueQuill Editor is a Component for building rich text editors and it is powered by Vue 3 and Quill. VueQuill is written entirely in TypeScript. It is easy to use. Quill is one of the best WYSIWYG editors. Here is an example of using Vue Quill Editor in your application.


HTML code

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

JavaScript code

Vue.use(VueQuillEditor)
new Vue({
	 el: '#vueapp',
	 data: {
     message: 'Hi from Vue.',
     content: '<h2>I\'m vue-quill-editor example</h2>',
     editorOption: {
        theme: 'snow'
      }
	 	},
    methods: {
      onEditorBlur(quill) {
        console.log('editor blur!', quill)
      },
      onEditorFocus(quill) {
        console.log('editor focus!', quill)
      },
      onEditorReady(quill) {
        console.log('editor ready!', quill)
      }
    },
    computed: {
      editor() {
        return this.$refs.quillEditor.quill
      }
    },
    mounted() {
      console.log('this is quill instance object', this.editor)
    }
	})

CSS code

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