如何在Vue 3中动态更新TipTap编辑器内容？

你当前的代码中，useEditor初始化时仅读取了generatedText的初始值，之后generatedText变化时编辑器不会自动感知并更新——因为content参数只在初始化阶段生效，并非响应式绑定的。

解决方法 #

通过监听generatedText的变化，主动调用编辑器实例的setContent方法同步内容，同时添加标志位避免循环更新：

<template>
  <editor-content :editor="editor" />
</template>

<script setup>
import { ref, watch } from 'vue'
import { useEditor, EditorContent } from '@tiptap/vue-3'
import StarterKit from '@tiptap/starter-kit'

const generatedText = ref('<p>Hello!</p>')
// 标记是否为外部触发的更新，避免循环
let isExternalUpdate = false

const editor = useEditor({
  content: generatedText.value,
  extensions: [StarterKit],
  onUpdate: ({ editor }) => {
    // 仅在编辑器内部修改时同步回generatedText
    if (!isExternalUpdate) {
      generatedText.value = editor.getHTML()
    }
    isExternalUpdate = false
  }
})

// 监听generatedText变化，同步到编辑器
watch(generatedText, async (newContent) => {
  if (editor.value && newContent !== editor.value.getHTML()) {
    isExternalUpdate = true
    await editor.value.setContent(newContent)
  }
})
</script>

关键说明 #

1. 标志位控制：isExternalUpdate用于区分内容更新是来自外部（generatedText变化）还是编辑器内部操作，避免onUpdate和watch互相触发造成循环。
2. 内容一致性判断：更新前对比新内容和编辑器当前内容，避免不必要的重复更新。
3. 异步调用：setContent是异步方法，使用await确保更新完成后再重置标志位。

内容的提问来源于stack exchange，提问作者Brunno Vert