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

docs: update content, improve the Alpine.js guide

Browse Source
This commit is contained in:
Hans Pagel
2021-04-08 22:42:18 +02:00
parent 0b7a780878
commit 7e21bdd752
8 changed files with 70 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -9,10 +9,69 @@ title: Alpine WYSIWYG
## Introduction
The following guide describes how to integrate tiptap with your [Alpine.js](https://github.com/alpinejs/alpine) project.
TODO
For the sake of this guide we’ll use [Vite](https://vitejs.dev/) to quickly set up a project, but you can use whatever you’re used to. Vite is just really fast and we love it.
## 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’s fine too. Just skip this step and proceed with the next step.
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
npm init @vitejs/app tiptap-example
cd tiptap-example
npm install
```
## 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.
```bash
# install with npm
npm install alpinejs @tiptap/core @tiptap/starter-kit
# install with Yarn
yarn add alpinejs @tiptap/core @tiptap/starter-kit
```
If you followed step 1, you can now start your project with `npm run dev` or `yarn dev`, and open [http://localhost:3000](http://localhost:3000) in your favorite browser. This might be different, if you’re working with an existing project.
## 3. Add a JavaScript file
To actually start using tiptap, you’ll need to write a little bit of JavaScript. Let’s put the following example code in a file called `main.js`.
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
import alpinejs from 'alpinejs'
import { Editor } from '@tiptap/core'
import { defaultExtensions } from '@tiptap/starter-kit'
window.setupEditor = function(content) {
return {
editor: null,
content: content,
init(element) {
this.editor = new Editor({
element: element,
extensions: defaultExtensions(),
content: this.content,
onUpdate: ({ editor }) => {
this.content = editor.getHTML()
},
})
},
}
}
```
## 4. Add it to your app
Now, let’s replace the content of the `index.html` with the following example code to use the editor in our app.
## index.html
```html
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
@@ -58,26 +117,4 @@ TODO
</html>
```
## main.js
```js
import alpinejs from 'https://cdn.skypack.dev/alpinejs'
import { Editor } from 'https://cdn.skypack.dev/@tiptap/core?min'
import { defaultExtensions } from 'https://cdn.skypack.dev/@tiptap/starter-kit?min'
window.setupEditor = function(content) {
return {
editor: null,
content: content,
init(element) {
this.editor = new Editor({
element: element,
extensions: defaultExtensions(),
content: this.content,
onUpdate: ({ editor }) => {
this.content = editor.getHTML()
},
})
},
}
}
```
You should now see tiptap in your browser. Time to give yourself a pat on the back! :)

2
docs/src/docPages/installation/cdn.md
View File

@@ -20,3 +20,5 @@ For testing purposes or demos, use our [Skypack](https://www.skypack.dev/) CDN b
</body>
</html>
```
You should now see tiptap in your browser. Time to give yourself a pat on the back! :)

2
docs/src/docPages/installation/nuxt.md
View File

@@ -93,7 +93,7 @@ Now, let’s replace the content of `pages/index.vue` with the following example
Note that tiptap needs to run in the client, not on the server. It’s required to wrap the editor in a `<client-only>` tag. [Read more about cient-only components.](https://nuxtjs.org/api/components-client-only)
You should now see tiptap in your browser. You’ve successfully set up tiptap! Time to give yourself a pat on the back.
You should now see tiptap in your browser. Time to give yourself a pat on the back! :)
## 5. Use v-model (optional)
You’re probably used to bind your data with `v-model` in forms, that’s also possible with tiptap. Here is a working example component, that you can integrate in your project:

2
docs/src/docPages/installation/react.md
View File

@@ -79,7 +79,7 @@ const App = () => {
export default App
```
You should now see tiptap in your browser. You’ve successfully set up tiptap! Time to give yourself a pat on the back.
You should now see tiptap in your browser. Time to give yourself a pat on the back! :)
## 5. The complete setup (optional)
Ready to add more? Below is a demo that shows how you could set up what we call the default editor. Feel free to take this and start customizing it then:

2
docs/src/docPages/installation/svelte.md
View File

@@ -116,4 +116,4 @@ Now, let’s replace the content of `src/routes/index.svelte` with the following
</main>
```
You should now see tiptap in your browser. You’ve successfully set up tiptap! Time to give yourself a pat on the back.
You should now see tiptap in your browser. Time to give yourself a pat on the back! :)

2
docs/src/docPages/installation/vue2.md
View File

@@ -101,7 +101,7 @@ export default {
</script>
```
You should now see tiptap in your browser. You’ve successfully set up tiptap! Time to give yourself a pat on the back.
You should now see tiptap in your browser. Time to give yourself a pat on the back! :)
## 5. Use v-model (optional)
You’re probably used to bind your data with `v-model` in forms, that’s also possible with tiptap. Here is a working example component, that you can integrate in your project:

2
docs/src/docPages/installation/vue3.md
View File

@@ -129,7 +129,7 @@ export default {
</script>
```
You should now see tiptap in your browser. You’ve successfully set up tiptap! Time to give yourself a pat on the back.
You should now see tiptap in your browser. Time to give yourself a pat on the back! :)
## 5. Use v-model (optional)
You’re probably used to bind your data with `v-model` in forms, that’s also possible with tiptap. Here is how that would work with tiptap:

2
docs/src/links.yaml
View File

@@ -37,7 +37,7 @@
# skip: true
- title: Alpine.js
link: /installation/alpine
type: draft
type: new
skip: true
- title: Livewire
link: /installation/livewire