@tiptap/starter-kit

Basic Setup

This code sets up a basic Tiptap editor with the StarterKit extension, which includes essential features like bold, italic, and paragraph formatting.

import { Editor } from '@tiptap/core';
import StarterKit from '@tiptap/starter-kit';

const editor = new Editor({
  element: document.querySelector('#editor'),
  extensions: [StarterKit],
});

Custom Extensions

This example demonstrates how to add custom extensions to the Tiptap editor alongside the StarterKit, allowing for extended functionality.

import { Editor } from '@tiptap/core';
import StarterKit from '@tiptap/starter-kit';
import CustomExtension from './CustomExtension';

const editor = new Editor({
  element: document.querySelector('#editor'),
  extensions: [StarterKit, CustomExtension],
});

Event Handling

This code snippet shows how to handle events in the Tiptap editor, such as logging the updated content whenever the editor's content changes.

import { Editor } from '@tiptap/core';
import StarterKit from '@tiptap/starter-kit';

const editor = new Editor({
  element: document.querySelector('#editor'),
  extensions: [StarterKit],
  onUpdate: ({ editor }) => {
    console.log('Content updated:', editor.getHTML());
  },
});