# Commands
You can customize the initial state of the module from the editor initialization, by passing the following Configuration Object (opens new window)
const editor = grapesjs.init({
commands: {
// options
}
})
Once the editor is instantiated you can use its API and listen to its events. Before using these methods, you should get the module from the instance.
// Listen to events
editor.on('run', () => { ... });
// Use the API
const commands = editor.Commands;
commands.add(...);
# Available Events
command:run
Triggered on run of any command.
editor.on('command:run', ({ id, result, options }) => {
console.log('Command id', id, 'command result', result);
});
command:run:COMMAND\_ID
Triggered on run of a specific command.
editor.on('command:run:my-command', ({ result, options }) => { ... });
command:run:before:COMMAND\_ID
Triggered before the command is called.
editor.on('command:run:before:my-command', ({ options }) => { ... });
command:abort:COMMAND\_ID
Triggered when the command execution is aborted.
editor.on('command:abort:my-command', ({ options }) => { ... });
// The command could be aborted during the before event
editor.on('command:run:before:my-command', ({ options }) => {
if (someCondition) {
options.abort = true;
}
});
command:stop
Triggered on stop of any command.
editor.on('command:stop', ({ id, result, options }) => {
console.log('Command id', id, 'command result', result);
});
command:stop:COMMAND\_ID
Triggered on stop of a specific command.
editor.on('command:run:my-command', ({ result, options }) => { ... });
command:stop:before:COMMAND\_ID
Triggered before the command is called to stop.
editor.on('command:stop:before:my-command', ({ options }) => { ... });
# Methods
# add
Add new command to the collection
# Parameters
id
string (opens new window) Command's IDcommand
(Object (opens new window) | Function (opens new window)) Object representing your command, By passing just a function it's intended as a stateless command (just like passing an object with onlyrun
method).
# Examples
commands.add('myCommand', {
run(editor, sender) {
alert('Hello world!');
},
stop(editor, sender) {
},
});
// As a function
commands.add('myCommand2', editor => { ... });
Returns this
# get
Get command by ID
# Parameters
id
string (opens new window) Command's ID
# Examples
var myCommand = commands.get('myCommand');
myCommand.run();
Returns Object (opens new window) Object representing the command
# extend
Extend the command. The command to extend should be defined as an object
# Parameters
id
string (opens new window) Command's IDcmd
CommandObject (optional, default{}
)Object
Object (opens new window) with the new command functions
# Examples
commands.extend('old-command', {
someInnerFunction() {
// ...
}
});
Returns this
# has
Check if command exists
# Parameters
id
string (opens new window) Command's ID
Returns Boolean (opens new window)
# getAll
Get an object containing all the commands
Returns Object (opens new window)
# run
Execute the command
# Parameters
id
String (opens new window) Command IDoptions
Object (opens new window) Options (optional, default{}
)
# Examples
commands.run('myCommand', { someOption: 1 });
Returns any The return is defined by the command
# stop
Stop the command
# Parameters
id
String (opens new window) Command IDoptions
Object (opens new window) Options (optional, default{}
)
# Examples
commands.stop('myCommand', { someOption: 1 });
Returns any The return is defined by the command
# isActive
Check if the command is active. You activate commands with run
and disable them with stop
. If the command was created without stop
method it can't be registered as active
# Parameters
id
String (opens new window) Command id
# Examples
const cId = 'some-command';
commands.run(cId);
commands.isActive(cId);
// -> true
commands.stop(cId);
commands.isActive(cId);
// -> false
Returns Boolean (opens new window)
# getActive
Get all active commands
# Examples
console.log(commands.getActive());
// -> { someCommand: itsLastReturn, anotherOne: ... };
Returns Object (opens new window)