Skip to main content

​
Overview

The Editor class is the main entry point for Canvas Editor. It manages the entire editor lifecycle, from initialization to destruction, and provides access to all core functionality through its public API.

​
Constructor

The Editor constructor requires a container element, initial data, and optional configuration: 
import Editor from 'canvas-editor'

const container = document.querySelector('#editor')

const editor = new Editor(
  container,      // HTMLDivElement
  data,          // IEditorData | IElement[]
  options        // IEditorOption (optional)
)

​
Parameters

The DOM element that will host the editor. Must be a div element. The editor will render its canvas inside this container.
Initial document content. Can be:
  • Simple array: IElement[] - Sets the main content area
  • Full document: IEditorData - Includes header, main, footer, and graffiti
// Simple array
const data = [
  { value: 'Hello World' }
]

// Full document structure
const data = {
  header: [{ value: 'Header text' }],
  main: [{ value: 'Main content' }],
  footer: [{ value: 'Footer text' }],
  graffiti: []
}
Configuration object to customize editor behavior:
const options = {
  mode: EditorMode.EDIT,           // EDIT, READONLY, PRINT, FORM
  defaultFont: 'Microsoft YaHei',  // Default font family
  defaultSize: 16,                 // Default font size
  pageMode: PageMode.PAGING,       // PAGING, CONTINUOUS
  renderMode: RenderMode.CANVAS,   // CANVAS, SVG
  margins: [100, 120, 100, 120],   // [top, right, bottom, left]
  header: {
    disabled: false,
    height: 100
  },
  footer: {
    disabled: false,
    height: 100
  }
}

​
Core Properties

command

Execute operations and retrieve data
editor.command.executeBold()
editor.command.getValue()

listener

Legacy event handlers (callback-based)
editor.listener.contentChange = () => {}

eventBus

Modern event system (pub/sub pattern)
editor.eventBus.on('contentChange', () => {})

register

Register custom context menus and shortcuts
editor.register.contextMenu({})

​
Additional Properties

editor.version      // string - Editor version (e.g., "1.0.0")
editor.override     // Override - Customize internal behaviors
editor.use          // UsePlugin - Load plugins
editor.destroy      // Function - Cleanup and destroy editor

​
Lifecycle

1

Initialization

When you create a new Editor instance, the constructor:
  1. Merges provided options with defaults
  2. Deep clones the data to prevent mutations
  3. Formats element lists (header, main, footer)
  4. Initializes the Draw engine with the container
  5. Sets up Command, ContextMenu, and Shortcut systems
  6. Registers the destroy method
2

Active State

The editor is now ready to use. You can:
  • Execute commands via editor.command
  • Listen to events via editor.listener or editor.eventBus
  • Register custom functionality via editor.register
  • Load plugins via editor.use(plugin)
3

Destruction

Clean up the editor instance when done:
editor.destroy()
This will:
  • Destroy the Draw engine and cleanup canvas
  • Remove all keyboard shortcuts
  • Remove all context menu handlers
  • Clear all event bus subscriptions

​
Complete Example

import Editor, { EditorMode, PageMode } from 'canvas-editor'
import type { IEditorData, IEditorOption } from 'canvas-editor'

// Prepare container
const container = document.querySelector<HTMLDivElement>('#editor')

// Define initial data
const data: IEditorData = {
  main: [
    {
      value: 'Welcome to Canvas Editor',
      size: 24,
      bold: true
    },
    {
      value: '\n'
    },
    {
      value: 'Start typing your content here...'
    }
  ]
}

// Configure editor
const options: IEditorOption = {
  mode: EditorMode.EDIT,
  pageMode: PageMode.PAGING,
  defaultFont: 'Arial',
  defaultSize: 16,
  margins: [100, 120, 100, 120]
}

// Create editor instance
const editor = new Editor(container, data, options)

// Set up event listeners
editor.eventBus.on('contentChange', () => {
  console.log('Content changed')
})

// Execute commands
editor.command.executeBold()

// Get current value
const currentData = editor.command.getValue()

// Clean up when done
window.addEventListener('beforeunload', () => {
  editor.destroy()
})

​
FAQ

Yes, you can create multiple independent editor instances, each with their own container:
const editor1 = new Editor(container1, data1)
const editor2 = new Editor(container2, data2)
Each instance manages its own state and operates independently.
The editor will continue to listen for events and hold references in memory, potentially causing memory leaks in single-page applications. Always call destroy() when removing an editor instance.
Yes, use the executeUpdateOptions() command:
editor.command.executeUpdateOptions({
  defaultSize: 18,
  defaultColor: '#333'
})
Note: Some options like width, height, mode, and pageMode cannot be updated after initialization.
Use the executeMode() command:
import { EditorMode } from 'canvas-editor'

editor.command.executeMode(EditorMode.READONLY)
editor.command.executeMode(EditorMode.EDIT)

​
Next Steps

Elements

Learn about the element data structure

Commands

Explore available commands

Event System

Subscribe to editor events

API Reference

Complete API documentation

Build docs developers (and LLMs) love

Get started for freeTalk to us