-
Notifications
You must be signed in to change notification settings - Fork 1.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Editor: v-model
not updating with Quill v2.0
#5606
Comments
Same thing here. The editor works to write new texts. To edit something is not working |
Same issue. |
Same issue here and I couldn't figure out anything I could do even for a temporary fix. |
The same for me here, everyone that can help us, please give us some lights. |
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:
|
That worked. However, we have the performance problem mentioned here: vueup/vue-quill#409 |
Thanks, I did notice that in my project but I didn't debug it yet, so thats good to know. |
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.
|
Many thanks @agm1984, it works for me |
For reference: This is the corresponding issue (and PR) from primefaces/primereact repository. A fix for PrimeVue could be almost copy & paste, I guess: |
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');
}, |
this worked but also had to call my const editorLoad = () => {
const newValue = isEditing.value || isCreating.value
? editingValue.value
: selectedValue.value;
const delta = editor.value.quill.clipboard.convert({
html: newValue || ""
});
nextTick(() => editor.value.quill.setContents(delta));
};
watch([selectedValue, isEditing, isCreating], editorLoad); |
Using script setup const editorRef = ref()
watch(editorRef, (editor) => {
if (!editor) return
// Hack needed for Quill v2: https://github.com/primefaces/primevue/issues/5606#issuecomment-2093536386
editor.renderValue = function renderValue(value) {
if (this.quill) {
if (value) {
const delta = this.quill.clipboard.convert({ html: value })
this.quill.setContents(delta, 'silent')
} else {
this.quill.setText('')
}
}
}.bind(editor) // Bind needed for production build
}) <Editor ref="editorRef" /> |
worked for me , using script setup . I just replace value with postItem.value.content, where postItem is also a ref taking a new value when the component is mounted :
|
You can define a new customized component 'MyEditor': <script setup>
import Editor from "primevue/editor"
const props = defineProps({
modelValue: {
type: String,
default: ""
}
})
const emits = defineEmits(["update:modelValue"])
const onLoad = ({instance}) => {
instance.setContents(instance.clipboard.convert({
html: props.modelValue
}))
}
const onChange = (v) => {
emits("update:modelValue", v)
}
</script>
<template>
<Editor editorStyle="height: 20em" @load="onLoad" @update:modelValue="onChange"></template>
</Editor>
</template> works well with |
This worked perfect. Thank you so much! |
Based on my previous answer, an easier way is to patch import Editor from 'primevue/editor';
// Fix needed for Quill v2: https://github.com/primefaces/primevue/issues/5606#issuecomment-2203975395
Editor.methods.renderValue = function renderValue(value) {
if (this.quill) {
if (value) {
const delta = this.quill.clipboard.convert({ html: value });
this.quill.setContents(delta, 'silent');
} else {
this.quill.setText('');
}
}
}; In TypeScript: import Editor from 'primevue/editor';
// Fix needed for Quill v2: https://github.com/primefaces/primevue/issues/5606#issuecomment-2203975395
;(Editor as any).methods.renderValue = function renderValue(
this: { quill?: Quill },
value: string,
) {
if (this.quill) {
if (value) {
const delta = this.quill.clipboard.convert({ html: value })
this.quill.setContents(delta, 'silent')
} else {
this.quill.setText('')
}
}
} This needs to be executed only once and it will apply to every instance of
|
If you want to be able to use Quill 2.0+ with <script setup>, TypeScript and have access to all props: @/components/TextEditor.vue
|
@agm1984 Thank you so much bro, it works for me |
This Chrome deprecation has taken effect two days ago (23rd July) and since then I've started seeing this error on any pages with the editor component: This is visible in the console logs of the official site as well. It looks like this is caused by quill v1 😨 (I'm not sure if quill v2 resolves this). Edit: I see that the deprecation is indeed addressed in v2, as per the linked issue: #5381 (comment) |
Funcionou certinho!! Obrigadoo Tive um pequeno desafio pois meu componente não inicializava com o conteúdo pois a página onde ele estava inserido realizava uma requisição à API, daí para garantir o carregamento, apliquei o seguinte código:
|
I just updated PrimeVue to v4 and got this issue when I bumped up Quill to v2. This problem is still happening. |
Funcionou perfeitamente aqui, muito obrigado pela ajuda. |
Hi everyone, I updated the Quill version from 1.3.7 to 2.0.2, and after the update, I noticed that when opening a record to update the value in the text editor, the editor wasn't picking up the existing values correctly. I found a solution in this conversation and implemented it in my project. Now, everything is working as expected. I created a separate file for the text editor component:
` <Editor v-model="localModelValue" @update:modelValue="changeNotificationQuillEditor" editorStyle="height: 20em" @load="onLoad" /> <script lang="ts"> import { defineComponent, ref, PropType } from 'vue'; import Editor from 'primevue/editor'; export default defineComponent({ name: 'TextEditor', props: { modelValue: { type: String, required: true }, changeNotificationQuillEditor: { type: Function as PropType<(value: string) => void>, required: true }, }, components: { Editor }, setup(props: any) { const localModelValue = ref(props.modelValue); const onLoad = ({ instance }: any) => { instance.setContents(instance.clipboard.convert({ html: props.modelValue })); }; return { onLoad, localModelValue }; } }); </script> ` Then, I simply called this component and passed the required value: @agm1984 hope this will help you. |
Hi there, For the ones who use vue3 or nuxt3 with primevue v3 and quill 2.0.2, this solution properly works during init and updates:
Using it this way:
Will be nice to add it to primevue 3... |
Hi there. When I install latest quill version then the bullet list option in toolbar adds ol tags instead of ul tags. In 1.3.7 version it works correctly. What is the workaround since the 1.3.7 is not safe to use. Thanks in advance |
In Nuxt version 3.13.2 with Nitro 2.9.7, the Quill option version 2.0.2 does not work with v-model and cannot render the content editor inside itself. |
I've had this issue as well |
It's worked, thank you |
Thank you very much, the problem is solved |
“I wish they would solve this issue within the component itself so that this code wouldn’t be necessary.” |
This worked for me. Thank you |
If anyone else is having problems editing links with this, i.e you add a link, then go back and edit it, if Quill is clearing your text, it's because setContents is getting called and deleting the text even if your model value persists. This is what we did to "fix" that.
|
Describe the bug
Quill v2.0 is now officially released (see https://github.com/quilljs/quill/releases). PrimeVue's docs state to simply run
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: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
v-model
valueExpected behavior
The content of the Editor should change. It does not.
The text was updated successfully, but these errors were encountered: