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

wording

Browse Source
This commit is contained in:
Hans Pagel
2020-09-21 17:17:35 +02:00
parent c6c03f72b4
commit b2c85f11df
2 changed files with 41 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
docs/src/docPages/overview/installation.md
View File

@@ -1,32 +1,16 @@
# Installation
tiptap has a 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.
You’re free to use tiptap with the framework of your choice. Depending on what you want to do, there are a few different ways to install tiptap in your project. Choose the way that fits your workflow.
## Vue.js
## Overview <!-- omit in toc -->
To use tiptap with Vue.js (and tools that are based on Vue.js) install tiptap together with the Vue.js rendering adapter in your project. We even prepared a Vue.js starter kit, which gives you a good headstart.
- [Option 1: Vanilla JavaScript](#option-1-vanilla-javascript)
- [Option 2: Vue.js](#option-2-vuejs)
- [Option 3: CodeSandbox](#option-3-codesandbox)
```bash
# With npm
npm install @tiptap/core @tiptap/vue @tiptap/vue-starter-kit
## Option 1: Vanilla JavaScript
# Or: With Yarn
yarn add @tiptap/core @tiptap/vue @tiptap/vue-starter-kit
```
| Package | Description |
| -------------------------------------------------------------------------------- | ----------------------------------- |
| [@tiptap/core](https://www.npmjs.com/package/@tiptap/core) | The actual editor |
| [@tiptap/vue](https://www.npmjs.com/package/@tiptap/vue) | Rendering for Vue.js |
| [@tiptap/vue-starter-kit](https://www.npmjs.com/package/@tiptap/vue-starter-kit) | Installs the most common extensions |
Create a new component and add the following content to get a basic version of tiptap:
<demo name="General/Installation" />
## Plain 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.
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 (Svelte 👋) not mentioned here.
```bash
# With npm
@@ -36,6 +20,11 @@ npm install @tiptap/core @tiptap/starter-kit
yarn add @tiptap/core @tiptap/starter-kit
```
| Package | Description |
| ---------------------------------------------------------------------------- | -------------------------- |
| [@tiptap/core](https://www.npmjs.com/package/@tiptap/core) | The actual editor |
| [@tiptap/starter-kit](https://www.npmjs.com/package/@tiptap/vue-starter-kit) | The most common extensions |
Great, that should be enough to start. Here is the most essential code you need to get a running instance of tiptap:
```js
@@ -49,10 +38,32 @@ new Editor({
})
```
## CodeSandbox
## Option 2: Vue.js
CodeSandbox is an online coding environment. It’s great to fiddle around without setting up a local project and it’s great to share your code with others.
To use tiptap with Vue.js (and tools that are based on Vue.js) install tiptap together with the Vue.js rendering adapter in your project. We even prepared a Vue.js starter kit, which gives you a good headstart.
It’s 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.
```bash
# With npm
npm install @tiptap/core @tiptap/vue @tiptap/vue-starter-kit
# Or: With Yarn
yarn add @tiptap/core @tiptap/vue @tiptap/vue-starter-kit
```
| Package | Description |
| -------------------------------------------------------------------------------- | --------------------------------------------- |
| [@tiptap/core](https://www.npmjs.com/package/@tiptap/core) | The actual editor |
| [@tiptap/vue](https://www.npmjs.com/package/@tiptap/vue) | Rendering for Vue.js |
| [@tiptap/vue-starter-kit](https://www.npmjs.com/package/@tiptap/vue-starter-kit) | The most common extensions wrapped for Vue.js |
Create a new component and add the following content to get a basic version of tiptap:
<demo name="General/Installation" />
## Option 3: CodeSandbox
CodeSandbox is an online coding environment. It’s great to fiddle around without setting up a local project and to share your code with others.
It’s also amazing for bug reports. Found it a bug? Try to recreate it there and share it with us before you [file an issue on GitHub](https://github.com/ueberdosis/tiptap-next/issues/new). That helps to fix bugs faster.
* [Vue.js/tiptap on CodeSandbox](https://codesandbox.io/s/vue-issue-template-h0g28)