Svelte

了解如何使用本分步指南将 Tiptap 集成到您的 SvelteKit 项目中。或者，查看我们的 Svelte 文本编辑器示例。

走捷径：带 Tiptap 的 Svelte REPL

如果您想立即开始，这里有一个带 Tiptap 的 Svelte REPL。

先决条件

您的机器上安装了 Node
具备使用 Svelte 的经验

创建项目（可选）

如果您已经有一个 SvelteKit 项目，那也很好。只需跳过此步骤。

为了本指南的目的，从一个名为 my-tiptap-project 的全新 SvelteKit 项目开始。以下命令将设置我们所需的一切。它会问很多问题，但请选择您喜欢的选项或使用默认设置。

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

安装依赖

既然我们已经完成了样板代码，让我们安装 Tiptap！在以下示例中，您需要 @tiptap/core 包，以及一些组件、@tiptap/pm 和 @tiptap/starter-kit，它们包括了最常用的扩展，以便快速入门。

npm install @tiptap/core @tiptap/pm @tiptap/starter-kit @tiptap/extension-bubble-menu

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

集成 Tiptap

要开始使用 Tiptap，您需要向您的应用添加一个新组件。我们称之为 Tiptap，并在 src/lib/Tiptap.svelte 中添加以下示例代码。

这是让 Tiptap 在 SvelteKit 上快速启动和运行的最快方法。它将为您提供一个非常基本的 Tiptap 版本，没有任何按钮。别担心，您将很快能够添加更多功能。

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

  let bubbleMenu = $state()
  let element = $state()
  let editorState = $state({editor: null})

  onMount(() => {
    editorState.editor = new Editor({
      element: element,
      extensions: [
        StarterKit,
        BubbleMenu.configure({
          element: bubbleMenu,
        }),
      ],
      content: `
        <h1>Hello Svelte! 🌍️ </h1>
        <p>This editor is running in Svelte.</p>
        <p>Select some text to see the bubble menu popping up.</p>
      `,
      onTransaction: ({ editor }) => {
        // 更新状态信号以强制重新渲染
        editorState = { editor }
      },
    })
  })
  onDestroy(() => {
    editorState.editor?.destroy()
  })
</script>

<div style="position: relative" class="app">
  {#if editorState.editor}
    <div class="fixed-menu">
      <button
        onclick={() => editorState.editor.chain().focus().toggleHeading({ level: 1 }).run()}
        class:active={editorState.editor.isActive('heading', { level: 1 })}
      >
        H1
      </button>
      <button
        onclick={() => editorState.editor.chain().focus().toggleHeading({ level: 2 }).run()}
        class:active={editorState.editor.isActive('heading', { level: 2 })}
      >
        H2
      </button>
      <button onclick={() => editorState.editor.chain().focus().setParagraph().run()} class:active={editorState.editor.isActive('paragraph')}>
        P
      </button>
    </div>
  {/if}

  <div bind:this={element}></div>
</div>

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

将其添加到您的应用中

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

<script>
  import Tiptap from '$lib/Tiptap.svelte'
</script>

<main>
  <Tiptap />
</main>

Tiptap 现在应该在您的浏览器中可见。祝贺您，给自己一个赞吧！ :)

后续步骤

使用 Svelte 传统语法的设置

上面的示例使用了 Svelte 符号语法。如果您的 Svelte 应用处于传统模式，请改用以下代码为 Tiptap.svelte 组件。

<script>
  import { onMount } 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;
      },
    });

    return () => {
      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>

PreviouslyNuxt

Next upAlpine