The Editor class is the primary entry point for Canvas Editor. It manages the document, rendering, and provides access to the command API.
Constructor
new Editor(
container: HTMLDivElement,
data: IEditorData | IElement[],
options?: IEditorOption
)
Parameters
The HTML div element that will host the editor
data
IEditorData | IElement[]
required
Initial document data. Can be either:
- An
IEditorData object with header, main, and footer sections
- An array of
IElement objects for the main content only
Properties
command
Access to all editor commands for manipulating content, formatting, and document operations.
See Commands for available methods.
listener
Callback-based event system for responding to editor changes.
See Listener for available listeners.
eventBus
eventBus: EventBus<EventBusMap>
version
The current version of the Canvas Editor library.
register
API for registering custom context menus, shortcuts, and internationalization.
override
API for overriding internal editor behaviors.
use
Method for loading editor plugins.
destroy
Cleans up the editor instance and removes all event listeners.
Basic Usage
import Editor from '@hufe921/canvas-editor'
const container = document.querySelector('#editor')
const data = {
main: [
{ value: 'Hello ' },
{ value: 'World', bold: true }
]
}
const editor = new Editor(container, data, {
defaultFont: 'Arial',
defaultSize: 16
})
With Full Document Structure
const data = {
header: [
{ value: 'Document Header', size: 20 }
],
main: [
{ value: 'Main content goes here' }
],
footer: [
{ value: 'Page ', size: 12 },
{ value: '1', size: 12 }
]
}
const editor = new Editor(container, data)
Accessing Commands
// Format text as bold
editor.command.executeBold()
// Set font size
editor.command.executeSize(18)
// Insert a table
editor.command.executeInsertTable({ row: 3, col: 3 })
// Get document value
const value = editor.command.getValue()
Listening to Events
// Using listener callbacks
editor.listener.rangeStyleChange = (payload) => {
console.log('Selection style:', payload)
}
// Using eventBus
editor.eventBus.on('contentChange', () => {
console.log('Content changed')
})
Cleanup
// Destroy editor when done
editor.destroy()
TypeScript Support
Canvas Editor is fully typed. Import types as needed:
import Editor, {
IEditorData,
IEditorOption,
IElement,
ElementType
} from '@hufe921/canvas-editor'