mirror of
https://github.com/ueberdosis/tiptap.git
synced 2025-08-06 13:38:49 +08:00
merge installation and the getting started guide
This commit is contained in:
Hans Pagel
parent
13ad3acf63
commit
5571e1dd27
@ -1,5 +1,5 @@
|
||||
context('/overview/installation', () => {
|
||||
context('/installation', () => {
|
||||
before(() => {
|
||||
cy.visit('/overview/installation')
|
||||
cy.visit('/installation')
|
||||
})
|
||||
})
|
||||
|
||||
@ -1,51 +0,0 @@
|
||||
# Getting started
|
||||
|
||||
## toc
|
||||
|
||||
## Introduction
|
||||
tiptap 2 is framework-agnostic and even works with plain JavaScript, if that’s your thing. We’re working on guides for all the different frameworks and workflows, but here is the general one. The following steps should help you to integrate tiptap in your JavaScript project.
|
||||
|
||||
## Alternative Guides
|
||||
* [Vue CLI](/guide/getting-started/vue)
|
||||
* [Nuxt.js](/guide/getting-started/nuxt)
|
||||
* [React](/guide/getting-started/react) (Draft)
|
||||
* [Svelte](/guide/getting-started/svelte) (Draft)
|
||||
* [Alpine.js](/guide/getting-started/alpine) (Draft)
|
||||
* [Livewire](/guide/getting-started/livewire) (Draft)
|
||||
|
||||
## Requirements
|
||||
* [Node](https://nodejs.org/en/download/) installed on your machine
|
||||
|
||||
## 1. Install the dependencies
|
||||
For the following example you’ll need the `@tiptap/core` (the actual editor) and the `@tiptap/starter-kit` which has everything to get started quickly, for example a few default extensions.
|
||||
|
||||
```bash
|
||||
# install with npm
|
||||
npm install @tiptap/core @tiptap/starter-kit
|
||||
|
||||
# install with Yarn
|
||||
yarn add @tiptap/core @tiptap/starter-kit
|
||||
```
|
||||
|
||||
## 2. Add a container
|
||||
You need a place somewhere in your app, where we should place tiptap. Place the following HTML there:
|
||||
|
||||
```html
|
||||
<div class="element"></div>
|
||||
```
|
||||
|
||||
## 3. Initialize the editor
|
||||
Now, let’s initialize the editor in JavaScript:
|
||||
|
||||
```js
|
||||
import { Editor } from '@tiptap/core'
|
||||
import { defaultExtensions } from '@tiptap/starter-kit'
|
||||
|
||||
new Editor({
|
||||
element: document.querySelector('.element'),
|
||||
extensions: defaultExtensions(),
|
||||
content: '<p>Your content.</p>',
|
||||
})
|
||||
```
|
||||
|
||||
When you open the project in your browser, you should now see tiptap in action. Time to give yourself a pat on the back. Let’s start to configure your editor in the next step.
|
||||
56
docs/src/docPages/installation.md
Normal file
56
docs/src/docPages/installation.md
Normal file
@ -0,0 +1,56 @@
|
||||
# Getting started
|
||||
|
||||
## toc
|
||||
|
||||
## Introduction
|
||||
tiptap 2 is framework-agnostic and even works with plain JavaScript, if that’s your thing. We’re working on guides for all the different frameworks and workflows. The following steps should help you to integrate tiptap in your JavaScript project.
|
||||
|
||||
## Integration guides
|
||||
* [CDN](/installation/cdn)
|
||||
* [CodeSandbox](/installation/codesandbox)
|
||||
* [Vue 2](/installation/vue2)
|
||||
* [Vue 3](/installation/vue) (Draft)
|
||||
* [Nuxt.js](/installation/nuxt)
|
||||
* [React](/installation/react) (Draft)
|
||||
* [Svelte](/installation/svelte) (Draft)
|
||||
* [Alpine.js](/installation/alpine) (Draft)
|
||||
* [Livewire](/installation/livewire) (Draft)
|
||||
|
||||
## Vanilla JavaScript
|
||||
|
||||
### Requirements
|
||||
* [Node](https://nodejs.org/en/download/) installed on your machine
|
||||
|
||||
### 1. Install the dependencies
|
||||
For the following example you will need `@tiptap/core` (the actual editor) and `@tiptap/starter-kit` which has everything to get started quickly, for example the most common extensions.
|
||||
|
||||
```bash
|
||||
# install with npm
|
||||
npm install @tiptap/core @tiptap/starter-kit
|
||||
|
||||
# install with Yarn
|
||||
yarn add @tiptap/core @tiptap/starter-kit
|
||||
```
|
||||
|
||||
### 2. Add a container
|
||||
Add the following HTML where you want the editor to be mounted:
|
||||
|
||||
```html
|
||||
<div class="element"></div>
|
||||
```
|
||||
|
||||
### 3. Initialize the editor
|
||||
Now, let’s initialize the editor in JavaScript:
|
||||
|
||||
```js
|
||||
import { Editor } from '@tiptap/core'
|
||||
import { defaultExtensions } from '@tiptap/starter-kit'
|
||||
|
||||
new Editor({
|
||||
element: document.querySelector('.element'),
|
||||
extensions: defaultExtensions(),
|
||||
content: '<p>Your content.</p>',
|
||||
})
|
||||
```
|
||||
|
||||
When you open the project in your browser, you should now see tiptap in action. Time to give yourself a pat on the back.
|
||||
22
docs/src/docPages/installation/cdn.md
Normal file
22
docs/src/docPages/installation/cdn.md
Normal file
@ -0,0 +1,22 @@
|
||||
# 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>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
<body>
|
||||
<div class="element"></div>
|
||||
<script type="module">
|
||||
import { Editor } from 'https://cdn.skypack.dev/@tiptap/core?min'
|
||||
import { defaultExtensions } from 'https://cdn.skypack.dev/@tiptap/starter-kit?min'
|
||||
const editor = new Editor({
|
||||
element: document.querySelector('.element'),
|
||||
extensions: defaultExtensions(),
|
||||
content: '<p>Your content.</p>',
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
11
docs/src/docPages/installation/codesandbox.md
Normal file
11
docs/src/docPages/installation/codesandbox.md
Normal file
@ -0,0 +1,11 @@
|
||||
# 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"
|
||||
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.
|
||||
@ -18,7 +18,7 @@ Create exactly the rich text editor you want out of customizable building blocks
|
||||
## Features
|
||||
**Headless.** We don’t tell you what a menu should look like or where it should be rendered in the DOM. That’s why tiptap is headless and comes without any CSS. You are in full control over markup, styling and behaviour.
|
||||
|
||||
**Framework-agnostic.** No matter what framework you use, you’ll enjoy tiptap. Out of the box, it works with plain JavaScript and Vue.js, but it’s also possible to use it in [React](/guide/getting-started/react), Svelte and others.
|
||||
**Framework-agnostic.** No matter what framework you use, you’ll enjoy tiptap. Out of the box, it works with plain JavaScript and Vue.js, but it’s also possible to use it in [React](/installation/react), Svelte and others.
|
||||
|
||||
**TypeScript.** tiptap 2 is written in TypeScript. That helps us to find bugs early and gives you a nice autocomplete for the API (if your IDE supports that) on top of the extensive human written documentation.
|
||||
|
||||
|
||||
@ -1,75 +0,0 @@
|
||||
# Installation
|
||||
|
||||
## toc
|
||||
|
||||
## Introduction
|
||||
There are a few different ways to install tiptap, depending on your development setup. We have put together integration guides for a few popular frameworks to get you started quickly. You can even use tiptap without any front-end framework, too. Choose the way that fits your workflow and start building cool things!
|
||||
|
||||
## Integration guides
|
||||
* [Vue.js](/guide/getting-started/vue)
|
||||
* [Nuxt.js](/guide/getting-started/nuxt)
|
||||
* [React](/guide/getting-started/react) (Draft)
|
||||
* [Svelte](/guide/getting-started/svelte) (Draft)
|
||||
* [Alpine.js](/guide/getting-started/alpine) (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
|
||||
npm install @tiptap/core @tiptap/starter-kit
|
||||
|
||||
# with Yarn
|
||||
yarn add @tiptap/core @tiptap/starter-kit
|
||||
```
|
||||
|
||||
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'
|
||||
import { defaultExtensions } from '@tiptap/starter-kit'
|
||||
|
||||
new Editor({
|
||||
element: document.querySelector('.element'),
|
||||
extensions: defaultExtensions(),
|
||||
content: '<p>Your content.</p>',
|
||||
})
|
||||
```
|
||||
|
||||
## 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>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
<body>
|
||||
<div class="element"></div>
|
||||
<script type="module">
|
||||
import { Editor } from 'https://cdn.skypack.dev/@tiptap/core?min'
|
||||
import { defaultExtensions } from 'https://cdn.skypack.dev/@tiptap/starter-kit?min'
|
||||
const editor = new Editor({
|
||||
element: document.querySelector('.element'),
|
||||
extensions: defaultExtensions(),
|
||||
content: '<p>Your content.</p>',
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## 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"
|
||||
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.
|
||||
@ -1,4 +1,6 @@
|
||||
# Become a sponsor
|
||||
# Become a sponsor 💖
|
||||
|
||||
## Introduction
|
||||
To deliver a top-notch developer experience and user experience, we put ~~hundreds~~ thousands of hours of unpaid work into tiptap. Your funding helps us to make this work more and more financially sustainable. This enables us to provide helpful support, maintain all our packages, keep everything up to date, and develop new features and extensions for tiptap.
|
||||
|
||||
Give back to the open source community and [sponsor us on GitHub](https://github.com/sponsors/ueberdosis)! ♥
|
||||
|
||||
@ -46,7 +46,7 @@
|
||||
</main>
|
||||
|
||||
<portal :to="menuPortal">
|
||||
<g-link class="app__menu-item" to="/overview/installation">
|
||||
<g-link class="app__menu-item" to="/installation">
|
||||
Documentation
|
||||
</g-link>
|
||||
<g-link class="app__menu-item" to="https://github.com/ueberdosis/tiptap-next">
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
- title: Overview
|
||||
items:
|
||||
- title: Installation
|
||||
link: /overview/installation
|
||||
link: /installation
|
||||
- title: Upgrade Guide
|
||||
link: /overview/upgrade-guide
|
||||
- title: Become a sponsor
|
||||
@ -46,39 +46,6 @@
|
||||
|
||||
- title: Guide
|
||||
items:
|
||||
- title: Getting started
|
||||
link: /guide/getting-started
|
||||
items:
|
||||
- title: Vue.js 2
|
||||
link: /guide/getting-started/vue2
|
||||
skip: true
|
||||
- title: Vue.js 3
|
||||
link: /guide/getting-started/vue
|
||||
type: draft
|
||||
skip: true
|
||||
- title: Nuxt.js
|
||||
link: /guide/getting-started/nuxt
|
||||
skip: true
|
||||
- title: React
|
||||
link: /guide/getting-started/react
|
||||
type: draft
|
||||
skip: true
|
||||
- title: Next.js
|
||||
link: /guide/getting-started/next
|
||||
type: draft
|
||||
skip: true
|
||||
- title: Svelte
|
||||
link: /guide/getting-started/svelte
|
||||
type: draft
|
||||
skip: true
|
||||
- title: Alpine.js
|
||||
link: /guide/getting-started/alpine
|
||||
type: draft
|
||||
skip: true
|
||||
- title: Livewire
|
||||
link: /guide/getting-started/livewire
|
||||
type: draft
|
||||
skip: true
|
||||
- title: Configure the editor
|
||||
link: /guide/configuration
|
||||
- title: Create a toolbar
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
tiptap gives you full control about every single aspect of your text editor experience. It’s customizable, comes with a ton of extensions, is open-source, has an extensive documentation, and is simply a joy to use. Join our welcoming community and start building cool things! It’s free.
|
||||
</p>
|
||||
<btn-wrapper>
|
||||
<btn type="primary" icon="arrow-right" to="/overview/installation">
|
||||
<btn type="primary" icon="arrow-right" to="/installation">
|
||||
Get Started
|
||||
</btn>
|
||||
<btn
|
||||
@ -49,10 +49,10 @@
|
||||
Framework-agnostic
|
||||
</h3>
|
||||
<p>
|
||||
No matter what framework you use, you’ll enjoy tiptap. Out of the box, it works with plain JavaScript and Vue.js, but it’s also possible to use it in <g-link to="/guide/getting-started/react">React</g-link>, Svelte and others.
|
||||
No matter what framework you use, you’ll enjoy tiptap. Out of the box, it works with plain JavaScript and Vue.js, but it’s also possible to use it in <g-link to="/installation/react">React</g-link>, <g-link to="/installation/svelte">Svelte</g-link> and others.
|
||||
</p>
|
||||
<div>
|
||||
<btn type="tertiary" icon="arrow-right" to="/overview/installation">
|
||||
<btn type="tertiary" icon="arrow-right" to="/installation">
|
||||
Installation
|
||||
</btn>
|
||||
</div>
|
||||
@ -63,7 +63,7 @@
|
||||
TypeScript
|
||||
</h3>
|
||||
<p>
|
||||
tiptap 2 is written in TypeScript. That helps us to find bugs early and gives you a nice autocomplete for the API (if your IDE supports that) on top of the extensive human written documentation.
|
||||
tiptap 2 is written in TypeScript. That helps to find bugs early and gives a nice autocomplete for the API (if your IDE supports that) on top of the extensive human written documentation.
|
||||
</p>
|
||||
<div>
|
||||
<btn type="tertiary" icon="arrow-right" to="/guide/typescript">
|
||||
@ -77,7 +77,7 @@
|
||||
Collaborative
|
||||
</h3>
|
||||
<p>
|
||||
Real-time collaboration, syncing between different devices and working offline used to be hard. We provide everything you need to keep everything in sync, conflict-free with the power of <g-link to="https://github.com/yjs/yjs">Y.js</g-link>. Our production-grade setup requires less than 20 lines of code.
|
||||
Real-time collaboration, syncing between different devices and working offline used to be hard. We provide everything you need to keep everything in sync, conflict-free with the power of <g-link to="https://github.com/yjs/yjs">Y.js</g-link>.
|
||||
</p>
|
||||
<div>
|
||||
<btn type="tertiary" icon="arrow-right" to="/guide/collaborative-editing">
|
||||
@ -93,6 +93,11 @@
|
||||
<p>
|
||||
Over the years, a lovely community has grown around tiptap. There’s so much content shared, so many people helping out in issues and a ton of community extensions, you’ll be surprised how much that can help.
|
||||
</p>
|
||||
<div>
|
||||
<btn type="tertiary" icon="arrow-right" to="https://github.com/ueberdosis/tiptap-next">
|
||||
GitHub
|
||||
</btn>
|
||||
</div>
|
||||
</feature-item>
|
||||
</feature-list>
|
||||
</app-section>
|
||||
@ -128,7 +133,7 @@
|
||||
</html></prism>
|
||||
<!-- eslint-enable -->
|
||||
<div>
|
||||
<btn type="tertiary" icon="arrow-right" to="/overview/installation">
|
||||
<btn type="tertiary" icon="arrow-right" to="/installation">
|
||||
Learn More
|
||||
</btn>
|
||||
</div>
|
||||
@ -189,7 +194,7 @@
|
||||
</logo-list>
|
||||
<div>
|
||||
<btn type="tertiary" icon="arrow-right" to="https://github.com/ueberdosis/tiptap/network/dependents?package_id=UGFja2FnZS0xMzE5OTg0ODc%3D">
|
||||
And Many More
|
||||
And many more
|
||||
</btn>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user