Editor

This class is a central building block of tiptap. It does most of the heavy lifting of creating a working ProseMirror (opens new window) editor such as creating the EditorView (opens new window), setting the initial EditorState (opens new window) and so on.

Although tiptap tries to hide most of the complexity of ProseMirror (opens new window), tiptap is built on top of its APIs and we strongly recommend you to read through the ProseMirror Guide (opens new window). You'll have a better understanding of how everything works under the hood and get familiar with many terms and jargon used by tiptap.

You must create an instance of Editor class and pass it to the EditorContent component. The Editor constructor accepts an object of editor options.

<template>
  <editor-content :editor="editor" />
</template>

<script>
import { Editor, EditorContent } from 'tiptap'

export default {
  components: {
    EditorContent,
  },
  data() {
    return {
      editor: new Editor({
        content: '<p>Initial editor content</p>'
      })
    }
  },
  beforeDestroy() {
    this.editor.destroy()
  },
}
</script>