如何使用Vue 3动态更新TipTap内容?

Question

我可以用ref的值从编辑器设置内容的初始值，但是当ref的值发生变化时，它不会更新内容。

有人知道怎么做吗?

<editor-content
:editor="editor" 
v-model:content="
/>

<script setup>
import { ref } from 'vue'
import { useEditor, EditorContent } from '@tiptap/vue-3'
import StarterKit from '@tiptap/starter-kit'
const generatedText = ref('<p>Hello!</p>')
/* editor */
const editor = useEditor({
content: generatedText.value,
extensions: [
StarterKit,
],
onUpdate: ({editor}) => {
generatedText.value = editor.getHTML()
}
})
</script>

很抱歉，如果这个问题太愚蠢了，我在文档中找不到答案。

谢谢你的帮助!

Answer 1

如何生成generatedText ?通过tiptap ?

tiptap的v-model是编辑器。内容的价值。你可以给它一个初始状态但是如果你想改变编辑器。在与所见即所得(如onFocus)进行交互后，您可以使用:setContent

也许这有帮助:监听更改

Answer 2

等待编辑器，然后设置内容:

import { watch } from 'vue'
import { useEditor } from '@tiptap/vue-3'
const editor = useEditor({
content: ''
})
watch(editor, () => {
editor?.value?.commands.setContent('<p>Hi Mars</p>')
})