docs: add svelte integration guide draft
This commit is contained in:
@@ -8,6 +8,10 @@ tiptap 2 is framework-agnostic and even works with plain JavaScript, if that’s
|
|||||||
## Alternative Guides
|
## Alternative Guides
|
||||||
* [Vue CLI](/guide/getting-started/vue-cli)
|
* [Vue CLI](/guide/getting-started/vue-cli)
|
||||||
* [Nuxt.js](/guide/getting-started/nuxtjs)
|
* [Nuxt.js](/guide/getting-started/nuxtjs)
|
||||||
|
* [React](/guide/getting-started/react) (Draft)
|
||||||
|
* [Svelte](/guide/getting-started/svelte) (Draft)
|
||||||
|
* [Alpine.js](/guide/getting-started/alpinejs) (Draft)
|
||||||
|
* [Livewire](/guide/getting-started/livewire) (Draft)
|
||||||
|
|
||||||
## Requirements
|
## Requirements
|
||||||
* [Node](https://nodejs.org/en/download/) installed on your machine
|
* [Node](https://nodejs.org/en/download/) installed on your machine
|
||||||
|
|||||||
46
docs/src/docPages/guide/getting-started/svelte.md
Normal file
46
docs/src/docPages/guide/getting-started/svelte.md
Normal file
@@ -0,0 +1,46 @@
|
|||||||
|
# Svelte
|
||||||
|
|
||||||
|
TODO
|
||||||
|
|
||||||
|
Svelte REPL: https://svelte.dev/repl/c839da77db2444e5b23a752266613639?version=3.31.2
|
||||||
|
|
||||||
|
App.svelte
|
||||||
|
```html
|
||||||
|
<script>
|
||||||
|
import Editor from './Editor.svelte';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<Editor />
|
||||||
|
```
|
||||||
|
|
||||||
|
Editor.svelte
|
||||||
|
```html
|
||||||
|
<script>
|
||||||
|
import { onMount } from 'svelte'
|
||||||
|
import { Editor } from '@tiptap/core'
|
||||||
|
import { defaultExtensions } from '@tiptap/starter-kit'
|
||||||
|
|
||||||
|
let element
|
||||||
|
let editor
|
||||||
|
|
||||||
|
onMount(() => {
|
||||||
|
editor = new Editor({
|
||||||
|
element: element,
|
||||||
|
extensions: defaultExtensions(),
|
||||||
|
})
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{#if editor}
|
||||||
|
<button on:click={editor.chain().focus().toggleBold().run()} class:error={editor.isActive('bold')}>
|
||||||
|
bold
|
||||||
|
</button>
|
||||||
|
<button on:click={editor.chain().focus().toggleItalic().run()} class:error={editor.isActive('italic')}>
|
||||||
|
italic
|
||||||
|
</button>
|
||||||
|
<button on:click={editor.chain().focus().toggleStrike().run()} class:error={editor.isActive('strike')}>
|
||||||
|
strike
|
||||||
|
</button>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<div bind:this={element} />
|
||||||
@@ -1,5 +0,0 @@
|
|||||||
# React
|
|
||||||
|
|
||||||
This is a basic example of tiptap.
|
|
||||||
|
|
||||||
<demo name="React" mode="react" />
|
|
||||||
@@ -54,6 +54,10 @@
|
|||||||
link: /guide/getting-started/react
|
link: /guide/getting-started/react
|
||||||
type: draft
|
type: draft
|
||||||
skip: true
|
skip: true
|
||||||
|
- title: Svelte
|
||||||
|
link: /guide/getting-started/svelte
|
||||||
|
type: draft
|
||||||
|
skip: true
|
||||||
- title: Alpine.js
|
- title: Alpine.js
|
||||||
link: /guide/getting-started/alpinejs
|
link: /guide/getting-started/alpinejs
|
||||||
type: draft
|
type: draft
|
||||||
|
|||||||
Reference in New Issue
Block a user