How to use Quill text editor as a component in Vue.js

Question

I created quill text editor as a component in vue as you can see here:

<template>
  <div ref="editor"></div>
</template>
<script>
import Quill from 'quill';
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.bubble.css';
import 'quill/dist/quill.snow.css';

export default {
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      editor: null
    };
  },
  mounted() {
    var _this = this;

    this.editor = new Quill(this.$refs.editor, {
      modules: {
        toolbar: [[{
          header: [1, 2, 3, 4, false]
        }], ['bold', 'italic', 'underline', 'link']]
      },
      //theme: 'bubble',
      theme: 'snow',
      formats: ['bold', 'underline', 'header', 'italic', 'link'],
      placeholder: "Type something in here!"
    });
    this.editor.root.innerHTML = this.value;
    this.editor.on('text-change', function () {
      return _this.update();
    });
  },

  methods: {
    update: function update() {
      this.$emit('input', this.editor.getText() ? this.editor.root.innerHTML : '');
    }
  },
}
</script>

So it is a basic quill component and I use quill 1.3.7. For the documentation: https://quilljs.com/

So in the parent component I created v-model to see the result of this component:

<text-editor
                    v-model="model"/>
                <p> <span v-html="model"></span></p>

But unfortunately I dont get any response and no error either. What do you think I am doing wrong?

Answer 1

Even though you tagged the question as a Vue 2 question, I am going to guess you are using Vue 3 because otherwise, it should work just fine (I also tried your code and fixed it on Vue 3).
You are actually facing a breaking change issue.
When you want to update your data with a v-model now, you need to use :

• prop : value -> modelValue;
• event : input -> update:modelValue;

Your code should look like this for Vue 3 :

<template>
  <div ref="editor"></div>
</template>
<script>
import Quill from "quill";
import "quill/dist/quill.core.css";
import "quill/dist/quill.bubble.css";
import "quill/dist/quill.snow.css";

export default {
  props: {
    modelValue: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      editor: null,
    };
  },
  mounted() {
    var _this = this;

    this.editor = new Quill(this.$refs.editor, {
      modules: {
        toolbar: [
          [
            {
              header: [1, 2, 3, 4, false],
            },
          ],
          ["bold", "italic", "underline", "link"],
        ],
      },
      //theme: 'bubble',
      theme: "snow",
      formats: ["bold", "underline", "header", "italic", "link"],
      placeholder: "Type something in here!",
    });
    this.editor.root.innerHTML = this.modelValue;
    this.editor.on("text-change", function () {
      return _this.update();
    });
  },

  methods: {
    update: function update() {
      this.$emit(
        "update:modelValue",
        this.editor.getText() ? this.editor.root.innerHTML : ""
      );
    },
  },
};
</script>

Good luck with your project!