mirror of https://github.com/ueberdosis/tiptap.git synced 2024-12-04 03:29:03 +08:00

* docs: update installation guides

* docs: remove base setup

* docs: complete the prosemirror package documentation

2023-02-07 10:18:53 +01:00

1.1 KiB

Raw Blame History

title	tableOfContents
Vanilla JavaScript WYSIWYG	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

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.

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:

<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:

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!

1.1 KiB Raw Blame History Unescape Escape