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 called
• stop:{commandName}:before - Triggered before the command is called to stop
• abort:{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 callback
• stop - Triggered on stop of any command. The id and the result are passed as arguments to the callback

Methods

• add
• get
• getAll
• extend
• has
• run
• stop
• isActive
• getActive

add

Add new command to the collection

Parameters

• id string (opens new window) Command's ID
• command (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 only run 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 ID
• cmd (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 ID
• options 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 ID
• options 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)