Vue.js 2 的富文本编辑器 tiptap 集成指南

引言

本指南将指导您如何在基于 Vue CLI 的项目中整合 Tiptap。

需要条件

Node.js 安装在您的机器上
Vue CLI 已安装在您的机器上
对 Vue 有基本了解

1. 创建项目（可选）

如果您已经有一个现有项目，那么跳过此步骤，直接进入下一步。为了演示，我们将从名为 my-tiptap-project 的新 Vue 项目开始。Vue CLI 会为我们设置好基础环境，选择默认的 Vue 2 模板即可。


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

# 更改目录
cd my-tiptap-project

2. 安装依赖

好了，现在我们来安装所需的库。首先需要 @tiptap/vue-2 包，以及 @tiptap/pm（ProseMirror 库）和 @tiptap/starter-kit，它包含了快速入门时常用的扩展。


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

如果你按照步骤 1 和 2 完成，现在可以通过 npm run dev 启动项目，并在浏览器中访问 http://localhost:8080。如果使用的是现有项目，地址可能会有所不同。

3. 创建新组件

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

这是在 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>

4. 将组件添加到应用

现在，让我们将 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 了！给自己点个赞吧！🎉

5. 使用 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>

这将允许您通过 v-model 监听和更新编辑器的内容。