2022-12-23 05:46:43 +08:00
|
|
|
|
---
|
|
|
|
|
title: Vanilla JavaScript WYSIWYG
|
|
|
|
|
tableOfContents: true
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
# Vanilla JavaScript
|
|
|
|
|
|
|
|
|
|
## 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
|
2023-02-03 00:37:33 +08:00
|
|
|
|
For the following example you will need `@tiptap/core` (the actual editor), `@tiptap/pm` (the ProseMirror library) and `@tiptap/starter-kit`.
|
2022-12-23 05:46:43 +08:00
|
|
|
|
|
|
|
|
|
The StarterKit doesn’t include all, but the most common extensions.
|
|
|
|
|
|
|
|
|
|
```bash
|
2023-02-03 00:37:33 +08:00
|
|
|
|
npm install @tiptap/core @tiptap/pm @tiptap/starter-kit
|
2022-12-23 05:46:43 +08:00
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
## 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!
|