Uncaught TypeError: Cannot read properties of undefined (reading 'emit') VueQuill Vue3

Question

Using VueQuill in my vue3 app i am receving the following console error when trying to show a html string -

My code -

<template>
  <div class="">
      <QuillEditor v-model:content="data" contentType="html" />
  </div>
</template>

<script>
import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css';

export default {
  name: 'HomeView',
  components: {
    QuillEditor
  },
  setup(){
    const data = "<div><p>test test test</p></div>"

    return {
      data
    }
  }
}
</script>

This error only appears when using the following prop

contentType="html"

The error does not show when using

contentType="text"

What i have tried

Wrapping the QuillEditor element with -

<div v-if="data !== undefined">
  <QuillEditor v-model:content="data" contentType="html" />
</div>

To ensure that the data is mounted before creating QuillEditor however this does not work.

Answer 1

After recreating some examples, I can say a div is not an HTML tag that Quill exports or uses in its HTML format.

If you would write anything inside the Quill editor and export its HTML then you can notice what HTML tags it generates. For example, type any text inside the editor and format it using all toolbar options and look at the HTML the editor exports-

It would look something like this-

<ul><li><strong style="background-color: rgb(255, 255, 255);">Lorem <em><u>Ipsum</u></em></strong><span style="background-color: rgb(255, 255, 255);">&nbsp;is simply dummy text of the printing and typesetting industry. </span></li></ul><ol><li><strong style="background-color: rgb(255, 255, 255);">Lorem <em><u>Ipsum</u></em></strong><span style="background-color: rgb(255, 255, 255);">&nbsp;is simply dummy text of the printing and typesetting industry. </span></li></ol> 

You can see here that no div tag has been used in exported HTML, all tags are formatted tags (bold, italic, list, etc.) and that could be a reason when you use contentType="html", it tries to match the valid HTML tag and fails.

Here is the Working Sandbox where you can examine the exported HTML in the console. (Type anything inside the editor, format it using all toolbar options, and see the HTML when focusing out from the editor.)

If you will remove the div tag from your example and try only <p>test test test</p>, it would work because p is a valid HTML tag according to its structure.

You can read more about formats inside Quill Delta docs.

Answer 2

I think the editor parses the html content and converts it to Quill "internal nodes". And apparently, there is no node for "div" tag in the Quill editor, thus the content of the editor is null, and it fails to initialize.

Solution, change the html content to something that has a meaning for Quill editor, for example <h1>This is a heading</h1> or, taking your example, <p>test test test</p>.

Working codesandbox.