How to use v-model in quill editor

In Vue.js, v-model is typically used for implementing two-way data binding. However, Quill Editor is not a native Vue component with built-in support for v-model, so we need a method to integrate Quill with Vue and achieve similar functionality.

Step 1: Install Quill Editor

First, install Quill Editor in your Vue project using npm:

bash
npm install quill

Step 2: Create a Vue Component

You can create a Vue component that encapsulates Quill, enabling easier reuse across multiple locations.

vue
<template>
  <div ref="editor"></div>
</template>

<script>
import Quill from 'quill';

export default {
  props: {
    value: {
      type: String,
      default: ""
    }
  },
  mounted() {
    this.quill = new Quill(this.$refs.editor, {
      theme: 'snow'
    });

    this.quill.on('text-change', () => {
      this.$emit('input', this.quill.root.innerHTML);
    });

    this.quill.root.innerHTML = this.value;
  },
  watch: {
    value(newValue) {
      if (this.quill.root.innerHTML !== newValue) {
        this.quill.root.innerHTML = newValue;
      }
    }
  }
};
</script>

Step 3: Implement v-model with the Component

In this component, we listen for the text-change event of Quill. When text changes, we emit the current content using this.$emit('input', this.quill.root.innerHTML), allowing the external v-model to update its value.

Additionally, we use Vue's watch to monitor changes in value. When the external v-model's value changes, we synchronize the update to the Quill Editor's content.

Step 4: Use the Custom Component in the Parent Component

vue
<template>
  <div>
    <quill-editor v-model="myText"></quill-editor>
  </div>
</template>

<script>
import QuillEditor from './components/QuillEditor.vue';

export default {
  components: {
    QuillEditor
  },
  data() {
    return {
      myText: '<p>Hello Quill!</p>'
    }
  }
}
</script>

The above provides a simple example of integrating Quill Editor with Vue to achieve two-way data binding similar to v-model. This approach allows you to flexibly use Quill Editor in your Vue application while maintaining data synchronization.