mirror of
https://github.com/ueberdosis/tiptap.git
synced 2024-12-04 11:49:02 +08:00
45 lines
1.3 KiB
Markdown
45 lines
1.3 KiB
Markdown
---
|
||
title: Vanilla JavaScript WYSIWYG
|
||
tableOfContents: true
|
||
---
|
||
|
||
# Vanilla JavaScript
|
||
|
||
**Note**<br />
|
||
If you don't use a bundler like Webpack or Rollup, please read the [CDN](/installation/cdn) guide instead. Since Tiptap is built in a modular way you will be required to use `<script type="module">` in your HTML to get our CDN imports working.
|
||
|
||
## Introduction
|
||
You are using plain JavaScript or a framework that is not listed here? No worries, we provide everything you need.
|
||
|
||
## 1. Install the dependencies
|
||
For the following example you will need `@tiptap/core` (the actual editor), `@tiptap/pm` (the ProseMirror library) and `@tiptap/starter-kit`. The StarterKit doesn’t include all, but the most common extensions.
|
||
|
||
```bash
|
||
npm install @tiptap/core @tiptap/pm @tiptap/starter-kit
|
||
```
|
||
|
||
## 2. Add some markup
|
||
Add the following HTML where you want the editor to be mounted:
|
||
|
||
```html
|
||
<div class="element"></div>
|
||
```
|
||
|
||
## 3. Initialize the editor
|
||
Everything is in place now, so let’s set up the actual editor now. Add the following code to your JavaScript:
|
||
|
||
```js
|
||
import { Editor } from '@tiptap/core'
|
||
import StarterKit from '@tiptap/starter-kit'
|
||
|
||
new Editor({
|
||
element: document.querySelector('.element'),
|
||
extensions: [
|
||
StarterKit,
|
||
],
|
||
content: '<p>Hello World!</p>',
|
||
})
|
||
```
|
||
|
||
Open your project in the browser to see Tiptap in action. Good work!
|