add installation instructions

This commit is contained in:
Hans Pagel
2020-08-13 11:21:41 +02:00
parent bfb5f767b1
commit a283f051f0
2 changed files with 23 additions and 22 deletions

View File

@@ -1,18 +1,20 @@
# Installation # Installation
tiptap has a very modular package structure and is independent of any framework. If you want to start as fast as possible, you need at least the two packages `@tiptap/core` and `@tiptap/starter-kit`. tiptap has a very modular package structure and is independent of any framework. Depending on what you want to do with tiptap there are a few different ways to install tiptap in your project. Choose the way that fits your project best.
## Vanilla JavaScript
Use tiptap with vanilla JavaScript for a very lightweight and raw experience. If you feel like it, you can even use it to connect the tiptap core with other frameworks not mentioned here.
```bash ```bash
# Using npm # Use npm
npm install @tiptap/core @tiptap/starter-kit npm install @tiptap/core @tiptap/starter-kit
# Using Yarn # Or: Use Yarn
yarn add @tiptap/core @tiptap/starter-kit yarn add @tiptap/core @tiptap/starter-kit
``` ```
You can use it like this: Great, that should be enough to start. Here is the most essential code you need to get a running instance of tiptap:
## Vanilla JavaScript
```js ```js
import { Editor } from '@tiptap/core' import { Editor } from '@tiptap/core'
@@ -21,39 +23,38 @@ import extensions from '@tiptap/starter-kit'
new Editor({ new Editor({
element: document.getElementsByClassName('element'), element: document.getElementsByClassName('element'),
extensions: extensions(), extensions: extensions(),
content: '<p>Hey there.</p>', content: '<p>Your content.</p>',
}) })
``` ```
* Play with tiptap on [CodeSandbox](https://codesandbox.io/s/vue-issue-template-h0g28)
## Vue.js ## Vue.js
To use tiptap with Vue.js and tools that are based on Vue.js install the Vue.js adapter in your project: To use tiptap with Vue.js (and tools that are based on Vue.js) install the Vue.js adapter in your project:
```bash ```bash
# Using npm # Using npm
npm install @tiptap/core @tiptap/starter-kit @tiptap/vue npm install @tiptap/vue @tiptap/vue-starter-kit
# Using Yarn # Using Yarn
yarn add @tiptap/core @tiptap/starter-kit @tiptap/vue yarn add @tiptap/vue @tiptap/vue-starter-kit
``` ```
Create a new component and add the following content to get a basic version of tiptap: We even prepared a Vue.js starter kit for you. That should give you a good headstart. Create a new component and add the following content to get a basic version of tiptap:
<demo name="VueSetup" /> <demo name="VueSetup" />
* Read more about [Using tiptap with Vue.js](/basic-vue-example/) ## CodeSandbox
* Play with tiptap on [CodeSandbox](https://codesandbox.io/s/vue-issue-template-h0g28)
## React CodeSandbox is an online coding environment. Its great to fiddle around without setting up a local project and its great to share your code with others.
```js Its also amazing for bug reports. Try to recreate a bug there and share it with us before you [file an issue on GitHub](https://github.com/ueberdosis/tiptap-next/issues/new). This helps a ton to fix bugs faster.
// TODO
```
* Play with tiptap on [CodeSandbox](https://codesandbox.io/s/vue-issue-template-h0g28) * [Vue.js/tiptap on CodeSandbox](https://codesandbox.io/s/vue-issue-template-h0g28)
## CDN ## CDN
// TODO > ⚠️ This is broken and doesnt work. Dont use it. We are working on it.
```html
<script src="https://cdn.jsdelivr.net/npm/tiptap@1.29.4/dist/tiptap.min.js"></script>
```

View File

@@ -2,7 +2,7 @@
items: items:
- title: Introduction 🚧 - title: Introduction 🚧
link: /introduction/ link: /introduction/
- title: Installation 🚧 - title: Installation
link: /installation/ link: /installation/
- title: Guide - title: Guide