Quill编辑器不会在输入字段中显示v-模型(Vue 3)
Quill编辑器不会在输入字段中显示v-模型(Vue 3)
提问于 2022-03-14 13:28:30
我想显示一些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>段落，但编辑器输入仍然是空的：
Stack Overflow用户
发布于 2022-04-21 10:15:58
您应该尝试使用下面的示例
<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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71468563
复制相关文章
相似问题
腾讯云开发者
