How to render/show quill raw html in vue.js?
How to render/show quill raw html in vue.js?
1 answer
by
ryleigh ,
2 months 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:
- 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.
- 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.