Commands

You can customize the initial state of the module from the editor initialization, by passing the following Configuration Object

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('command:run', () => { ... });

// Use the API
const commands = editor.Commands;
commands.add(...);

Available Events

command:run Triggered on run of any command.

javascript

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.

javascript

editor.on('command:run:my-command', ({ result, options }) => { ... });

command:run:before:COMMAND-ID Triggered before the command is called.

javascript

editor.on('command:run:before:my-command', ({ options }) => { ... });

command:abort:COMMAND-ID Triggered when the command execution is aborted.

javascript

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.

javascript

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.

javascript

editor.on('command:run:my-command', ({ result, options }) => { ... });

command:stop:before:COMMAND-ID Triggered before the command is called to stop.

javascript

editor.on('command:stop:before:my-command', ({ options }) => { ... });

command:call Triggered on run or stop of a command.

javascript

editor.on('command:call', ({ id, result, options, type }) => {
 console.log('Command id', id, 'command result', result, 'call type', type);
});

command:call:COMMAND-ID Triggered on run or stop of a specific command.

javascript

editor.on('command:call:my-command', ({ result, options, type }) => { ... });

CommandEventOptions

add

Add new command to the collection

Parameters

id string Command's ID
command (Object | Function) Object representing your command, By passing just a function it's intended as a stateless command (just like passing an object with only run method).

Examples

javascript

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 Command's ID

Examples

javascript

var myCommand = commands.get('myCommand');
myCommand.run();

Returns Object Object representing the command

extend

Extend the command. The command to extend should be defined as an object

Parameters

id string Command's ID
cmd CommandObject (optional, default {})
Object Object with the new command functions

Examples

javascript

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

Returns this

has

Check if command exists

Parameters

id string Command's ID

Returns Boolean

getAll

Get an object containing all the commands

Returns Object

run

Execute the command

Parameters

id String Command ID
options Object Options (optional, default {})

Examples

javascript

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

Returns any The return is defined by the command

stop

Stop the command

Parameters

id String Command ID
options Object Options (optional, default {})

Examples

javascript

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 Command id

Examples

javascript

const cId = 'some-command';
commands.run(cId);
commands.isActive(cId);
// -> true
commands.stop(cId);
commands.isActive(cId);
// -> false

Returns Boolean

getActive

Get all active commands

Examples

javascript

console.log(commands.getActive());
// -> { someCommand: itsLastReturn, anotherOne: ... };

Returns Object