The main EditorJS class provides the primary interface for creating and managing editor instances. It serves as the entry point for all editor functionality.
Creates a new editor instance with optional configuration.
/**
* Creates a new Editor.js instance
* @param configuration - Editor configuration object or holder element ID
*/
constructor(configuration?: EditorConfig | string);Usage Examples:
import EditorJS from '@editorjs/editorjs';
// Basic initialization with element ID
const editor = new EditorJS('editorjs');
// Full configuration
const editor = new EditorJS({
holder: 'editorjs',
autofocus: true,
placeholder: 'Start typing...',
tools: {
paragraph: {
class: ParagraphTool,
inlineToolbar: true
}
},
data: {
blocks: []
},
onReady: () => {
console.log('Editor.js is ready to work!');
},
onChange: (api, event) => {
console.log('Content changed:', event);
}
});Access to editor version information.
/**
* Current version of Editor.js
*/
static readonly version: string;Usage Examples:
console.log('Editor.js version:', EditorJS.version);Key properties available on editor instances.
/**
* Promise that resolves when editor is fully initialized and ready to work
*/
readonly isReady: Promise<void>;Usage Examples:
const editor = new EditorJS({ holder: 'editorjs' });
// Wait for editor to be ready before performing operations
await editor.isReady;
console.log('Editor is ready');
// Or use promise syntax
editor.isReady.then(() => {
console.log('Editor is ready');
});Core methods for saving and loading editor content.
/**
* Saves current editor data as JSON
* @returns Promise resolving to OutputData with blocks array
*/
save(): Promise<OutputData>;
/**
* Renders data from JSON format into editor blocks
* @param data - OutputData object containing blocks to render
*/
render(data: OutputData): Promise<void>;
/**
* Removes all blocks from the editor
*/
clear(): void;Usage Examples:
// Save editor content
const outputData = await editor.save();
console.log('Saved data:', outputData);
// Output: { version: "2.30.8", time: 1625097600000, blocks: [...] }
// Load content into editor
await editor.render({
version: "2.30.8",
time: 1625097600000,
blocks: [
{
type: "paragraph",
data: {
text: "Hello World!"
}
},
{
type: "header",
data: {
text: "Chapter 1",
level: 2
}
}
]
});
// Clear all content
editor.clear();Methods for controlling editor focus state.
/**
* Sets focus to the editor
* @param atEnd - If true, places caret at the end of the last block
* @returns true if focus was successfully set
*/
focus(atEnd?: boolean): boolean;Usage Examples:
// Focus at beginning of editor
editor.focus();
// Focus at end of editor content
editor.focus(true);
// Check if focus was successful
const focused = editor.focus();
if (!focused) {
console.log('Failed to focus editor');
}Methods for subscribing to and managing editor events.
/**
* Subscribe to editor event
* @param eventName - Name of the event to listen for
* @param callback - Function to call when event is triggered
*/
on(eventName: string, callback: (data?: any) => void): void;
/**
* Unsubscribe from editor event
* @param eventName - Name of the event to stop listening for
* @param callback - Function to remove from event listeners
*/
off(eventName: string, callback: (data?: any) => void): void;
/**
* Trigger editor event
* @param eventName - Name of the event to emit
* @param data - Data to pass to event listeners
*/
emit(eventName: string, data: any): void;Usage Examples:
// Subscribe to block added event
const onBlockAdded = (event) => {
console.log('Block added:', event.detail);
};
editor.on('block-added', onBlockAdded);
// Unsubscribe from event
editor.off('block-added', onBlockAdded);
// Emit custom event
editor.emit('custom-event', { message: 'Hello from editor' });
// Listen for common events
editor.on('block-changed', (event) => {
console.log('Block changed:', event);
});
editor.on('block-removed', (event) => {
console.log('Block removed:', event);
});Methods for properly destroying editor instances.
/**
* Destroy editor instance and clean up all resources
* Removes DOM elements, event listeners, and frees memory
*/
destroy(): void;Usage Examples:
// Clean up editor when no longer needed
editor.destroy();
// Typical usage in frameworks
useEffect(() => {
const editor = new EditorJS({ holder: 'editorjs' });
return () => {
// Cleanup on component unmount
editor.destroy();
};
}, []);interface EditorConfig {
holder?: string | HTMLElement;
autofocus?: boolean;
defaultBlock?: string;
initialBlock?: string; // deprecated
placeholder?: string | false;
sanitizer?: SanitizerConfig;
hideToolbar?: boolean;
tools?: {[toolName: string]: ToolConstructable | ToolSettings};
data?: OutputData;
minHeight?: number;
logLevel?: LogLevels;
readOnly?: boolean;
i18n?: I18nConfig;
onReady?(): void;
onChange?(api: API, event: BlockMutationEvent | BlockMutationEvent[]): void;
inlineToolbar?: string[] | boolean;
tunes?: string[];
style?: { nonce?: string };
}
interface OutputData {
version?: string;
time?: number;
blocks: OutputBlockData[];
}
interface OutputBlockData<Type extends string = string, Data extends object = any> {
id?: string;
type: Type;
data: BlockToolData<Data>;
tunes?: {[name: string]: BlockTuneData};
}