Toolbar

getElement #

Access to the Dom of the toolbar element.

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

disable #

Arguments

name (optional)

String

Disables all button on the toolbar.

this.app.toolbar.disable();

Disables the specified button.

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

enable #

Arguments

name (optional)

String

Enables all button on the toolbar.

this.app.toolbar.enable();

Enables the specified button if it was disabled.

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

setToggled #

Arguments

name

String

Sets the toggle state to the button.

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

unsetToggled #

Arguments

name

String

Removes the toggle state from the button.

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

setActive #

Arguments

name

String

Sets the active state to the button.

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

unsetActive #

Arguments

name

String

Removes the active state from the button.

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

add #

Arguments

name	String
button	Object

Adds a button to the toolbar.

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

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'],
    css: '/your-article-dist-path/'
});

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.

isSticky #

Checks if the toolbar is sticked.

var is = this.app.toolbar.isSticky();