mirror of
https://github.com/ueberdosis/tiptap.git
synced 2024-11-28 15:49:23 +08:00
docs: update content
This commit is contained in:
parent
c94b43feeb
commit
bcddffee09
@ -9,5 +9,3 @@ The document is stored in a state. All changes are applied as transactions to th
|
||||
|
||||
### Extensions
|
||||
Extensions add [nodes](/api/nodes), [marks](/api/marks) and/or [functionalities](/api/extensions) to the editor. A lot of those extensions bound their commands to common [keyboard shortcuts](/api/keyboard-shortcuts).
|
||||
|
||||
All those concepts are explained in detail on the following pages.
|
||||
|
79
docs/src/docPages/guide/get-started.md
Normal file
79
docs/src/docPages/guide/get-started.md
Normal file
@ -0,0 +1,79 @@
|
||||
# Get started
|
||||
|
||||
## toc
|
||||
|
||||
## Introduction
|
||||
tiptap is framework-agnostic and even works with plain JavaScript, if that’s your thing. To keep everthing as small and flexible as possible, it’s all very modular. Let’s take a few basic building blocks for a test drive.
|
||||
|
||||
## Requirements
|
||||
The following guide assumes you’re working with Vue.js. Hopefully, that helps to get you going with other frameworks (or without a framework at all), while we’re working on more guides. We also assume you’ve [set up Node.js](https://nodejs.org/en/download/) on your machine already.
|
||||
|
||||
## 1. Create a new project
|
||||
|
||||
### Install Vue CLI (optional)
|
||||
```bash
|
||||
# with npm
|
||||
npm install -g @vue/cli
|
||||
# with Yarn
|
||||
yarn global add @vue/cli
|
||||
```
|
||||
|
||||
Let’s start with a fresh Vue.js project. If you already have an existing Vue.js project, that’s fine too. Just skip this first step and proceed with the next step.
|
||||
|
||||
### Create a project (optional)
|
||||
Pick *Default ([Vue 2] babel, eslint)*
|
||||
|
||||
```bash
|
||||
# create a project
|
||||
vue create tiptap-example
|
||||
|
||||
# change directory
|
||||
cd tiptap-example
|
||||
```
|
||||
|
||||
### Install the dependencies
|
||||
You can install tiptap for Vue.js as a dependency in your project:
|
||||
|
||||
```bash
|
||||
# install the Vue.js adapter with npm
|
||||
npm install @tiptap/core @tiptap/vue-starter-kit
|
||||
|
||||
# or: install the Vue.js adapter with Yarn
|
||||
yarn add @tiptap/core @tiptap/vue-starter-kit
|
||||
```
|
||||
|
||||
The `@tiptap/vue-starter-kit` includes a few basics you would probably need anyway. Cool, you have got everything in place to start fiddling around with tiptap! 🙌
|
||||
|
||||
Start your project with `$ yarn serve` or `$ npm run serve`. Open [http://localhost:8080/](http://localhost:8080/) in your favorite browser.
|
||||
|
||||
## 2. Create a new component
|
||||
Create a new Vue component (you can call it `<tiptap />`) and add the following content. This is the fastest way to get tiptap up and running with Vue.js. It will give you a very basic version of tiptap, without any buttons. No worries, you will be able to add more functionality soon.
|
||||
|
||||
<demo name="Guide/GettingStarted" />
|
||||
|
||||
## 3. Add it to your app
|
||||
|
||||
```js
|
||||
<template>
|
||||
<div id="app">
|
||||
<tiptap />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Tiptap from './components/Tiptap.vue'
|
||||
|
||||
export default {
|
||||
name: 'App',
|
||||
components: {
|
||||
Tiptap
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
::: warning Nuxt.js
|
||||
If you use Nuxt.js, 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.
|
||||
:::
|
||||
|
||||
Congrats! You’ve got it! 🎉 Let’s start to configure your editor in the next step.
|
@ -1,30 +0,0 @@
|
||||
# Getting started
|
||||
|
||||
## toc
|
||||
|
||||
## Introduction
|
||||
tiptap is framework-agnostic and works with Vue.js and React. It even works with plain JavaScript, if that’s your thing. To keep everything as small as possible, we put the code to use tiptap with those frameworks in different packages.
|
||||
|
||||
## 1. Install the dependencies
|
||||
We assume you already have a [Vue.js](https://cli.vuejs.org/) (or [Nuxt.js](https://nuxtjs.org/)) project. To connect tiptap with Vue.js you are going to need an adapter. You can install tiptap for Vue.js as a dependency in your project:
|
||||
|
||||
```bash
|
||||
# Install the Vue.js adapter with npm
|
||||
npm install @tiptap/vue @tiptap/vue-starter-kit
|
||||
|
||||
# Or: Install the Vue.js adapter with Yarn
|
||||
yarn add @tiptap/vue @tiptap/vue-starter-kit
|
||||
```
|
||||
|
||||
The `@tiptap/vue-starter-kit` includes a few basics you would probably need anyway. Cool, you have got everything in place to set up tiptap! 🙌
|
||||
|
||||
## 2. Create a new component
|
||||
Create a new Vue component (you can call it `<tiptap />`) and add the following content. This is the fastest way to get tiptap up and running with Vue.js. It will give you a very basic version of tiptap, without any buttons. No worries, you will be able to add more functionality soon.
|
||||
|
||||
<demo name="Guide/GettingStarted" />
|
||||
|
||||
::: warning Nuxt.js
|
||||
If you use Nuxt.js, 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.
|
||||
:::
|
||||
|
||||
Congrats! You’ve got it! 🎉 Let’s start to configure your editor in the next step.
|
@ -14,7 +14,7 @@
|
||||
items:
|
||||
- title: Basic
|
||||
link: /examples/basic
|
||||
- title: Collaborative editing (WebRTC)
|
||||
- title: Collaborative editing
|
||||
link: /examples/collaborative-editing
|
||||
pro: true
|
||||
- title: Collaborative editing (WS)
|
||||
@ -41,30 +41,30 @@
|
||||
|
||||
- title: Guide
|
||||
items:
|
||||
- title: Getting started
|
||||
link: /guide/getting-started
|
||||
- title: Get started
|
||||
link: /guide/get-started
|
||||
draft: true
|
||||
- title: Configuration
|
||||
- title: Configure the editor
|
||||
link: /guide/configuration
|
||||
draft: true
|
||||
- title: Create your editor
|
||||
- title: Create a new toolbar
|
||||
link: /guide/create-your-editor
|
||||
draft: true
|
||||
- title: Custom styling
|
||||
- title: Add custom styling
|
||||
link: /guide/custom-styling
|
||||
- title: Store content
|
||||
link: /guide/store-content
|
||||
- title: Build custom extensions
|
||||
link: /guide/build-custom-extensions
|
||||
- title: Collaborative editing
|
||||
link: /guide/collaborative-editing
|
||||
draft: true
|
||||
pro: true
|
||||
- title: Advanced node views
|
||||
link: /guide/advanced-node-views
|
||||
draft: true
|
||||
- title: Working with TypeScript
|
||||
link: /guide/working-with-typescript
|
||||
- title: Collaborative editing
|
||||
link: /guide/collaborative-editing
|
||||
draft: true
|
||||
pro: true
|
||||
|
||||
- title: API
|
||||
items:
|
||||
|
@ -2145,7 +2145,9 @@
|
||||
defer-to-connect "^1.0.1"
|
||||
|
||||
"@tiptap/core@2.x":
|
||||
version "2.0.0-alpha.3"
|
||||
version "2.0.0-alpha.4"
|
||||
resolved "https://registry.yarnpkg.com/@tiptap/core/-/core-2.0.0-alpha.4.tgz#396fab673b33749bc7567d90cd5c776f8481569c"
|
||||
integrity sha512-AGZ23UL9mMpxYQEq3KfX8RgtiyOzAgl/IJwPJzy8cW1Bp3V5ua5JEeC6QeoWhy7V05+nXhoZSysIGK8m7VV52Q==
|
||||
dependencies:
|
||||
"@types/prosemirror-schema-list" "^1.0.1"
|
||||
prosemirror-commands "^1.1.3"
|
||||
|
Loading…
Reference in New Issue
Block a user