在 Vue 3 中将 Tiptap 与 v-model 和 <script setup> 一起使用

Question

我正在尝试将tiptap 与Vue.js 结合使用，并采用<script setup>创建单文件组件（SFC）的方法。

文本编辑器.vue

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

<script lang="ts" setup>
import { useEditor, EditorContent } from '@tiptap/vue-3'
import StarterKit from '@tiptap/starter-kit'

const props = defineProps({
  modelValue: {
    type: String,
    default: "",
  }
})

const emit = defineEmits(['update:modelValue'])

const editor = useEditor({
  content: props.modelValue,
  extensions: [StarterKit],
  onUpdate: ({editor}) => {
    let content = editor.getHTML()
    emit('update:modelValue', content)
  }
})
</script>

然后我像这样使用这个组件：

<template>
  <text-editor v-model="myModel.content" />
</template>

这在定义后<text-editor>加载时有效。 myModel.content

但是，如果从我的数据库 API 设置了<text-editor>“loads before myModel.content ”，则文本内容将保持空白。根据我通过查看tiptap文档中的示例所了解到的，我需要以某种方式使用类似这样的方法watch来更新我的editor时间更改：props.modelValue

watch(() => props.modelValue, (newValue, oldValue) => {
  const isSame = newValue === oldValue
  console.log(`Same: ${isSame}`)
  if (isSame) {
    return
  }
  editor.commands.setContent(newValue, false)
})

但是，在上面的代码片段中，editor是一种ShallowRef类型，并且没有对commandscall 的引用setContent。

使用该方法加载 Tiptap 时，使上述示例正常工作的最佳方法是什么<script setup>？

Answer 1

您需要使用以下命令访问参考实际值.value

editor.value?.commands.setContent('<p>test</p>', false)