Vue 2

本指南详细介绍了如何将 Tiptap 集成到你的 Vue 2 项目中。或者，你也可以查看我们的 Vue 文本编辑器示例。

要求

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

创建项目（可选）

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

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

 复制代码
# 创建项目
vue create my-tiptap-project
# 进入项目目录
cd my-tiptap-project

安装依赖

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

 复制代码
npm install @tiptap/vue-2 @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-2'
  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],
      })
    },
    beforeDestroy() {
      this.editor.destroy()
    },
  }
</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 的示例组件， 你可以将其集成到你的项目中：

 复制代码
<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>