## 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('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 }) => { ... }); ``` ## Methods * [add][2] * [get][3] * [getAll][4] * [extend][5] * [has][6] * [run][7] * [stop][8] * [isActive][9] * [getActive][10] ## add Add new command to the collection ### Parameters * `id` **[string][11]** Command's ID * `command` **([Object][12] | [Function][13])** 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][11]** Command's ID ### Examples ```javascript var myCommand = commands.get('myCommand'); myCommand.run(); ``` Returns **[Object][12]** Object representing the command ## extend Extend the command. The command to extend should be defined as an object ### Parameters * `id` **[string][11]** Command's ID * `cmd` **CommandObject** (optional, default `{}`) * `Object` **[Object][12]** with the new command functions ### Examples ```javascript commands.extend('old-command', { someInnerFunction() { // ... } }); ``` Returns **this** ## has Check if command exists ### Parameters * `id` **[string][11]** Command's ID Returns **[Boolean][14]** ## getAll Get an object containing all the commands Returns **[Object][12]** ## run Execute the command ### Parameters * `id` **[String][11]** Command ID * `options` **[Object][12]** 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][11]** Command ID * `options` **[Object][12]** 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][11]** Command id ### Examples ```javascript const cId = 'some-command'; commands.run(cId); commands.isActive(cId); // -> true commands.stop(cId); commands.isActive(cId); // -> false ``` Returns **[Boolean][14]** ## getActive Get all active commands ### Examples ```javascript console.log(commands.getActive()); // -> { someCommand: itsLastReturn, anotherOne: ... }; ``` Returns **[Object][12]** [1]: https://github.com/GrapesJS/grapesjs/blob/master/src/commands/config/config.ts [2]: #add [3]: #get [4]: #getall [5]: #extend [6]: #has [7]: #run [8]: #stop [9]: #isactive [10]: #getactive [11]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String [12]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object [13]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function [14]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean