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

如果您完成了步骤 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';

	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 现在应该在您的浏览器中可见。祝贺您，给自己一个赞吧！ :)