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

Question

我想显示一些 html，从 quill editor 中的数据库中获取。 html 似乎没问题（显示在 <p> 段落中）并通过 v-model 绑定到 quill editor 但它只是没有显示：

<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). The watch was removed in an attempt to fix another bug, where the cursor would reset to the beginning of the line.

作为解决方法，在 content 上添加您自己的手表，并调用 quill-editor 的 setHTML() with the new value. However, you'll need to move the cursor to the end of the line (using Quill's setSelection()) 来解决上述错误：

<template>
  <quill-editor ref="quill" v-model:content="content" ⋯/>
</template>

<script setup>
import store from '@/store'
import { watch, ref, nextTick } from 'vue'

const content = ref('')
const quill = ref(null)
let newContent = ''

watch(content, newValue => {
  newContent = newValue
  store.re.body = newValue
})

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 end
    nextTick(() => {
      let q = quill.value.getQuill()
      q.setSelection(newValue.length, 0, 'api')
      q.focus()
    })
  }
)

⋮
</script>

<template>
  <quill-editor ref="quill" ⋯/>
</template>

demo

Answer 2

你应该试试下面的例子

    <script>
     import {QuillEditor} from "@vueup/vue-quill";
     export default {
       components: {
         QuillEditor, 
       },
 data(){
    return {
     someText:''
   }
}, 
   computed: {
     editor() {
      return this.$refs.quillEditor;
     },
   },
   methods: {
     getSetText() {
       this.someText = "<div><p>this is some text</p> </div>";
       this.editor.setHTML(this.someText);
      },
     }, 
   }
 </script>

    <template><quill-editor ref="quillEditor" contentType="html"v-model:content="someText" theme="snow" ></quill-editor></template>

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

Quill Editor won't display v-model in input field (Vue 3)

vue.js

vuejs3

wysiwyg

quill

vue-quill-editor