tiptap/docs/installation/vanilla-javascript.md

45 lines
1.3 KiB
Markdown
Raw Normal View History

2022-12-23 05:46:43 +08:00
---
title: Vanilla JavaScript WYSIWYG
tableOfContents: true
---
# Vanilla JavaScript
2023-08-11 12:14:27 +08:00
**Note**<br />
2023-08-12 01:33:46 +08:00
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.
2023-08-11 12:14:27 +08:00
2022-12-23 05:46:43 +08:00
## 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 doesnt include all, but the most common extensions.
2022-12-23 05:46:43 +08:00
```bash
feat(pm): new prosemirror package for dependency resolving * chore:(core): migrate to tsup * chore: migrate blockquote and bold to tsup * chore: migrated bubble-menu and bullet-list to tsup * chore: migrated more packages to tsup * chore: migrate code and character extensions to tsup * chore: update package.json to simplify build for all packages * chore: move all packages to tsup as a build process * chore: change ci build task * feat(pm): add prosemirror meta package * rfix: resolve issues with build paths & export mappings * docs: update documentation to include notes for @tiptap/pm * chore(pm): update tsconfig * chore(packages): update packages * fix(pm): add package export infos & fix dependencies * chore(general): start moving to pm package as deps * chore: move to tiptap pm package internally * fix(demos): fix demos working with new pm package * fix(tables): fix tables package * fix(tables): fix tables package * chore(demos): pinned typescript version * chore: remove unnecessary tsconfig * chore: fix netlify build * fix(demos): fix package resolving for pm packages * fix(tests): fix package resolving for pm packages * fix(tests): fix package resolving for pm packages * chore(tests): fix tests not running correctly after pm package * chore(pm): add files to files array * chore: update build workflow * chore(tests): increase timeout time back to 12s * chore(docs): update docs * chore(docs): update installation guides & pm information to docs * chore(docs): add link to prosemirror docs * fix(vue-3): add missing build step * chore(docs): comment out cdn link * chore(docs): remove semicolons from docs * chore(docs): remove unnecessary installation note * chore(docs): remove unnecessary installation note
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 lets 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!