grapesjs/docs/modules/Commands.md

title
Commands

Commands

A basic command in GrapesJS it's a simple function, but you will see in this guide how powerfull they can be. The main goal of the Command module is to centralize functions and be easily reused across the editor. Another big advantage of using commands is the ability to track them, extend or even interrupt beside some conditions.

::: warning This guide is referring to GrapesJS v0.14.59 or higher :::

toc

Basic configuration

You can create your commands already from the initialization by passing them in the commands.defaults options:

const editor = grapesjs.init({
  ...
  commands: {
    defaults: [
      {
        // id and run are mandatory in this case
        id: 'my-command-id',
        run() {
          alert('This is my command');
        },
      }, {
        id: '...',
        // ...
      }
    ],
  }
});

For all other available options check directly the configuration source file.

Most commonly commands are created dynamicly post initialization, in that case you'll need to use the Commands API (eg. this is what you need if you create a plugin)

const commands = editor.Commands;
commands.add('my-command-id', editor => {
  alert('This is my command');
});

// or it would be the same...
commands.add('my-command-id', {
  run(editor) {
    alert('This is my command');
  },
});

As you see the definiton is quite easy, you just add an ID and the callback function. The Editor instance is passed as the first argument to the callback so you can access any other module or API method.

Now if you want to call that command you should just run this

editor.runCommand('my-command-id');

You could also pass options if you need

editor.runCommand('my-command-id', { some: 'option' });

Then you can get the same object as a third argument of the callback.

commands.add('my-command-id', (editor, sender, options = {}) => {
  alert(`This is my command ${options.some}`);
});

The second argument, sender, just indicates who requested the command, in our case will be always the editor

Until now there is nothing exiting except a common entry point for functions, but we'll see later its real advantages.

Default commands

GrapesJS comes along with some default set of commands and you can get a list of all currently availlable commands via editor.Commands.getAll(). This will give you an object of all available commands, so, for example, also those added via plugins. You can recognize default commands by their namespace core:*, we also recommend to use namepsaces in your own custom commands, but let's get a look more in detail here:

• core:canvas-clear - Clear all the content from the canvas (HTML and CSS)

• core:component-delete - Delete a component
• core:component-enter - Select the first children component of the selected one
• core:component-exit - Select the parent component of the current selected one
• core:component-next - Select the next sibling component
• core:component-prev - Select the previous sibling component
• core:copy - Copy the current selected component
• core:paste - Paste copied component
• core:preview - Show the preview of the template in canvas
• core:fullscreen - Set the editor fullscreen
• core:undo - Call undo operation
• core:redo - Call redo operation

export-template move-comp my-command-id open-assets open-blocks: open-layers: open-sm open-tm select-comp select-parent show-offset sw-visibility tlb-clone tlb-delete tlb-move

Statefull commands

Events