2021-04-07 06:08:50 +08:00
---
title: Alpine WYSIWYG
2021-09-08 04:50:22 +08:00
tableOfContents: true
2021-04-07 06:08:50 +08:00
---
2021-01-09 01:20:28 +08:00
# Alpine.js
2021-01-30 05:05:47 +08:00
## Introduction
2022-08-12 20:30:28 +08:00
The following guide describes how to integrate Tiptap with version 3 of [Alpine.js ](https://github.com/alpinejs/alpine ).
2021-01-30 05:05:47 +08:00
2021-04-09 04:42:18 +08:00
For the sake of this guide we’ Vite ](https://vitejs.dev/ ) to quickly set up a project, but you can use whatever you’
## Requirements
* [Node ](https://nodejs.org/en/download/ ) installed on your machine
* Experience with [Alpine.js ](https://github.com/alpinejs/alpine )
## 1. Create a project (optional)
If you already have an existing Alpine.js project, that’
2021-11-09 18:56:27 +08:00
For the sake of this guide, let’ Vite ](https://vitejs.dev/ ) project called `my-tiptap-project` . Vite sets up everything we need, just select the Vanilla JavaScript template.
2021-04-09 04:42:18 +08:00
```bash
2021-11-09 18:56:27 +08:00
npm init vite@latest my-tiptap-project -- --template vanilla
cd my-tiptap-project
2021-04-09 04:42:18 +08:00
npm install
2021-08-17 02:57:45 +08:00
npm run dev
2021-04-09 04:42:18 +08:00
```
## 2. Install the dependencies
2021-08-17 02:57:45 +08:00
2023-02-07 17:18:53 +08:00
Okay, enough of the boring boilerplate work. Let’ ’ `alpinejs` , the `@tiptap/core` package, the `@tiptap/pm` package and the `@tiptap/starter-kit` , which includes the most common extensions to get started quickly.
2021-04-09 04:42:18 +08:00
```bash
2023-02-03 00:37:33 +08:00
npm install alpinejs @tiptap/core @tiptap/pm @tiptap/starter -kit
2021-04-09 04:42:18 +08:00
```
2022-08-12 20:30:28 +08:00
If you followed step 1, you can now start your project with `npm run dev` , and open [http://localhost:5173 ](http://localhost:5173 ) in your favorite browser. This might be different, if you’
2021-04-09 04:42:18 +08:00
2021-04-09 04:44:55 +08:00
## 3. Initialize the editor
2021-10-20 04:30:45 +08:00
To actually start using Tiptap, you’ ’ `main.js` .
2021-04-09 04:42:18 +08:00
2021-10-20 04:30:45 +08:00
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.
2021-04-09 04:42:18 +08:00
```js
2021-08-17 02:57:45 +08:00
import Alpine from 'alpinejs'
2021-04-09 04:42:18 +08:00
import { Editor } from '@tiptap/core'
2021-05-07 00:41:22 +08:00
import StarterKit from '@tiptap/starter-kit'
2021-04-09 04:42:18 +08:00
2022-08-12 20:30:28 +08:00
document.addEventListener('alpine:init', () => {
Alpine.data('editor', (content) => {
let editor
return {
updatedAt: Date.now(), // force Alpine to rerender on selection change
init() {
const _this = this
editor = new Editor({
element: this.$refs.element,
extensions: [
StarterKit
],
content: content,
onCreate({ editor }) {
_this.updatedAt = Date.now()
},
onUpdate({ editor }) {
_this.updatedAt = Date.now()
},
onSelectionUpdate({ editor }) {
_this.updatedAt = Date.now()
}
2023-02-03 00:37:33 +08:00
})
2022-08-12 20:30:28 +08:00
},
isLoaded() {
return editor
},
isActive(type, opts = {}) {
return editor.isActive(type, opts)
},
toggleHeading(opts) {
editor.chain().toggleHeading(opts).focus().run()
},
toggleBold() {
editor.chain().toggleBold().focus().run()
},
toggleItalic() {
editor.chain().toggleItalic().focus().run()
},
2023-02-03 00:37:33 +08:00
}
})
})
2021-08-17 02:57:45 +08:00
window.Alpine = Alpine
Alpine.start()
2021-04-09 04:42:18 +08:00
```
## 4. Add it to your app
Now, let’ `index.html` with the following example code to use the editor in our app.
2021-01-09 01:20:28 +08:00
```html
<!DOCTYPE html>
2021-04-09 04:12:46 +08:00
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< / head >
< body >
2022-08-12 20:30:28 +08:00
< div x-data = "editor('<p>Hello world! :-)</p>')" >
2021-04-09 04:12:46 +08:00
2022-08-12 20:30:28 +08:00
< template x-if = "isLoaded()" >
2021-04-09 04:12:46 +08:00
< div class = "menu" >
< button
2022-08-12 20:30:28 +08:00
@click ="toggleHeading({ level: 1 })"
:class="{ 'is-active': isActive('heading', { level: 1 }, updatedAt) }"
2021-04-09 04:12:46 +08:00
>
H1
< / button >
< button
2022-08-12 20:30:28 +08:00
@click ="toggleBold()"
:class="{ 'is-active' : isActive('bold', updatedAt) }"
2021-04-09 04:12:46 +08:00
>
Bold
< / button >
< button
2022-08-12 20:30:28 +08:00
@click ="toggleItalic()"
:class="{ 'is-active' : isActive('italic', updatedAt) }"
2021-04-09 04:12:46 +08:00
>
Italic
< / button >
< / div >
< / template >
2021-01-09 01:20:28 +08:00
2021-04-09 04:12:46 +08:00
< div x-ref = "element" > < / div >
< / div >
2021-01-09 01:20:28 +08:00
2021-04-09 04:12:46 +08:00
< script type = "module" src = "/main.js" > < / script >
< style >
body { margin: 2rem; font-family: sans-serif; }
button.is-active { background: black; color: white; }
2023-05-25 19:45:06 +08:00
.tiptap { padding: 0.5rem 1rem; margin: 1rem 0; border: 1px solid #ccc ; }
2021-04-09 04:12:46 +08:00
< / style >
< / body >
2021-01-09 01:20:28 +08:00
< / html >
```
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! :)
