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 中。

这是让 Tiptap 与 Vue 快速运行的最简单方法。它将为你提供一个非常基础的 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>我正在使用 Vue.js 运行 Tiptap。🎉</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 中也是可能的。以下是一个可以集成到你的项目中的工作示例组件：

<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>