Documentation

Button

add #

Arguments
name String
button Object

Adds a button to the toolbar or to the control bar.

this.app.toolbar.add('mybutton', button);
this.app.control.add('mybutton', button);

The button object can contain the parameters described below.

All the examples show the method of adding a button to the toolbar. The button object can have the same parameters to add to the control bar.

In all examples, Font Awesome is used for the button icon. You can add your own HTML and SVG icon.

position #

The position of the button in the toolbar or control bar.

this.app.toolbar.add('mybutton', {
    title: 'My Button',
    icon: '<i class="far fa-file-alt"></i>',
    command: 'myplugin.toggle',
    position: 'first'
});

Add a button to the beginning of the toolbar.

position: 'first'

Add a new button after the specified button.

position: { after: 'buttonname' }

Add a new button before the specified button.

position: { before: 'buttonname' }

blocks #

Adds a button only for specific blocks.

this.app.toolbar.add('mybutton', {
    title: 'My Button',
    icon: '<i class="far fa-file-alt"></i>',
    command: 'myplugin.toggle',
    blocks: 'editable'
});
  • all
    • for all block, by default
  • editable
    • for editable blocks only
  • first-level
    • for first-level blocks only
  • array of blocks
    • for specified blocks only, for example ['paragraph', 'text']

except #

Adds a button to blocks except specified in the array.

this.app.toolbar.add('mybutton', {
    title: 'My Button',
    icon: '<i class="far fa-file-alt"></i>',
    command: 'myplugin.toggle',
    blocks: 'editable',
    except: ['list']
});

title #

The text that will be displayed on the icon. You can use html.

this.app.toolbar.add('mybutton', {
    title: 'My Button',
    icon: '<i class="far fa-file-alt"></i>',
    command: 'myplugin.toggle'
});

icon #

Icon button in HTML or SVG format.

this.app.toolbar.add('mybutton', {
    title: 'My Button',
    icon: '<i class="far fa-file-alt"></i>',
    command: 'myplugin.toggle'
});

observer #

A method that will check whether a button is displayed. If the button does not need to be shown when clicking on a block on a specific condition, then the method should return false, in other cases it is necessary to return the button object.

(function() {
    ArticleEditor.add('plugin', 'myplugin', {
        start: function() {
            this.app.toolbar.add('mybutton', {
                title: 'My Button',
                icon: '<i class="far fa-file-alt"></i>',
                command: 'myplugin.toggle',
                observer: 'myplugin.observe'
            });
        },
        observe: function(button, name) {
            if (somethings) {
                return false;
            }

            return button;
        },
        toggle: function(args) {
            // do something
        }
    });
})(ArticleEditor);

command #

Calls the specified method when the button is clicked.

Pass the object with following values:

  • e — button click event object
  • $element — Dom element of the button
  • params — button parameter object

You get a value from the argument object, like this:

args.params
args.e
args.$el

params #

It is specified as an object and is passed as an argument when the button command is called.

this.app.toolbar.add('mybutton', {
    title: 'My Button',
    icon: '<i class="far fa-file-alt"></i>',
    command: 'myplugin.toggle',
    params: {
        arg1: value1,
        arg2: value2
    }
});