---
title: "Vue 2"
description: "学习如何在 Vue 2 中设置 Tiptap，以增强富文本编辑功能。请按照我们文档中的逐步指南操作！"
canonical_url: "https://tiptap.zhcndoc.com/editor/getting-started/install/vue2"
---

# Vue 2

学习如何在 Vue 2 中设置 Tiptap，以增强富文本编辑功能。请按照我们文档中的逐步指南操作！

本指南详细介绍了如何将 Tiptap 集成到你的 Vue 2 项目中。或者，你可以查看我们 [Vue 文本编辑器示例](https://tiptap.zhcndoc.com/examples/basics/default-text-editor.md)。

### 需求

- 在你的计算机上安装 [Node](https://nodejs.org/en/download/)
- 在你的计算机上安装 [Vue CLI](https://cli.vuejs.org/)
- 具备 [Vue](https://vuejs.org/v2/guide/#Getting-Started) 的使用经验

## 创建项目（可选）

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

为了本指南的目的，从一个新的 Vue 项目开始，命名为 `my-tiptap-project`。Vue CLI 会设置我们所需的一切，只需选择默认的 Vue 2 模板。

```bash
# 创建项目
vue create my-tiptap-project

# 切换目录
cd my-tiptap-project
```

### 安装依赖

好了，够了，开始安装 Tiptap 了！在以下示例中，你将需要 `@tiptap/vue-2` 包，`@tiptap/pm`（ProseMirror 库）和 `@tiptap/starter-kit`，后者包含了最常用的扩展，以便快速入门。

```bash
npm install @tiptap/vue-2 @tiptap/pm @tiptap/starter-kit
```

如果你按照第一步和第二步操作，现在可以使用 `npm run dev` 启动你的项目，并在你喜欢的浏览器中打开 [http://localhost:8080](http://localhost:8080)。如果你在处理现有项目，地址可能会有所不同。

## 集成 Tiptap

要实际开始使用 Tiptap，你需要向你的应用添加一个新组件。我们称之为 `Tiptap`，并将以下示例代码放入 `components/Tiptap.vue` 中。

这是让 Tiptap 与 Vue 快速运行的最简单方法。它将为你提供一个非常基础的 Tiptap 版本，没有任何按钮。别担心，你将很快能够添加更多功能。

```html
<template>
  <editor-content :editor="editor" />
</template>

<script>
  import { Editor, EditorContent } from '@tiptap/vue-2'
  import StarterKit from '@tiptap/starter-kit'

  export default {
    components: {
      EditorContent,
    },

    data() {
      return {
        editor: null,
      }
    },

    mounted() {
      this.editor = new Editor({
        content: "<p>我正在使用 Vue.js 运行 Tiptap。🎉</p>",
        extensions: [StarterKit],
      })
    },

    beforeDestroy() {
      this.editor.destroy()
    },
  }
</script>
```

### 将其添加到应用中

现在，让我们用以下示例代码替换 `src/App.vue` 的内容，以在我们的应用中使用新的 `Tiptap` 组件。

```html
<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 中也是可能的。以下是一个可以集成到你的项目中的工作示例组件：

```html
<template>
  <editor-content :editor="editor" />
</template>

<script>
  import { Editor, EditorContent } from '@tiptap/vue-2'
  import StarterKit from '@tiptap/starter-kit'

  export default {
    components: {
      EditorContent,
    },

    props: {
      value: {
        type: String,
        default: '',
      },
    },

    data() {
      return {
        editor: null,
      }
    },

    watch: {
      value(value) {
        // HTML
        const isSame = this.editor.getHTML() === value

        // JSON
        // const isSame = JSON.stringify(this.editor.getJSON()) === JSON.stringify(value)

        if (isSame) {
          return
        }

        this.editor.commands.setContent(value, false)
      },
    },

    mounted() {
      this.editor = new Editor({
        content: this.value,
        extensions: [StarterKit],
        onUpdate: () => {
          // HTML
          this.$emit('input', this.editor.getHTML())

          // JSON
          // this.$emit('input', this.editor.getJSON())
        },
      })
    },

    beforeDestroy() {
      this.editor.destroy()
    },
  }
</script>
```

## 下一步

- [配置你的编辑器](https://tiptap.zhcndoc.com/editor/getting-started/configure.md)
- [为你的编辑器添加样式](https://tiptap.zhcndoc.com/editor/getting-started/style-editor.md)
- [深入了解 Tiptap 的概念](https://tiptap.zhcndoc.com/editor/core-concepts/introduction.md)
- [学习如何持久化编辑器状态](https://tiptap.zhcndoc.com/editor/core-concepts/persistence.md)
- [开始构建你自己的扩展](https://tiptap.zhcndoc.com/editor/extensions/custom-extensions.md)