docs: update content

This commit is contained in:
Hans Pagel
2020-11-17 12:39:39 +01:00
parent c94b43feeb
commit bcddffee09
5 changed files with 92 additions and 43 deletions

View File

@@ -9,5 +9,3 @@ The document is stored in a state. All changes are applied as transactions to th
### Extensions ### 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). 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.

View File

@@ -0,0 +1,79 @@
# Get started
## toc
## Introduction
tiptap is framework-agnostic and even works with plain JavaScript, if thats your thing. To keep everthing as small and flexible as possible, its all very modular. Lets take a few basic building blocks for a test drive.
## Requirements
The following guide assumes youre working with Vue.js. Hopefully, that helps to get you going with other frameworks (or without a framework at all), while were working on more guides. We also assume youve [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
```
Lets start with a fresh Vue.js project. If you already have an existing Vue.js project, thats 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. Its required to wrap the editor in a `<client-only>` tag.
:::
Congrats! Youve got it! 🎉 Lets start to configure your editor in the next step.

View File

@@ -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 thats 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. Its required to wrap the editor in a `<client-only>` tag.
:::
Congrats! Youve got it! 🎉 Lets start to configure your editor in the next step.

View File

@@ -14,7 +14,7 @@
items: items:
- title: Basic - title: Basic
link: /examples/basic link: /examples/basic
- title: Collaborative editing (WebRTC) - title: Collaborative editing
link: /examples/collaborative-editing link: /examples/collaborative-editing
pro: true pro: true
- title: Collaborative editing (WS) - title: Collaborative editing (WS)
@@ -41,30 +41,30 @@
- title: Guide - title: Guide
items: items:
- title: Getting started - title: Get started
link: /guide/getting-started link: /guide/get-started
draft: true draft: true
- title: Configuration - title: Configure the editor
link: /guide/configuration link: /guide/configuration
draft: true draft: true
- title: Create your editor - title: Create a new toolbar
link: /guide/create-your-editor link: /guide/create-your-editor
draft: true draft: true
- title: Custom styling - title: Add custom styling
link: /guide/custom-styling link: /guide/custom-styling
- title: Store content - title: Store content
link: /guide/store-content link: /guide/store-content
- title: Build custom extensions - title: Build custom extensions
link: /guide/build-custom-extensions link: /guide/build-custom-extensions
- title: Collaborative editing
link: /guide/collaborative-editing
draft: true
pro: true
- title: Advanced node views - title: Advanced node views
link: /guide/advanced-node-views link: /guide/advanced-node-views
draft: true draft: true
- title: Working with TypeScript - title: Working with TypeScript
link: /guide/working-with-typescript link: /guide/working-with-typescript
- title: Collaborative editing
link: /guide/collaborative-editing
draft: true
pro: true
- title: API - title: API
items: items:

View File

@@ -2145,7 +2145,9 @@
defer-to-connect "^1.0.1" defer-to-connect "^1.0.1"
"@tiptap/core@2.x": "@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: dependencies:
"@types/prosemirror-schema-list" "^1.0.1" "@types/prosemirror-schema-list" "^1.0.1"
prosemirror-commands "^1.1.3" prosemirror-commands "^1.1.3"