tiptap/docs/installation/svelte.md

117 lines
3.5 KiB
Markdown
Raw Normal View History

---
title: Svelte WYSIWYG
tableOfContents: true
---
# Svelte
2021-01-30 05:05:47 +08:00
## Introduction
2021-10-20 04:30:45 +08:00
The following guide describes how to integrate Tiptap with your [SvelteKit](https://kit.svelte.dev/) project.
2021-01-30 05:05:47 +08:00
2021-10-20 04:30:45 +08:00
## Take a shortcut: Svelte REPL with Tiptap
If you just want to jump into it right-away, here is a [Svelte REPL with Tiptap](https://svelte.dev/repl/798f1b81b9184780aca18d9a005487d2?version=3.31.2) installed.
2021-04-03 23:30:56 +08:00
## Requirements
* [Node](https://nodejs.org/en/download/) installed on your machine
* Experience with [Svelte](https://vuejs.org/v2/guide/#Getting-Started)
2021-04-03 23:30:56 +08:00
## 1. Create a project (optional)
If you already have an existing SvelteKit project, thats fine too. Just skip this step and proceed with the next step.
2021-11-09 18:56:27 +08:00
For the sake of this guide, lets start with a fresh SvelteKit project called `my-tiptap-project`. The following commands set up everything we need. It asks a lot of questions, but just use what floats your boat or use the defaults.
2021-04-03 23:30:56 +08:00
```bash
2021-11-09 18:56:27 +08:00
mkdir my-tiptap-project
cd my-tiptap-project
2021-04-03 23:30:56 +08:00
npm init svelte@next
npm install
npm run dev
```
## 2. Install the dependencies
2021-10-20 04:30:45 +08:00
Okay, enough of the boring boilerplate work. Lets finally install Tiptap! For the following example youll need the `@tiptap/core` package, with a few components, and `@tiptap/starter-kit` which has the most common extensions to get started quickly.
2021-04-03 23:30:56 +08:00
```bash
npm install @tiptap/core @tiptap/starter-kit
```
2021-11-09 18:56:27 +08:00
If you followed step 1 and 2, you can now start your project with `npm run dev`, and open [http://localhost:3000/](http://localhost:3000/) in your favorite browser. This might be different, if youre working with an existing project.
2021-04-03 23:30:56 +08:00
## 3. Create a new component
2021-10-20 04:30:45 +08:00
To actually start using Tiptap, youll need to add a new component to your app. Lets call it `Tiptap` and put the following example code in `src/lib/Tiptap.svelte`.
2021-04-03 23:30:56 +08:00
2021-10-20 04:30:45 +08:00
This is the fastest way to get Tiptap up and running with SvelteKit. It will give you a very basic version of Tiptap, without any buttons. No worries, you will be able to add more functionality soon.
2021-04-03 23:30:56 +08:00
```html
2021-01-30 05:05:47 +08:00
<script type="module">
2021-03-08 20:20:26 +08:00
import { onMount, onDestroy } from 'svelte'
import { Editor } from '@tiptap/core'
2021-05-07 00:41:22 +08:00
import StarterKit from '@tiptap/starter-kit'
2021-03-08 20:43:33 +08:00
let element
let editor
2021-03-08 20:43:33 +08:00
onMount(() => {
editor = new Editor({
element: element,
2021-05-07 00:41:22 +08:00
extensions: [
StarterKit,
],
2021-04-03 23:30:56 +08:00
content: '<p>Hello World! 🌍️ </p>',
2021-03-08 20:20:26 +08:00
onTransaction: () => {
// force re-render so `editor.isActive` works as expected
editor = editor
},
})
})
2021-03-08 20:43:33 +08:00
2021-03-08 20:20:26 +08:00
onDestroy(() => {
2021-04-03 23:30:56 +08:00
if (editor) {
editor.destroy()
}
2021-03-08 20:20:26 +08:00
})
</script>
2021-03-08 20:25:02 +08:00
{#if editor}
2021-04-03 23:30:56 +08:00
<button
on:click={() => editor.chain().focus().toggleHeading({ level: 1}).run()}
class:active={editor.isActive('heading', { level: 1 })}
>
H1
</button>
2021-04-03 23:30:56 +08:00
<button
on:click={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
class:active={editor.isActive('heading', { level: 2 })}
>
H2
</button>
2021-04-03 23:30:56 +08:00
<button on:click={() => editor.chain().focus().setParagraph().run()} class:active={editor.isActive('paragraph')}>
P
</button>
{/if}
2021-03-08 20:25:02 +08:00
<div bind:this={element} />
2021-03-08 20:43:33 +08:00
<style>
button.active {
background: black;
color: white;
}
</style>
2021-01-30 05:05:47 +08:00
```
2021-04-03 23:30:56 +08:00
## 4. Add it to your app
Now, lets replace the content of `src/routes/index.svelte` with the following example code to use our new `Tiptap` component in our app.
```html
<script>
import Tiptap from '$lib/Tiptap.svelte'
</script>
<main>
<Tiptap />
</main>
```
2021-10-20 04:30:45 +08:00
You should now see Tiptap in your browser. Time to give yourself a pat on the back! :)