抠丁客 抠丁客
项目
编辑 (2024/6/19)

Svelte 集成 tiptap

引言

本指南将指导您如何将 Tiptap 集成到您的 SvelteKit 项目中。

快速开始：带有 Tiptap 的 Svelte REPL

如果您想立即体验，这里有一个已安装了 Tiptap 的 Svelte REPL。

要求

  • Node.js 已经安装在您的计算机上
  • 对 Svelte 有一定了解

1. 创建项目（可选）

如果您已经拥有一个现有的 SvelteKit 项目，也可以跳过此步骤，直接进行下一步。

为了本指南，我们从名为 my-tiptap-project 的新 SvelteKit 项目开始。以下是设置所需的所有命令。它会问很多问题，但您可以根据喜好选择或使用默认值。

npm create svelte@latest my-tiptap-project
cd my-tiptap-project
npm install
npm run dev

2. 安装依赖

好了，无聊的构建工作到此为止。现在让我们终于安装 Tiptap！下面的示例需要 @tiptap/core 包，以及几个组件，@tiptap/pm 和 @tiptap/starter-kit，后者包括最常见的扩展，以便快速入门。

npm install @tiptap/core @tiptap/pm @tiptap/starter-kit

如果您遵循了步骤 1 和 2，现在可以使用 npm run dev 启动项目，并在您最喜欢的浏览器中打开 http://localhost:3000/。如果您使用的是现有项目，可能会有所不同。

3. 创建新组件

要实际使用 Tiptap，您需要向应用添加新组件。我们将其命名为 Tiptap，并在 src/lib/Tiptap.svelte 中放入以下示例代码。

这是在 SvelteKit 中快速启动 Tiptap 的最快方法。它将为您提供一个基本的 Tiptap 版本，没有按钮。别担心，很快您就可以添加更多功能。

<script>
  import { onMount, onDestroy } from 'svelte'
  import { Editor } from '@tiptap/core'
  import StarterKit from '@tiptap/starter-kit'

  let element
  let editor

  onMount(() => {
    editor = new Editor({
      element: element,
      extensions: [
        StarterKit,
      ],
      content: '<p>Hello World! 🌍️ </p>',
      onTransaction: () => {
        // 强制重新渲染，使 `editor.isActive` 按预期工作
        editor = editor
      },
    })
  })

  onDestroy(() => {
    if (editor) {
      editor.destroy()
    }
  })
</script>

{#if editor}
  <button
    on:click={() => editor.chain().focus().toggleHeading({ level: 1}).run()}
    class:active={editor.isActive('heading', { level: 1 })}
  >
    H1
  </button>
  <button
    on:click={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
    class:active={editor.isActive('heading', { level: 2 })}
  >
    H2
  </button>
  <button on:click={() => editor.chain().focus().setParagraph().run()} class:active={editor.isActive('paragraph')}>
    P
  </button>
{/if}

<div bind:this={element} />

<style>
  button.active {
    background: black;
    color: white;
  }
</style>

4. 将其添加到您的应用

现在，将 src/routes/+page.svelte 中的内容替换为以下代码，以便在我们的应用中使用新的 Tiptap 组件。

<script>
  import Tiptap from "$lib/Tiptap.svelte";
</script>

<main>
  <Tiptap />
</main>

现在您应该能在浏览器中看到 Tiptap。是时候给自己一个大大的赞了！ :+1:

在本文档中