我想顯示一些html，從quill editor. html似乎很好（在段落中顯示）<p>并且系結到quill editorviav-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(reactive store) 將其傳輸到quill editor.
store.js：
import {reactive} from "vue";
const re = reactive({})
export default {
re
}
在這里，您可以看到editor page下面顯示的作業<p>段落，但編輯器輸入保持為空：
uj5u.com熱心網友回復：
該quill-editor組件不監視props.content( vueup/vue-quill#35)。手表被移除以試圖修復另一個錯誤，其中游標將重置到行的開頭。
作為一種解決方法，在 上添加您自己的手表，并使用新值content呼叫quill-editor's 。setHTML()但是，您需要將游標移動到行尾（使用 Quill's setSelection()）來解決上述錯誤：
<script setup>
import store from '@/store'
import { watch, ref, nextTick } from 'vue'
const quill = ref(null)
watch(
() => store.re.body,
newValue => {
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>
演示
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/444708.html