Toolbar configuration Guide

Default Configuration

This is the default editor toolbars configuration

var toolbars = {
  add: {
    buttons: ['image', 'camera', 'hline', 'table'],
    tabIndex: 2
  },
  styles: {
    selections: AlloyEditor.Selections,
    tabIndex: 1
  }
};

where AlloyEditor.Selections is

var Selections = [{
  name: 'link',
  buttons: ['linkEdit'],
  test: AlloyEditor.SelectionTest.link
}, {
  name: 'image',
  buttons: ['imageLeft', 'imageRight'],
  test: AlloyEditor.SelectionTest.image
}, {
  name: 'text',
  buttons: ['styles', 'bold', 'italic', 'underline', 'link', 'twitter'],
  test: AlloyEditor.SelectionTest.text
}, {
  name: 'table',
  buttons: ['tableRow', 'tableColumn', 'tableCell', 'tableRemove'],
  getArrowBoxClasses: AlloyEditor.SelectionGetArrowBoxClasses.table,
  setPosition: AlloyEditor.SelectionSetPosition.table,
  test: AlloyEditor.SelectionTest.table
}];

The configuration above represents two toolbars - for adding content (images, code, etc.) and modify content based on the current selection type. You may remove any of those and the toolbar won't be shown when user makes the corresponding selection.

To remove the toolbar for adding content, just remove the property add

var toolbars = {
  styles: {
    selections: AlloyEditor.Selections,
    tabIndex: 1
  }
};

Configuring Buttons

In the default UI, which uses React, some of the buttons accept configuration parameters so you can tailor them to suit your needs.

Here is an example of a custom configuration for the Styles button inside a text selection

var Selections = [{
  name: 'text',
  buttons: [
    {
      name: 'styles',
      cfg: {
          styles: [...]
      }
    },
    'bold', 'italic', 'underline', 'link', 'twitter'
  ],
  test: AlloyEditor.SelectionTest.text
}];

In this case a different array of styles is passed to the Styles button, so they will be shown when user selects a text instead of the default ones.

Reordering Buttons

If you are not happy with the order of the buttons, you can just reorder them in the toolbar configuration. They will follow the order in which you specify them. For example, if you want the table button to appear before the hline button in the Add toolbar, you just need to do the following:

var toolbars = {
    add: {
        buttons: ['table', 'hline', 'image', 'camera'],
        tabIndex: 2
    }
};

If you remove a button from the buttons property of a toolbar, or from the selections in Styles toolbar, then this button won't be available when the toolbar gets visible.