ianhitchman/tiptap
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Update alpine docs (#1733)

Browse Source
This commit is contained in:
Sibiraj
2021-08-17 00:27:45 +05:30
committed by GitHub
parent 903220b86b
commit 0488479d68
1 changed files with 7 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
docs/src/docPages/installation/alpine.md
View File

@@ -21,12 +21,14 @@ If you already have an existing Alpine.js project, that’s fine too. Just skip
For the sake of this guide, let’s start with a fresh [Vite](https://vitejs.dev/) project called `tiptap-example`. Vite sets up everything we need, just select the Vanilla JavaScript template. For the sake of this guide, let’s start with a fresh [Vite](https://vitejs.dev/) project called `tiptap-example`. Vite sets up everything we need, just select the Vanilla JavaScript template.
```bash ```bash
npm init @vitejs/app tiptap-example npm init vite@latest tiptap-example -- --template vanilla
cd tiptap-example cd tiptap-example
npm install npm install
npm run dev
``` ```
## 2. Install the dependencies ## 2. Install the dependencies
Okay, enough of the boring boilerplate work. Let’s finally install tiptap! For the following example you’ll need `alpinejs`, the `@tiptap/core` package and the `@tiptap/starter-kit` which has the most common extensions to get started quickly. Okay, enough of the boring boilerplate work. Let’s finally install tiptap! For the following example you’ll need `alpinejs`, the `@tiptap/core` package and the `@tiptap/starter-kit` which has the most common extensions to get started quickly.
```bash ```bash
@@ -45,7 +47,7 @@ To actually start using tiptap, you’ll need to write a little bit of JavaScrip
This is the fastest way to get tiptap up and running with Alpine.js. It will give you a very basic version of tiptap. No worries, you will be able to add more functionality soon. This is the fastest way to get tiptap up and running with Alpine.js. It will give you a very basic version of tiptap. No worries, you will be able to add more functionality soon.
```js ```js
import alpinejs from 'alpinejs' import Alpine from 'alpinejs'
import { Editor } from '@tiptap/core' import { Editor } from '@tiptap/core'
import StarterKit from '@tiptap/starter-kit' import StarterKit from '@tiptap/starter-kit'
@@ -71,6 +73,9 @@ window.setupEditor = function(content) {
}, },
} }
} }
window.Alpine = Alpine
Alpine.start()
``` ```
## 4. Add it to your app ## 4. Add it to your app