Svelte

学习如何将 Tiptap 集成到你的 SvelteKit 项目中，以下是详细的步骤指南。或者，你也可以查看我们的 Svelte 文本编辑器示例。

快捷方式：带 Tiptap 的 Svelte REPL

如果你想直接开始，可以查看这个 带 Tiptap 的 Svelte REPL。

要求

• 你的计算机上已安装 Node
• 具备 Svelte 使用经验

创建项目（可选）

如果你已经有一个 SvelteKit 项目，那也没问题，可以跳过此步骤。

在本指南中，我们将从头开始创建一个新的 SvelteKit 项目，命名为 my-tiptap-project。执行以下命令即可设置所需的一切。它会问你很多问题，你可以选择自己喜欢的选项或使用默认设置。

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

如果你完成了步骤 1 和 2，你可以通过运行 npm run dev 启动项目，并在浏览器中打开 http://localhost:3000/。如果你是在现有项目中操作，端口号可能会有所不同。

集成 Tiptap

要开始使用 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>

将其添加到你的应用

现在，替换 src/routes/+page.svelte 文件的内容，并使用我们的新 Tiptap 组件：

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

Tiptap 现在应该可以在浏览器中看到啦。给自己点个赞吧！:)