Documentation

Toolbar

$toolbar #

Access to the Dom of the toolbar element.

var $nodes = this.app.toolbar.$toolbar.find('a');

disable #

Arguments
name String

Disables the specified button.

this.app.toolbar.disable('mybutton');

disableAll #

Disables all button on the toolbar.

this.app.toolbar.disableAll();

enable #

Arguments
name String

Enables the specified button if it was disabled.

this.app.toolbar.enable('mybutton');

enableAll #

Enables all button on the toolbar.

this.app.toolbar.enableAll();

set #

Arguments
name String

Sets the active state to the button.

this.app.toolbar.set('mybutton');

unset #

Arguments
name String

Removes the active state from the button.

this.app.toolbar.unset('mybutton');

get #

Arguments
name String

Gets the specified button from the toolbar.

var $button = this.app.toolbar.get('format');

add #

Arguments
name String
button Object

Adds a button to the toolbar.

(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'
            });
        },
        toggle: function(args) {
            // do something
        }
    });
})(ArticleEditor);

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

Now call the editor with the plugin created:

ArticleEditor('#entry', {
    plugins: ['myplugin']
});

The button should appear on the toolbar when you click on any block and when it pressed, will call the plugin's toggle method.

See more about the parameters of the buttons.

addTo #

Arguments
toolbar String
name of button String
button Object

Adds a button to the addbar or to the editor's toolbar.

(function() {
    ArticleEditor.add('plugin', 'myplugin', {
        start: function() {
            this.app.toolbar.addTo('addbar', 'mybutton', {
                title: 'My Button',
                icon: '<i class="far fa-file-alt"></i>',
                command: 'myplugin.toggle'
            });
        },
        toggle: function(args) {
            // do something
        }
    });
})(ArticleEditor);

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

Now call the editor with the plugin created:

ArticleEditor('#entry', {
    plugins: ['myplugin']
});

The button should appear in the addbar popup when you click on any block and when press the plus icon to show the addbar. The button click will call the plugin's toggle method.

To add a button to the editor's toolbar just set editor as the first argument:

this.app.toolbar.addTo('editor', 'mybutton', obj);

See more about the parameters of the buttons.

change #

Arguments
name String
button Object

Changes the button object.

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