vue.js - 在 Vue 3 中将 tiptap 与 v-model 和 <script setup> 结合使用

Question

我正在尝试将 tiptap 与 Vue.js 结合使用 <script setup>创建单个文件组件 (SFC) 的方法。

TextEditor.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已定义。

但是，如果<text-editor>加载之前 myModel.content从我的数据库 API 设置，然后文本内容保持空白。根据我通过查看 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类型并且没有对 commands 的引用调用setContent .

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

Answer 1

您需要使用 .value 访问 ref 实际值

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