mirror of
https://github.com/ueberdosis/tiptap.git
synced 2025-01-18 06:03:22 +08:00
docs: update the integration guides
This commit is contained in:
parent
97543ff7e2
commit
435e9a6049
@ -2,6 +2,9 @@
|
|||||||
|
|
||||||
## toc
|
## toc
|
||||||
|
|
||||||
|
## Introduction
|
||||||
|
The following guide describes how to integrate tiptap with your [Alpine.js](https://github.com/alpinejs/alpine) project.
|
||||||
|
|
||||||
TODO
|
TODO
|
||||||
|
|
||||||
https://codesandbox.io/s/alpine-tiptap-2ro5e?file=/index.html:0-1419
|
https://codesandbox.io/s/alpine-tiptap-2ro5e?file=/index.html:0-1419
|
||||||
|
@ -2,6 +2,11 @@
|
|||||||
|
|
||||||
## toc
|
## toc
|
||||||
|
|
||||||
|
## Introduction
|
||||||
|
The following guide describes how to integrate tiptap with your [Inertia.js](https://inertiajs.com/) project.
|
||||||
|
|
||||||
|
## toc
|
||||||
|
|
||||||
TODO
|
TODO
|
||||||
|
|
||||||
## Introduction
|
## Introduction
|
||||||
|
@ -2,6 +2,9 @@
|
|||||||
|
|
||||||
## toc
|
## toc
|
||||||
|
|
||||||
|
## Introduction
|
||||||
|
The following guide describes how to integrate tiptap with your [Livewire](https://laravel-livewire.com/) project.
|
||||||
|
|
||||||
TODO
|
TODO
|
||||||
|
|
||||||
editor.blade.php
|
editor.blade.php
|
||||||
|
@ -2,6 +2,9 @@
|
|||||||
|
|
||||||
## toc
|
## toc
|
||||||
|
|
||||||
|
## Introduction
|
||||||
|
The following guide describes how to integrate tiptap with your [Next.js](https://nextjs.org/) project.
|
||||||
|
|
||||||
TODO
|
TODO
|
||||||
|
|
||||||
<demo name="React" mode="react" />
|
<demo name="React" mode="react" />
|
||||||
|
@ -3,7 +3,7 @@
|
|||||||
## toc
|
## toc
|
||||||
|
|
||||||
## Introduction
|
## Introduction
|
||||||
The following guide describes how to integrate tiptap with your Nuxt.js project.
|
The following guide describes how to integrate tiptap with your [Nuxt.js](https://nuxtjs.org/) project.
|
||||||
|
|
||||||
## Requirements
|
## Requirements
|
||||||
* [Node](https://nodejs.org/en/download/) installed on your machine
|
* [Node](https://nodejs.org/en/download/) installed on your machine
|
||||||
|
@ -2,6 +2,9 @@
|
|||||||
|
|
||||||
## toc
|
## toc
|
||||||
|
|
||||||
|
## Introduction
|
||||||
|
The following guide describes how to integrate tiptap with your [React](https://reactjs.org/) project.
|
||||||
|
|
||||||
TODO
|
TODO
|
||||||
|
|
||||||
<demo name="React" mode="react" />
|
<demo name="React" mode="react" />
|
||||||
|
@ -1,5 +1,10 @@
|
|||||||
# Svelte
|
# Svelte
|
||||||
|
|
||||||
|
## toc
|
||||||
|
|
||||||
|
## Introduction
|
||||||
|
The following guide describes how to integrate tiptap with your Svelte project.
|
||||||
|
|
||||||
TODO
|
TODO
|
||||||
|
|
||||||
Svelte REPL: https://svelte.dev/repl/c839da77db2444e5b23a752266613639?version=3.31.2
|
Svelte REPL: https://svelte.dev/repl/c839da77db2444e5b23a752266613639?version=3.31.2
|
||||||
@ -15,7 +20,7 @@ App.svelte
|
|||||||
|
|
||||||
Editor.svelte
|
Editor.svelte
|
||||||
```html
|
```html
|
||||||
<script>
|
<script type="module">
|
||||||
import { onMount } from 'svelte'
|
import { onMount } from 'svelte'
|
||||||
import { Editor } from '@tiptap/core'
|
import { Editor } from '@tiptap/core'
|
||||||
import { defaultExtensions } from '@tiptap/starter-kit'
|
import { defaultExtensions } from '@tiptap/starter-kit'
|
||||||
@ -44,3 +49,4 @@ Editor.svelte
|
|||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
<div bind:this={element} />
|
<div bind:this={element} />
|
||||||
|
```
|
||||||
|
@ -3,28 +3,14 @@
|
|||||||
## toc
|
## toc
|
||||||
|
|
||||||
## Introduction
|
## Introduction
|
||||||
The following guide describes how to integrate tiptap with your Vue CLI project. If you’ve got Vue CLI on your machine already, you can skip the first step.
|
The following guide describes how to integrate tiptap with your [Vue](https://vuejs.org/) CLI project.
|
||||||
|
|
||||||
## Requirements
|
## Requirements
|
||||||
* [Node](https://nodejs.org/en/download/) installed on your machine
|
* [Node](https://nodejs.org/en/download/) installed on your machine
|
||||||
|
* [Vue CLI](https://cli.vuejs.org/) installed on your machine
|
||||||
* Experience with [Vue](https://vuejs.org/v2/guide/#Getting-Started)
|
* Experience with [Vue](https://vuejs.org/v2/guide/#Getting-Started)
|
||||||
|
|
||||||
## 1. Install Vue CLI (optional)
|
## 1. Create a project (optional)
|
||||||
Vue CLI aims to be the standard tooling baseline for the Vue ecosystem, and helps to create new projects quickly. If you’re working with Vue a lot, chances are you have this installed already. Just skip this step then.
|
|
||||||
|
|
||||||
Here is how you could install (or update) it:
|
|
||||||
|
|
||||||
```bash
|
|
||||||
# with npm
|
|
||||||
npm install -g @vue/cli
|
|
||||||
|
|
||||||
# with Yarn
|
|
||||||
yarn global add @vue/cli
|
|
||||||
```
|
|
||||||
|
|
||||||
From now on, the `vue` command is available globally. Test it with `vue --version`, this should output the current version.
|
|
||||||
|
|
||||||
## 2. Create a project (optional)
|
|
||||||
If you already have an existing Vue project, that’s fine too. Just skip this step and proceed with the next step.
|
If you already have an existing Vue 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 Vue project called `tiptap-example`. The Vue CLI sets up everything we need, just select the default Vue 2 template.
|
For the sake of this guide, let’s start with a fresh Vue project called `tiptap-example`. The Vue CLI sets up everything we need, just select the default Vue 2 template.
|
||||||
@ -37,7 +23,7 @@ vue create tiptap-example
|
|||||||
cd tiptap-example
|
cd tiptap-example
|
||||||
```
|
```
|
||||||
|
|
||||||
## 3. 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 `@tiptap/core` (the actual editor) and the `@tiptap/vue-starter-kit` which has everything to get started quickly, for example a few default extensions and a basic Vue component.
|
Okay, enough of the boring boilerplate work. Let’s finally install tiptap! For the following example you’ll need `@tiptap/core` (the actual editor) and the `@tiptap/vue-starter-kit` which has everything to get started quickly, for example a few default extensions and a basic Vue component.
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
@ -50,7 +36,7 @@ yarn add @tiptap/core @tiptap/vue-starter-kit
|
|||||||
|
|
||||||
If you followed step 1 and 2, you can now start your project with `npm run dev` or `yarn dev`, and open [http://localhost:8080/](http://localhost:3000/) in your favorite browser. This might be different, if you’re working with an existing project.
|
If you followed step 1 and 2, you can now start your project with `npm run dev` or `yarn dev`, and open [http://localhost:8080/](http://localhost:3000/) in your favorite browser. This might be different, if you’re working with an existing project.
|
||||||
|
|
||||||
## 4. Create a new component
|
## 3. Create a new component
|
||||||
To actually start using tiptap, you’ll need to add a new component to your app. Let’s call it `Tiptap` and put the following example code in `components/Tiptap.vue`.
|
To actually start using tiptap, you’ll need to add a new component to your app. Let’s call it `Tiptap` and put the following example code in `components/Tiptap.vue`.
|
||||||
|
|
||||||
This is the fastest way to get tiptap up and running with Vue. It will give you a very basic version of tiptap, without any buttons. No worries, you will be able to add more functionality soon.
|
This is the fastest way to get tiptap up and running with Vue. It will give you a very basic version of tiptap, without any buttons. No worries, you will be able to add more functionality soon.
|
||||||
@ -88,7 +74,7 @@ export default {
|
|||||||
</script>
|
</script>
|
||||||
```
|
```
|
||||||
|
|
||||||
## 5. Add it to your app
|
## 4. Add it to your app
|
||||||
Now, let’s replace the content of `src/App.vue` with the following example code to use our new `Tiptap` component in our app.
|
Now, let’s replace the content of `src/App.vue` with the following example code to use our new `Tiptap` component in our app.
|
||||||
|
|
||||||
```html
|
```html
|
||||||
@ -112,7 +98,7 @@ export default {
|
|||||||
|
|
||||||
You should now see tiptap in your browser. You’ve successfully set up tiptap! Time to give yourself a pat on the back. Let’s start to configure your editor in the next step.
|
You should now see tiptap in your browser. You’ve successfully set up tiptap! Time to give yourself a pat on the back. Let’s start to configure your editor in the next step.
|
||||||
|
|
||||||
## 6. Use v-model (optional)
|
## 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:
|
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:
|
||||||
|
|
||||||
<demo name="Guide/GettingStarted/VModel" />
|
<demo name="Guide/GettingStarted/VModel" />
|
@ -6,11 +6,11 @@
|
|||||||
link: /overview/installation
|
link: /overview/installation
|
||||||
- title: Upgrade Guide
|
- title: Upgrade Guide
|
||||||
link: /overview/upgrade-guide
|
link: /overview/upgrade-guide
|
||||||
- title: Contributing
|
|
||||||
link: /overview/contributing
|
|
||||||
- title: Become a sponsor
|
- title: Become a sponsor
|
||||||
link: /sponsor
|
link: /sponsor
|
||||||
type: sponsor
|
type: sponsor
|
||||||
|
- title: Contributing
|
||||||
|
link: /overview/contributing
|
||||||
|
|
||||||
- title: Examples
|
- title: Examples
|
||||||
link: /examples
|
link: /examples
|
||||||
@ -50,7 +50,7 @@
|
|||||||
link: /guide/getting-started
|
link: /guide/getting-started
|
||||||
items:
|
items:
|
||||||
- title: Vue.js 2
|
- title: Vue.js 2
|
||||||
link: /guide/getting-started/vue-cli
|
link: /guide/getting-started/vuejs
|
||||||
skip: true
|
skip: true
|
||||||
- title: Nuxt.js
|
- title: Nuxt.js
|
||||||
link: /guide/getting-started/nuxtjs
|
link: /guide/getting-started/nuxtjs
|
||||||
|
Loading…
Reference in New Issue
Block a user