How to render/show quill raw html in vue.js?

by elise_daugherty , in category: Javascript , 20 days ago

How to render/show quill raw html in vue.js?

Facebook Twitter LinkedIn Telegram Whatsapp

1 answer

Member

by ryleigh , 20 days ago

@elise_daugherty 

To render and show raw HTML generated by Quill editor in Vue.js, you can make use of the v-html directive.


Here is an example of how you can render raw HTML from Quill in a Vue component:

  1. First, create a Quill editor instance in your Vue component:
 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
28
29
30
31
32
33
34
35
<template>
  <div>
    <div ref="editorElement"></div>
    <!-- Display the rendered HTML -->
    <div v-html="renderedHtml"></div>
  </div>
</template>

<script>
import Quill from 'quill';

export default {
  data() {
    return {
      quill: null,
      renderedHtml: ''
    };
  },
  mounted() {
    this.quill = new Quill(this.$refs.editorElement, {
      theme: 'snow',
      modules: {
        toolbar: [
          ['bold', 'italic', 'underline', 'strike'],
          ['link', 'image', 'video']
        ]
      }
    });

    this.quill.on('text-change', () => {
      this.renderedHtml = this.quill.root.innerHTML;
    });
  }
};
</script>


In the above code, we have created a Quill editor instance in the mounted hook of the Vue component. We are using the v-html directive to render the raw HTML generated by the Quill editor in the div element with the renderedHtml property bound to it.

  1. Remember to install Quill in your Vue project before using it:
1
npm install quill


By following these steps, you should be able to render and display raw HTML generated by Quill in your Vue.js component.