Centralized command execution system providing access to all editor operations including text formatting, block structure manipulation, media insertion, and content management.
Execute any available editor command with optional parameters.
/**
* Executes a command by name with optional parameters
* @param commandName - Name of the command to execute
* @param commandParams - Optional parameters for the command
* @returns Command execution result (varies by command)
*/
execute<TName extends string>(commandName: TName, ...commandParams: any[]): unknown;Usage Examples:
// Text formatting commands
editor.execute('bold'); // Toggle bold
editor.execute('italic'); // Toggle italic
editor.execute('strikethrough'); // Toggle strikethrough
editor.execute('superscript'); // Toggle superscript
editor.execute('subscript'); // Toggle subscript
editor.execute('code'); // Toggle inline code
// Block formatting commands
editor.execute('paragraph'); // Convert to paragraph
editor.execute('heading', { value: 'heading1' }); // Apply heading 1
editor.execute('heading', { value: 'heading2' }); // Apply heading 2
editor.execute('blockQuote'); // Toggle block quote
// List commands
editor.execute('bulletedList'); // Toggle bulleted list
editor.execute('numberedList'); // Toggle numbered list
editor.execute('todoList'); // Toggle to-do list
editor.execute('indent'); // Increase indent
editor.execute('outdent'); // Decrease indent
// Link commands
editor.execute('link', 'https://example.com'); // Create/edit link
editor.execute('unlink'); // Remove link
// Image commands
editor.execute('uploadImage', { file: imageFile });
editor.execute('insertImage', { source: 'https://example.com/image.jpg' });
editor.execute('imageTextAlternative', 'Alt text');
editor.execute('toggleImageCaption');
// Table commands
editor.execute('insertTable', { rows: 3, columns: 4 });
editor.execute('insertTableRowAbove');
editor.execute('insertTableRowBelow');
editor.execute('insertTableColumnLeft');
editor.execute('insertTableColumnRight');
editor.execute('removeTableRow');
editor.execute('removeTableColumn');
editor.execute('mergeTableCells');
// General commands
editor.execute('undo'); // Undo last action
editor.execute('redo'); // Redo last action
editor.execute('selectAll'); // Select all contentGet command instances for detailed control and state monitoring.
/**
* Collection of all available commands
*/
readonly commands: CommandCollection;
interface CommandCollection {
/**
* Get command instance by name
*/
get<TName extends string>(commandName: TName): Command | undefined;
/**
* Check if command exists
*/
has(commandName: string): boolean;
/**
* Execute command with parameters
*/
execute<TName extends string>(commandName: TName, ...commandParams: any[]): unknown;
/**
* Destroy all commands
*/
destroy(): void;
}
interface Command {
/**
* Current command value (varies by command type)
*/
readonly value: unknown;
/**
* Whether the command can be executed
*/
readonly isEnabled: boolean;
/**
* Execute the command
*/
execute(...args: any[]): void;
/**
* Refresh command state
*/
refresh(): void;
/**
* Destroy the command
*/
destroy(): void;
}Usage Examples:
// Get specific commands
const boldCommand = editor.commands.get('bold');
const headingCommand = editor.commands.get('heading');
const linkCommand = editor.commands.get('link');
// Check command state
console.log('Bold active:', boldCommand.value); // boolean
console.log('Current heading:', headingCommand.value); // 'heading1', 'heading2', etc.
console.log('Bold enabled:', boldCommand.isEnabled); // boolean
// Monitor command state changes
boldCommand.on('change:value', () => {
console.log('Bold state changed:', boldCommand.value);
});
boldCommand.on('change:isEnabled', () => {
console.log('Bold enabled state changed:', boldCommand.isEnabled);
});
// Execute through command instance
boldCommand.execute();
headingCommand.execute({ value: 'heading2' });Commands for styling text and inline elements.
/**
* Text formatting command values and parameters
*/
interface TextFormattingCommands {
'bold': {
value: boolean;
execute(): void;
};
'italic': {
value: boolean;
execute(): void;
};
'strikethrough': {
value: boolean;
execute(): void;
};
'superscript': {
value: boolean;
execute(): void;
};
'subscript': {
value: boolean;
execute(): void;
};
'code': {
value: boolean;
execute(): void;
};
}Usage Examples:
// Check current formatting
const boldCommand = editor.commands.get('bold');
if (boldCommand.value) {
console.log('Text is currently bold');
}
// Toggle formatting
editor.execute('bold');
editor.execute('italic');
// Apply multiple formats
editor.execute('bold');
editor.execute('italic');
// Text will now be bold and italicCommands for manipulating block-level elements.
/**
* Block structure command parameters
*/
interface BlockCommands {
'heading': {
value: 'paragraph' | 'heading1' | 'heading2' | 'heading3' | 'heading4' | 'heading5' | 'heading6';
execute(options: { value: string }): void;
};
'paragraph': {
value: boolean;
execute(): void;
};
'blockQuote': {
value: boolean;
execute(): void;
};
}Usage Examples:
// Apply different headings
editor.execute('heading', { value: 'heading1' });
editor.execute('heading', { value: 'heading2' });
editor.execute('heading', { value: 'heading3' });
// Convert to paragraph
editor.execute('paragraph');
// Toggle blockquote
editor.execute('blockQuote');
// Check current block type
const headingCommand = editor.commands.get('heading');
console.log('Current block type:', headingCommand.value);Commands for creating and managing lists.
/**
* List command parameters
*/
interface ListCommands {
'bulletedList': {
value: boolean;
execute(): void;
};
'numberedList': {
value: boolean;
execute(): void;
};
'todoList': {
value: boolean;
execute(): void;
};
'indent': {
value: boolean;
execute(): void;
};
'outdent': {
value: boolean;
execute(): void;
};
}Usage Examples:
// Create different list types
editor.execute('bulletedList'); // • Bullet points
editor.execute('numberedList'); // 1. Numbered list
editor.execute('todoList'); // ☐ To-do items
// Manage list indentation
editor.execute('indent'); // Increase level
editor.execute('outdent'); // Decrease level
// Check if in list
const bulletListCommand = editor.commands.get('bulletedList');
if (bulletListCommand.value) {
console.log('Currently in bulleted list');
}Commands for handling images, videos, and other media.
/**
* Media command parameters
*/
interface MediaCommands {
'uploadImage': {
execute(options: { file: File }): void;
};
'insertImage': {
execute(options: { source: string | string[] }): void;
};
'imageTextAlternative': {
value: string;
execute(newValue: string): void;
};
'toggleImageCaption': {
value: boolean;
execute(): void;
};
'mediaEmbed': {
execute(url: string): void;
};
}Usage Examples:
// Upload image from file
const fileInput = document.querySelector('input[type="file"]');
fileInput.addEventListener('change', (event) => {
const file = event.target.files[0];
if (file && file.type.startsWith('image/')) {
editor.execute('uploadImage', { file });
}
});
// Insert image from URL
editor.execute('insertImage', {
source: 'https://example.com/image.jpg'
});
// Insert multiple images
editor.execute('insertImage', {
source: [
'https://example.com/image1.jpg',
'https://example.com/image2.jpg'
]
});
// Set image alt text
editor.execute('imageTextAlternative', 'Description of the image');
// Toggle image caption
editor.execute('toggleImageCaption');
// Embed media (YouTube, Vimeo, etc.)
editor.execute('mediaEmbed', 'https://www.youtube.com/watch?v=dQw4w9WgXcQ');Commands for creating and manipulating tables.
/**
* Table command parameters
*/
interface TableCommands {
'insertTable': {
execute(options: { rows: number; columns: number }): void;
};
'insertTableRowAbove': {
execute(): void;
};
'insertTableRowBelow': {
execute(): void;
};
'insertTableColumnLeft': {
execute(): void;
};
'insertTableColumnRight': {
execute(): void;
};
'removeTableRow': {
execute(): void;
};
'removeTableColumn': {
execute(): void;
};
'mergeTableCells': {
execute(): void;
};
'splitTableCellVertically': {
execute(): void;
};
'splitTableCellHorizontally': {
execute(): void;
};
}Usage Examples:
// Create table
editor.execute('insertTable', { rows: 3, columns: 4 });
// Add rows
editor.execute('insertTableRowAbove');
editor.execute('insertTableRowBelow');
// Add columns
editor.execute('insertTableColumnLeft');
editor.execute('insertTableColumnRight');
// Remove rows/columns
editor.execute('removeTableRow');
editor.execute('removeTableColumn');
// Merge and split cells
editor.execute('mergeTableCells');
editor.execute('splitTableCellVertically');
editor.execute('splitTableCellHorizontally');Commands for editor history and content selection.
/**
* Navigation and history commands
*/
interface NavigationCommands {
'undo': {
execute(): void;
};
'redo': {
execute(): void;
};
'selectAll': {
execute(): void;
};
}Usage Examples:
// History navigation
editor.execute('undo'); // Undo last change
editor.execute('redo'); // Redo last undone change
// Content selection
editor.execute('selectAll'); // Select all editor content
// Check if undo/redo available
const undoCommand = editor.commands.get('undo');
const redoCommand = editor.commands.get('redo');
console.log('Can undo:', undoCommand.isEnabled);
console.log('Can redo:', redoCommand.isEnabled);Monitor command execution and state changes.
/**
* Command-related events
*/
interface CommandEvents {
'execute': (evt: EventInfo, data: { commandName: string, commandArgs: any[] }) => void;
'change:value': (evt: EventInfo, propertyName: string, newValue: any, oldValue: any) => void;
'change:isEnabled': (evt: EventInfo, propertyName: string, newValue: boolean, oldValue: boolean) => void;
}Usage Examples:
// Listen for any command execution
editor.on('execute', (evt, data) => {
console.log(`Command executed: ${data.commandName}`, data.commandArgs);
});
// Listen for specific command changes
const boldCommand = editor.commands.get('bold');
boldCommand.on('change:value', (evt, propertyName, newValue, oldValue) => {
console.log(`Bold changed from ${oldValue} to ${newValue}`);
});
// Track command availability
boldCommand.on('change:isEnabled', (evt, propertyName, newValue) => {
const button = document.querySelector('.bold-button');
button.disabled = !newValue;
});