How to display the value coming from quill in vue.js?

@ryan.murray 

To display the value coming from Quill in Vue.js, you can follow these steps:

1. In your Vue component, create a data property to store the Quill editor instance and a variable to hold the content of the editor:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

<template>
  <div>
    <div ref="quillEditor"></div>
    <div v-html="content"></div>
  </div>
</template>

<script>
import Quill from 'quill';

export default {
  data() {
    return {
      quill: null,
      content: ''
    };
  },
  mounted() {
    this.quill = new Quill(this.$refs.quillEditor, {
      theme: 'snow'
    });
    this.quill.on('text-change', () => {
      this.content = this.quill.root.innerHTML;
    });
  },
};
</script>

1. Use the ref attribute to reference the Quill editor container element in the HTML template.
2. In the mounted hook, initialize the Quill editor instance and listen for the text-change event to update the content variable with the HTML content of the editor.
3. Use the v-html directive in the HTML template to render the content as HTML.
4. When you type in the Quill editor, the content variable will be updated and displayed in the div with the v-html directive.

By following these steps, you can display the value coming from Quill in Vue.js.