# 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
run:{commandName}
- Triggered when some command is called to run (eg. editor.runCommand('preview'))stop:{commandName}
- Triggered when some command is called to stop (eg. editor.stopCommand('preview'))run:{commandName}:before
- Triggered before the command is calledstop:{commandName}:before
- Triggered before the command is called to stopabort:{commandName}
- Triggered when the command execution is aborted (editor.on(
run:preview:before, opts => opts.abort = 1);
)run
- Triggered on run of any command. The id and the result are passed as arguments to the callbackstop
- Triggered on stop of any command. The id and the result are passed as arguments to the callback
# 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
(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)