grapesjs/docs/api/commands.md

Commands

• add
• get
• has

You can init the editor with all necessary commands via configuration

var editor = grapesjs.init({
	...
 commands: {...} // Check below for the properties
	...
});

Before using methods you should get first the module from the editor instance, in this way:

var commands = editor.Commands;

Parameters

• config Object Configurations
  • config.defaults Array<Object> Array of possible commands (optional, default [])

Examples

...
commands: {
	defaults: [{
		id: 'helloWorld',
		run:  function(editor, sender){
			alert('Hello world!');
		},
		stop:  function(editor, sender){
			alert('Stop!');
		},
	}],
},
...

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

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

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

Returns Object Object representing the command

has

Check if command exists

Parameters

• id string Command's ID

Returns Boolean