vue.jsvue-componentvuetify.jsquill

Vue 3 convert output of Quill editor Delta object to Html and display the Html

I am designing an app where users can comment using a rich text editor and those are displayed as a html object.

This is the code to take comments:

<quill-editor theme="snow" v-model:content="newComment"></quill-editor>

Where:

const newComment = ref('')

Now assuming that I want to show the comment (while taking into account all the features of the input, such as bullet points or bold text), I have this element

<div v-html="newComment"></div>

But the output of this div is [object Object], not the one I expected. Alternately, if I write <div>{{newComment}}</div> I just get a Delta object like { "ops": [ { "insert": "aaa\n" } ] } .

I read the documentation and similar code. There is some existing code but I could not find Vue 3 composition API case.

Solution

  • You have to specify the content type.

    <quill-editor theme="snow" v-model:content="newComment" content-type="html"></quill-editor>

    It will works