使用 Vue 标记视图

如果你习惯于使用 Vue，则使用 Vanilla JavaScript 可能会感觉复杂。好消息是：你也可以在标记视图中使用常规的 Vue 组件。你只需要知道一点小知识，但我们来逐步了解。

渲染 Vue 组件

要在编辑器内渲染 Vue 组件，你需要执行以下操作：

创建一个标记扩展
创建一个 Vue 组件
将该组件传递给提供的 VueNodeViewRenderer
使用 addMarkView() 注册它
配置 Tiptap 使用你的新标记扩展

下面是你的节点扩展的示例：

import { Mark } from '@tiptap/core'
import { VueMarkViewRenderer } from '@tiptap/vue-3'

import Component from './Component.jsx'

export default Mark.create({
  // 选项…

  addMarkView() {
    return VueMarkViewRenderer(Component)
  },
})

以下是 Vue 组件的示例：

<template>
  <span className="content" data-test-id="mark-view">
    <mark-view-content />
    <label contenteditable="false"
      >Vue 组件::
      <button @click="increase" class="primary">
        此按钮已被点击 {{ count }} 次。
      </button>
    </label>
  </span>
</template>

<script>
import { MarkViewContent, markViewProps } from '@tiptap/vue-3'
export default {
  components: {
    MarkViewContent,
  },
  data() {
    return {
      count: 0,
    }
  },
  props: markViewProps,
  methods: {
    increase() {
      this.count += 1
    },
  },
}
</script>

明白了吗？让我们看看它是如何运作的。欢迎随意复制以下示例以开始使用。

更新标记视图属性

更新标记视图的属性非常简单。您可以使用组件属性提供的 updateAttributes 方法。

<template>
  <span :id="HTMLAttributes.id" className="content">
    <mark-view-content />
  </span>
</template>

<script>
import { MarkViewContent, markViewProps } from '@tiptap/vue-3'
export default {
  components: {
    MarkViewContent,
  },
  props: markViewProps,
  methods: {
    increase() {
      this.count += 1
    },
    updateId() {
      this.updateAttributes({ id: Date.now() })
    }
  },
}
</script>