<!-- Generated by documentation.js. Update this documentation by updating the source code. -->

## Commands

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

```js
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.

```js
// 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

## Methods

*   [add][2]
*   [remove][3]
*   [get][4]
*   [getAll][5]
*   [extend][6]
*   [has][7]
*   [run][8]
*   [stop][9]
*   [isActive][10]
*   [getActive][11]

## add

Add new command to the collection

### Parameters

*   `id` **[string][12]** Command's ID
*   `command` **([Object][13] | [Function][14])** 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**&#x20;

## remove

Remove command from the collection

### Parameters

*   `id` **[string][12]** Command's ID

Returns **this**&#x20;

## get

Get command by ID

### Parameters

*   `id` **[string][12]** Command's ID

### Examples

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

Returns **[Object][13]** Object representing the command

## extend

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

### Parameters

*   `id` **[string][12]** Command's ID
*   `cmd` **CommandObjectById\<TId, ObjectAny>**  (optional, default `{}as CommandObjectById<TId,ObjectAny>`)
*   `Object` **[Object][13]** with the new command functions

### Examples

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

Returns **this**&#x20;

## has

Check if command exists

### Parameters

*   `id` **[string][12]** Command's ID

Returns **[Boolean][15]**&#x20;

## getAll

Get an object containing all the commands

Returns **[Object][13]**&#x20;

## run

Execute the command

### Parameters

*   `id` **[String][12]** Command ID
*   `args` **...CommandRunArgs\<TId>**&#x20;
*   `options` **[Object][13]** 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][12]** Command ID
*   `args` **...CommandStopArgs\<TId>**&#x20;
*   `options` **[Object][13]** 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][12]** Command id

### Examples

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

Returns **[Boolean][15]**&#x20;

## getActive

Get all active commands

### Examples

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

Returns **[Object][13]**&#x20;

[1]: https://github.com/GrapesJS/grapesjs/blob/master/src/commands/config/config.ts

[2]: #add

[3]: #remove

[4]: #get

[5]: #getall

[6]: #extend

[7]: #has

[8]: #run

[9]: #stop

[10]: #isactive

[11]: #getactive

[12]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String

[13]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object

[14]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function

[15]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean