Quill 编辑器不会在输入字段中显示 v-model (Vue 3)

Question

我想显示一些html从数据库中获取的内容quill editor。似乎html很好（在<p>段落中显示）并且绑定到quill editorvia v-model，但它只是不显示：

<template>
  <div id="text-editor" class="text-editor">
    <quill-editor :modules="modules" :toolbar="toolbar" v-model:content="store.re.body" contentType="html"/>
    <p>{{store.re.body}}</p>
  </div>
</template>


<script setup>
import BlotFormatter from 'quill-blot-formatter'
import store from "../../../js/store";

store.re.body = ''

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>

这是从数据库获取数据的地方（在另一个 vue 组件内）：

axios.get('/get-blog', {
        params: {
            id: state.id
        }
    })
    .then(res => {
        state.body = store.re.body = res.data[0].body
    })
    .catch(err => {
        state.error = true
        setTimeout(() => state.error = false, 5000)
    })

我正在使用store.re.body（反应性存储）将其传输到quill editor.

store.js:

import {reactive} from "vue";

const re = reactive({})

export default {
    re
}

在这里您可以看到editor page下面显示的工作<p>段落，但编辑器输入保持为空：

Answer 1

该quill-editor组件不观察props.content( vueup/vue-quill#35)。手表被移除是为了修复另一个错误，该错误中光标会重置到行首。

\n

作为解决方法，请在 上添加您自己的监视content，并使用新值调用quill-editor\'s 。setHTML()但是，您需要将光标移动到行尾（使用 Quill's setSelection()）来解决上述错误：

\n

<template>\n  <quill-editor ref="quill" v-model:content="content" \xe2\x8b\xaf/>\n</template>\n\n<script setup>\nimport store from \'@/store\'\nimport { watch, ref, nextTick } from \'vue\'\n\nconst content = ref(\'\')\nconst quill = ref(null)\nlet newContent = \'\'\n\nwatch(content, newValue => {\n  newContent = newValue\n  store.re.body = newValue\n})\n\nwatch(\n  () => store.re.body,\n  newValue => {\n    if (newContent === newValue) return\n\n    quill.value.setHTML(newValue)\n\n    // Workaround https://github.com/vueup/vue-quill/issues/52\n    // move cursor to end\n    nextTick(() => {\n      let q = quill.value.getQuill()\n      q.setSelection(newValue.length, 0, \'api\')\n      q.focus()\n    })\n  }\n)\n\n\xe2\x8b\xae\n</script>\n\n<template>\n  <quill-editor ref="quill" \xe2\x8b\xaf/>\n</template>\n

\n

演示

\n