# 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

# 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

# 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

# Examples

commands.extend('old-command', {
 someInnerFunction() {
 // ...
 }
});

Returns this

# has

Check if command exists

# Parameters

Returns Boolean (opens new window)

# getAll

Get an object containing all the commands

Returns Object (opens new window)

# run

Execute the command

# Parameters

# Examples

commands.run('myCommand', { someOption: 1 });

Returns any The return is defined by the command

# stop

Stop the command

# Parameters

# 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

# 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)