Nuxt

本指南涵盖了如何将 Tiptap 集成到你的 Nuxt.js 项目中，附带代码示例。

系统要求

Node 已安装在你的机器上
有 Vue 使用经验

创建项目（可选）

如果你已经有一个 Nuxt.js 项目，那也没关系。可以跳过这一步。

为了这个项目的目的，从一个名为 my-tiptap-project 的新 Nuxt.js 项目开始。以下命令设置了我们需要的一切。它会问很多问题，但只需选择你喜欢的选项或使用默认设置即可。

# 创建一个项目
npx nuxi@latest init my-tiptap-project

# 更改目录
cd my-tiptap-project

安装依赖

够了，这些无聊的模板工作。让我们安装 Tiptap！对于以下示例，你需要 @tiptap/vue-3 包以及一些组件，@tiptap/pm 包和 @tiptap/starter-kit，后者包含了最常见的扩展，可以快速入门。

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

如果你按照步骤 1 和 2 使用，现在可以通过 npm run dev 启动项目，并在你喜欢的浏览器中打开 http://localhost:3000/。如果你在处理一个已有项目，可能会有所不同。

集成 Tiptap

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

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

由于 Nuxt 使用服务端渲染（SSR），我们设置了 immediatelyRender: false，以防止编辑器在服务器上渲染。编辑器需要浏览器 API，而这些在 SSR 期间不可用，所以这个选项确保它只在客户端水合后渲染。

<template>
  <EditorContent :editor="editor" />
</template>

<script setup>
  import { useEditor, EditorContent } from '@tiptap/vue-3'
  import StarterKit from '@tiptap/starter-kit'

  const editor = useEditor({
    content: `<p>我正在使用 Vue.js 运行 Tiptap。🎉</p>`,
    extensions: [StarterKit],
    // 不在服务器端渲染，仅在客户端水合后渲染
    immediatelyRender: false,
  })
</script>

将其添加到你的应用中

现在，让我们用以下示例代码替换 app/app.vue 的内容，以便在我们的应用中使用新的 TiptapEditor 组件：

<template>
  <TiptapEditor />
</template>

请注意，Tiptap 需要在客户端运行，而不是在服务器上。必须将编辑器包装在 <client-only> 标签中。了解更多关于客户端组件的信息。

在 Nuxt 4 中，组件和 Vue 组合函数（如 ref 和 watch）会自动导入，因此你无需手动导入或注册它们。

现在你应该能在浏览器中看到 Tiptap。给自己一个赞吧！:)

使用 v-model（可选）

你可能习惯于在表单中使用 v-model 绑定数据。这在 Tiptap 中也是可能的。以下是一个可以在你的项目中集成的工作示例组件：

<template>
  <EditorContent :editor="editor" />
</template>

<script setup>
  import { useEditor, EditorContent } from '@tiptap/vue-3'
  import StarterKit from '@tiptap/starter-kit'

  const emit = defineEmits(['update:modelValue'])
  const props = defineProps({
    modelValue: {
      type: String,
      default: '',
    },
  })

  const editor = useEditor({
    content: props.modelValue,
    extensions: [StarterKit],
    // 不在服务器端渲染，仅在客户端水合后渲染
    immediatelyRender: false,
    onUpdate: ({ editor }) => {
      // HTML
      emit('update:modelValue', editor.getHTML())

      // JSON
      // emit('update:modelValue', editor.getJSON())
    },
  })

  watch(
    () => props.modelValue,
    (value) => {
      // HTML
      const isSame = editor.value?.getHTML() === value

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

      if (isSame) {
        return
      }

      editor.value?.commands.setContent(value, false)
    }
  )
</script>

下一步

PreviouslyVue 2

Next upSvelte