Vue 3

了解如何将 Tiptap 集成到你的 Vue 3 项目中，使用本分步指南。或者，你也可以查看我们的 Vue 文本编辑器示例。

要求

• 你的计算机上已安装 Node
• 你的计算机上已安装 Vue CLI
• 具备 Vue 的使用经验

创建项目（可选）

如果你已经有一个 Vue 项目，那也没问题，可以跳过此步骤。

在本指南中，我们将从头开始创建一个新的 Vue 项目，命名为 my-tiptap-project。Vue CLI 会自动设置好所需的一切，确保选择 Vue 3 模板。

# 创建项目
vue create my-tiptap-project
# 进入项目目录
cd my-tiptap-project

安装依赖

好了，模板项目已经准备就绪，现在终于可以安装 Tiptap 了！在下面的示例中，你需要安装 @tiptap/vue-3 包、@tiptap/pm（ProseMirror 库）以及 @tiptap/starter-kit，后者包含了大多数常见扩展，可以帮助你快速上手。

npm install @tiptap/vue-3 @tiptap/pm @tiptap/starter-kit

如果你已经完成了上面的步骤，现在可以使用 npm run dev 启动你的项目，并在浏览器中打开 http://localhost:8080。如果你是在现有项目上进行操作，端口号可能会有所不同。

集成 Tiptap

要开始使用 Tiptap，你需要在应用中添加一个新组件。我们将其命名为 Tiptap，并在 components/Tiptap.vue 文件中添加以下示例代码。

这是在 Vue 中快速运行 Tiptap 的最快方法。它提供了一个非常基本的 Tiptap 版本，不带任何按钮。不用担心，稍后你可以添加更多功能。

<template>
  <editor-content :editor="editor" />
</template>
<script>
  import { Editor, EditorContent } from '@tiptap/vue-3'
  import StarterKit from '@tiptap/starter-kit'
  export default {
    components: {
      EditorContent,
    },
    data() {
      return {
        editor: null,
      }
    },
    mounted() {
      this.editor = new Editor({
        content: "<p>I'm running Tiptap with Vue.js. 🎉</p>",
        extensions: [StarterKit],
      })
    },
    beforeUnmount() {
      this.editor.destroy()
    },
  }
</script>

或者，你可以使用 Composition API 并结合 useEditor 方法。

<template>
  <editor-content :editor="editor" />
</template>
<script>
  import { useEditor, EditorContent } from '@tiptap/vue-3'
  import StarterKit from '@tiptap/starter-kit'
  export default {
    components: {
      EditorContent,
    },
    setup() {
      const editor = useEditor({
        content: "<p>I'm running Tiptap with Vue.js. 🎉</p>",
        extensions: [StarterKit],
      })
      return { editor }
    },
  }
</script>

或者，你也可以使用 Vue 3 的 <script setup> 语法。

<template>
  <editor-content :editor="editor" />
</template>
<script setup>
  import { useEditor, EditorContent } from '@tiptap/vue-3'
  import StarterKit from '@tiptap/starter-kit'
  const editor = useEditor({
    content: "<p>I'm running Tiptap with Vue.js. 🎉</p>",
    extensions: [StarterKit],
  })
</script>

将其添加到你的应用

现在，替换 src/App.vue 文件的内容，并使用 Tiptap 组件：

<template>
  <div id="app">
    <tiptap />
  </div>
</template>
<script>
  import Tiptap from './components/Tiptap.vue'
  export default {
    name: 'App',
    components: {
      Tiptap,
    },
  }
</script>

你现在应该可以在浏览器中看到 Tiptap 了。给自己点个赞吧！:)

使用 v-model（可选）

你可能已经习惯在表单中使用 v-model 进行数据绑定，Tiptap 也支持这种方式。以下是如何在 Tiptap 中使用 v-model 的示例：

<p>A Vue.js wrapper component for Tiptap to use <code>v-model</code>.</p>

index.vue

<template>
  <div>
    <editor v-model="content" />
    <div class="output-group">
      <label>Content</label>
      <code>{{ content }}</code>
    </div>
  </div>
</template>
<script>
import Editor from './Editor.vue'
export default {
  components: {
    Editor,
  },
  data() {
    return {
      content: '<p>A Vue.js wrapper component for Tiptap to use <code>v-model</code>.</p>',
    }
  },
}
</script>