mirror/tiptap
1
0
Fork 0
mirror of https://github.com/ueberdosis/tiptap.git synced 2025-01-18 06:03:22 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

docs: update the installation page

Browse Source
This commit is contained in:
Hans Pagel 2021-01-29 21:52:34 +01:00
parent eff6c4a84a
commit 48b54d1186
1 changed files with 26 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,10 +3,20 @@
## toc
## Introduction
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.
Depending on how your development setup looks like, there are a few different ways to install tiptap. We have put together integration guides for a few popular frameworks to get you started quickly. You can even use it without any front-end framework. Choose the way that fits your workflow and start building cool things!
## Option 1: 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 tiptap with other frameworks not mentioned here.
## Integration guides
* [Vue.js](/guide/getting-started/vue-cli)
* [Nuxt.js](/guide/getting-started/nuxtjs)
* [React](/guide/getting-started/react) (Draft)
* [Svelte](/guide/getting-started/svelte) (Draft)
* [Alpine.js](/guide/getting-started/alpinejs) (Draft)
* [Livewire](/guide/getting-started/livewire) (Draft)
Don’t see your framework here? That shouldn’t stop you from installing tiptap. Just use the Vanilla JavaScript version, that should work fine, too.
## Vanilla JavaScript
Use tiptap with vanilla JavaScript for a very lightweight and raw experience. If you feel like it, you can use that version to connect tiptap with other frameworks not mentioned here, too.
```bash
# with npm
@ -16,7 +26,7 @@ npm install @tiptap/core @tiptap/starter-kit
yarn add @tiptap/core @tiptap/starter-kit
```
Great, that should be enough to start. Here is the most essential code you need to get a running instance of tiptap:
Great, that’s all you need for now. Here is the boilerplate code to start your first tiptap instance:
```js
import { Editor } from '@tiptap/core'
@ -29,45 +39,8 @@ new Editor({
})
```
## Option 2: Vue.js
To use tiptap with Vue.js (and tools that are based on Vue.js) install tiptap together with the Vue.js adapter in your project. We even prepared a Vue.js starter kit, which gives you a good headstart.
```bash
# with npm
npm install @tiptap/core @tiptap/vue @tiptap/vue-starter-kit
# with Yarn
yarn add @tiptap/core @tiptap/vue @tiptap/vue-starter-kit
```
Create a new component and add the following content to get a basic version of tiptap:
<demo name="Overview/Installation" />
### 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.
[Read more](https://nuxtjs.org/api/components-client-only)
## 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.
<iframe
src="https://codesandbox.io/embed/tiptap-issue-template-b83rr?fontsize=14&hidenavigation=1&module=%2Fsrc%2Fcomponents%2FTiptap.vue&theme=dark"
style="width:100%; height:400px; border:0; border-radius: 4px; overflow:hidden;"
title="tiptap-issue-template"
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
></iframe>
It’s also amazing for bug reports. Try to recreate a bug there and share it with us before when you [file an issue on GitHub](https://github.com/ueberdosis/tiptap-next/issues/new/choose). That helps us to reproduce the bug quickly, and fix them faster.
## Option 4: CDN (Draft)
To pull in tiptap for quick demos or just giving it a spin, grab the latest build via CDN. We use two different provides:
### Skypack (ES Modules)
Skypack enables you to use ES modules, which should be supported in all modern browsers. The packages are smaller, that’s great, too. So here is how to use it:
## CDN
For testing purposes or demos, use our [Skypack](https://www.skypack.dev/) CDN builds. Here are the few lines of code you need to get started:
```html
<!doctype html>
@ -89,27 +62,14 @@ Skypack enables you to use ES modules, which should be supported in all modern b
</html>
```
### ~~Unpkg (UMD, deprecated)~~
We also have an UMD build on unpkg. Those UMD builds are larger, but should work even in older browsers. As tiptap doesn’t work in older browsers anyway, we tend to remove those builds. What do you think? Anyway, here‘s how you can use it:
## 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.
```html
<!doctype html>
<head>
<meta charset="utf-8">
<script src="https://unpkg.com/@tiptap/core@latest"></script>
<script src="https://unpkg.com/@tiptap/starter-kit@latest"></script>
</head>
<body>
<div class="element"></div>
<script>
const { Editor } = window['@tiptap/core']
const { defaultExtensions } = window['@tiptap/starter-kit']
const editor = new Editor({
element: document.querySelector('.element'),
extensions: defaultExtensions(),
content: '<p>Your content.</p>',
})
</script>
</body>
</html>
```
<iframe
src="https://codesandbox.io/embed/tiptap-issue-template-b83rr?fontsize=14&hidenavigation=1&module=%2Fsrc%2Fcomponents%2FTiptap.vue&theme=dark"
style="width:100%; height:400px; border:0; border-radius: 4px; overflow:hidden;"
title="tiptap-issue-template"
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
></iframe>
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/choose). That helps us to reproduce the bug easily, and release a fix faster.