vue2 tiptap 实现

Vue2和Tiptap的结合可以实现一个富文本编辑器。下面是一个简单的示例：

首先，确保已经安装了Vue和Tiptap：

npm install vue tiptap

然后，在Vue组件中使用Tiptap编辑器：

<template>
  <div>
    <tiptap-editor v-model="content" />
  </div>
</template>

<script>
import { TiptapEditor } from 'tiptap'
import { EditorContent } from 'tiptap-extensions'

export default {
  components: {
    TiptapEditor,
  },
  data() {
    return {
      content: '',
    }
  },
  mounted() {
    this.content = new EditorContent({
      content: [
        {
          type: 'heading',
          attrs: {
            level: 1,
          },
          content: [
            {
              type: 'text',
              text: 'Hello, Tiptap!',
            },
          ],
        },
        {
          type: 'paragraph',
          content: [
            {
              type: 'text',
              text: 'This is a Tiptap editor.',
            },
          ],
        },
      ],
    })
  },
}
</script>

在上面的示例中，我们使用了`tiptap-editor`组件来创建一个编辑器，并通过`v-model`指令将编辑器的内容绑定到`content`数据属性上。在`mounted`钩子函数中，我们初始化了编辑器的内容。

当用户编辑文本时，`content`数据属性会自动更新。你可以在组件中访问`this.content`来获取当前编辑器的内容。

这只是一个简单的示例来演示如何在Vue2中使用Tiptap。你可以根据自己的需求进一步定制编辑器的功能和样式。