How to bind two Quill Editor instances to different v-models? - vue.js

Question

I want to render two quill editor elements into one vue component. The editors are supposed to have their own v-model attached to them, so they can send data to different databases. I want to differentiate between both editor elements via description prop.
component.vue:
<p>Description:</p>
<text-editor description="true"/>
<p>Content:</p>
<text-editor/>
So if description="true" a v-if directive is triggered and renders the corresponding editor element.
text-editor.vue:
<template>
<div id="text-editor" class="text-editor">
<quill-editor v-if="descr" ref="quillDescr" :modules="modules" :toolbar="toolbar" v-model:content="descr" contentType="html"/>
<quill-editor v-else ref="quill" :modules="modules" :toolbar="toolbar" v-model:content="content" contentType="html"/>
</div>
</template>
<script setup>
import BlotFormatter from 'quill-blot-formatter'
import store from "../../../js/store";
import {watch, ref, nextTick, defineProps} from 'vue'
import {Quill} from "#vueup/vue-quill";
const props = defineProps({
description: false
})
const content = ref('')
const descr = ref('')
const quill = ref(null)
const quillDescr = ref(null)
store.re.body = ''
store.re.descr = ''
let newContent = ''
let newDescr = ''
Quill.debug('error')
watch(content, newValue => {
newContent = newValue
store.re.body = newValue
})
watch(descr, newValueDescr => {
newDescr = newValueDescr
store.re.descr = newValueDescr
})
watch(
() => store.re.body,
newValue => {
if (newContent === newValue) return
quill.value.setHTML(newValue)
// Workaround https://github.com/vueup/vue-quill/issues/52
// move cursor to typing position
nextTick(() => {
let q = quill.value.getQuill()
q.setSelection(newValue.length, 0, 'api')
q.focus()
})
}
)
watch(
() => store.re.descr,
newValueDescr => {
if (newDescr === newValueDescr) return
quillDescr.value.setHTML(newValueDescr)
// Workaround https://github.com/vueup/vue-quill/issues/52
// move cursor to typing position
nextTick(() => {
let qd = quillDescr.value.getQuill()
qd.setSelection(newValueDescr.length, 0, 'api')
qd.focus()
})
}
)
const modules = {
module: BlotFormatter,
}
const toolbar = [
[{ header: [1, 2, 3, 4, 5, 6, false] }],
[{ size: ['small', false, 'large', 'huge'] }],
['bold', 'italic', 'underline', 'strike'],
['blockquote', 'code-block'],
[{ align: [] }],
[{ list: 'ordered' }, { list: 'bullet' }],
[{ color: [] }, { background: [] }],
[{ font: [] }],
['link', 'image', 'video'],
['clean'],
]
</script>
Being not very experienced with watchers, I've tried duplicating the corresponding v-model:content:
<quill-editor v-if="descr" ref="quillDescr" v-model:content="descr"/>
<quill-editor v-else ref="quill" v-model:content="content"/>
ref:
const quillDescr = ref(null)
store.re.descr = ''
let newDescr = ''
as well as watcher parameters:
watch(descr, newValueDescr => {
newDescr = newValueDescr
store.re.descr = newValueDescr
})
But when I type in one editor field, the other editor field is filled with the letters I'm typing as well:
How would I configure the watchers so that they only watch the corresponding editor input?

Answer 1

I suspect it has to do with the DOM manipulation done in quill.js, which conflicts with Vue's own management of the virtual DOM.
However, I was able to resolve the issue by implementing the following optimizations.
Optimizations
You can significantly reduce the duplication of code and have a single <quill-editor> by conditionally setting store.re.body/store.re.descr based on props.description:
<template>
<div id="text-editor" class="text-editor">
<quill-editor ref="quill" :modules="modules" :toolbar="toolbar" v-model:content="content" contentType="html" />
</div>
</template>
<script setup>
⋮
const props = defineProps({
description: Boolean,
})
👇
if (props.description) {
store.re.descr = ''
} else {
store.re.body = ''
}
watch(content, newValue => {
newContent = newValue
👇
if (props.description) {
store.re.descr = newValue
} else {
store.re.body = newValue
}
})
watch(
() => props.description ? store.re.descr : store.re.body, 👈
newValue => {⋯}
)
⋮
</script>
demo 1
But this solution does not scale well if you later need to have the editor update more store properties (e.g., store.re.title and store.re.subtitle). A better solution would be to make the editor update any given property via a v-model implementation:
Define a modelValue string prop (via defineProps).
Define an update:modelValue emit with a string value (via defineEmits).
In the watch that sets store.re.body/store.re.descr, emit the update:modelValue event with new value.
In the watch for store.re.body/store.re.descr, change the watch's source to be props.modelValue.
<script setup>
⋮
1️⃣
const props = defineProps({
modelValue: String,
})
2️⃣
const emit = defineEmits({
'update:modelValue': value => true,
})
watch(content, newValue => {
newContent = newValue
3️⃣
emit('update:modelValue', newValue)
})
watch(
() => props.modelValue, 4️⃣
newValue => {⋯}
)
⋮
</script>
Then in the parent component, use v-model to bind store.re.body/store.re.descr:
<text-editor v-model="store.re.descr" />
<text-editor v-model="store.re.body" />
For some reason, setting store.re.body and store.re.descr in the parent component does not update the v-model in this case, but you can workaround that by using a computed prop. To make the changes to store.re.body reactive in this example:
<template>
<text-editor v-model="body" />
</template>
<script setup>
import { computed } from 'vue'
const body = computed({
get: () => store.re.body,
set: v => store.re.body = v,
})
</script>
demo 2