Documentation
Button
add
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="fa 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' }
component
Adds a button only for specific components.
this.app.toolbar.add('mybutton', {
title: 'My Button',
icon: '<i class="fa fa-file-alt"></i>',
command: 'myplugin.toggle',
components: 'editable'
});
- all
- for all block, by default
- editable
- for editable blocks only
- array of component
- for specified components only, for example
['heading', 'text']
- for specified components only, for example
except
Adds a button to components except specified in the array.
this.app.toolbar.add('mybutton', {
title: 'My Button',
icon: '<i class="fa fa-file-alt"></i>',
command: 'myplugin.toggle',
components: 'editable',
except: ['heading']
});
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="fa 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="fa 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 on a specific condition when clicking on a block, then the method should return false
, in other cases it is necessary to return the button object.
(function() {
Revolvapp.add('plugin', 'myplugin', {
start: function() {
this.app.toolbar.add('mybutton', {
title: 'My Button',
icon: '<i class="fa fa-file-alt"></i>',
command: 'myplugin.toggle',
observer: 'myplugin.observe'
});
},
observe: function(button, name) {
if (somethings) {
return false;
}
return button;
},
toggle: function(button) {
// do something
}
});
})(Revolvapp);
command
Calls the specified method when the button is clicked.
Passes the following arguments:
button
— button instancename
— name of the buttone
— button click event object
You can get a value from the argument object, like this:
mymethod: function(button, name, e) {
// do something
}