Editor: v-model not updating with Quill v2.0

[FeBe95]

Describe the bug

Quill v2.0 is now officially released (see https://github.com/quilljs/quill/releases). PrimeVue's docs state to simply run

npm install quill

to make the Editor component work. Displaying and editing the text inside the editor works just fine, but directly manipulating the v-model value does not. This issue was mentioned here as well:

• Editor: Deprecation warning in console, missing functionality with quill v2.0.0 #5381

I know that there are plans to replace Quill with a custom solution (mentioned in a discussion here), but until then a fix for this issue would be very appreciated.

Reproducer

https://stackblitz.com/edit/primevue-create-vue-issue-template-fsd4z9

PrimeVue version

3.51.0

Vue version

3.x

Language

ALL

Build / Runtime

Vite

Browser(s)

No response

Steps to reproduce the behavior

1. Use the Editor component
2. Set/update the v-model value

Expected behavior

The content of the Editor should change. It does not.

[pedrodruviaro]

Same thing here. The editor works to write new texts. To edit something is not working

[jeverduzco]

Same thing here. The editor works to write new texts. To edit something is not working

Same issue.

[kristuu]

Same issue here and I couldn't figure out anything I could do even for a temporary fix.

[arikardnoir]

The same for me here, everyone that can help us, please give us some lights.

[agm1984]

In the meantime you can install quill 1.3.7. that's the latest non-2.0 version.

I just came to visit after seeing this in my console:

# npm audit report

quill  <=1.3.7
Severity: moderate
Cross-site Scripting in quill - https://github.com/advisories/GHSA-4943-9vgg-gr5r
fix available via `npm audit fix --force`
Will install quill@2.0.0, which is a breaking change

[pedrodruviaro]

In the meantime you can install quill 1.3.7. that's the latest non-2.0 version.

I just came to visit after seeing this in my console:

# npm audit report

quill  <=1.3.7
Severity: moderate
Cross-site Scripting in quill - https://github.com/advisories/GHSA-4943-9vgg-gr5r
fix available via `npm audit fix --force`
Will install quill@2.0.0, which is a breaking change

That worked. However, we have the performance problem mentioned here: vueup/vue-quill#409
But I think this is the best solution until this v-model problem is not resolved

[agm1984]

That worked. However, we have the performance problem mentioned here: vueup/vue-quill#409 But I think this is the best solution until this v-model problem is not resolved

Thanks, I did notice that in my project but I didn't debug it yet, so thats good to know.

[arikardnoir]

In the meantime you can install quill 1.3.7. that's the latest non-2.0 version.
I just came to visit after seeing this in my console:

# npm audit report

quill  <=1.3.7
Severity: moderate
Cross-site Scripting in quill - https://github.com/advisories/GHSA-4943-9vgg-gr5r
fix available via `npm audit fix --force`
Will install quill@2.0.0, which is a breaking change

That worked. However, we have the performance problem mentioned here: vueup/vue-quill#409 But I think this is the best solution until this v-model problem is not resolved

What you guys did? i cant understand, im already using quill 2.0.0, and still not working the getting the value

[agm1984]

What you guys did? i cant understand, im already using quill 2.0.0, and still not working the getting the value

I left quill at version 1.3.7 until v2 is supported.

$ npm uninstall --save quill
$ npm install --save quill@^1.3.7

[arikardnoir]

What you guys did? i cant understand, im already using quill 2.0.0, and still not working the getting the value

I left quill at version 1.3.7 until v2 is supported.

$ npm uninstall --save quill
$ npm install --save quill@^1.3.7

Many thanks @agm1984, it works for me

[FeBe95]

For reference: This is the corresponding issue (and PR) from primefaces/primereact repository. A fix for PrimeVue could be almost copy & paste, I guess:

• Editor: Support for Quill 2.0.0 primereact#5960
• Fix #5960: Quill 2.0.0 support primereact#6429

[LeonardoRochaInacio]

Probably the best solution for this issue while using quill >= 2.0.0 is:

First, set a ref for the editor component and bind a method for the load event emitted by the component

<Editor ref="editor" v-model="form.description" @load="editorLoad">

So, after that, create a method for being executed after editor load:

editorLoad({instance}) {
    const delta = this.$refs.editor.quill.clipboard.convert({ html: "<p>your html goes here!</p>" });
    this.$refs.editor.quill.setContents(delta, 'silent');
},