Configure the editor

Introduction

There are a few things you can control when initializing a new editor. For most cases it’s enough to say where tiptap should be rendered (element), what functionalities you want to enable (extensions) and what the initial document should be (content). A few more things can be configured though. Let’s look at a fully configured editor example.

Configure the editor

To add your configuration, pass an object with settings to the Editor class, like shown here:

import { Editor } from '@tiptap/core'
import Document from '@tiptap/extension-document'
import Paragraph from '@tiptap/extension-paragraph'
import Text from '@tiptap/extension-text'

new Editor({
  element: document.querySelector('.element'),
  extensions: [
    Document,
    Paragraph,
    Text,
  ],
  content: '<p>Example Text</p>',
  autofocus: true,
  editable: true,
  injectCSS: false,
})

This will do the following:

bind tiptap to .element,
load the Document, Paragraph and Text extensions,
set the initial content,
place the cursor in the editor after initialization,
make the text editable (but that’s the default anyway), and
disable the loading of the default CSS (which is not much anyway).

Nodes, marks and extensions

Most features are packed into nodes, marks and extensions. Import what you need and pass them as an Array to the editor and you are good to go. Here is the minimal setup with only three extensions:

import { Editor } from '@tiptap/core'
import Document from '@tiptap/extension-document'
import Paragraph from '@tiptap/extension-paragraph'
import Text from '@tiptap/extension-text'

new Editor({
  element: document.querySelector('.element'),
  extensions: [
    Document,
    Paragraph,
    Text,
  ],
})

Configure an extensions

Most extensions can be configured. Add a .configure() to pass an object to it. The following example will disable the default heading levels 4, 5 and 6:

import { Editor } from '@tiptap/core'
import Document from '@tiptap/extension-document'
import Paragraph from '@tiptap/extension-paragraph'
import Text from '@tiptap/extension-text'
import Heading from '@tiptap/extension-heading'

new Editor({
  element: document.querySelector('.element'),
  extensions: [
    Document,
    Paragraph,
    Text,
    Heading.configure({
      levels: [1, 2, 3],
    }),
  ],
})

Have a look at the documentation of the extension you use to learn more about their settings.

Default extensions

We have put together a few of the most common extensions and provide a defaultExtensions() helper to load them. Here is how you to use that:

import { Editor, defaultExtensions } from '@tiptap/starter-kit'

new Editor({
  extensions: defaultExtensions(),
})

And you can even pass configuration for all default extensions as an object. Just prefix the configuration with the extension name:

import { Editor, defaultExtensions } from '@tiptap/starter-kit'

new Editor({
  extensions: defaultExtensions({
    heading: {
      levels: [1, 2, 3],
    },
  }),
})

The defaultExtensions() function returns an array, so if you want to load them and add some custom extensions you could write it like that:

import { Editor, defaultExtensions } from '@tiptap/starter-kit'
import Strike from '@tiptap/extension-strike'

new Editor({
  extensions: [
    ...defaultExtensions(),
    Strike,
  ],
})

Don’t want to load a specific extension? Just filter it out:

import { Editor, defaultExtensions } from '@tiptap/starter-kit'

new Editor({
  extensions: [
    ...defaultExtensions().filter(extension => extension.config.name !== 'history'),
  ],
})

You’ll probably see something like that in collaborative editing examples. The Collaboration comes with its own history extension, you need to remove the default History extension to avoid conflicts.

4.0 KiB Raw Blame History Unescape Escape

Configure the editor

toc

Introduction