Skip to main content

Toolbar configuration

The toolbar plays an essential part of the editor. Here the most important functions for the user are placed.

This is configured in two files. The toolbar.js contains the buttons of the actual toolbar, which is always visible. The external_toolbar.js contains the buttons of the menu above the main toolbar.

Button defintions​

Each button consists of a button defintition. The following structure must be used:

{
  extend: 'button:button', // Base button to extend from
  icon: 'fa-icon', // FontAwesome 4 Icons are supported out of the box (https://fontawesome.com/v4/icons/)
  contextSensitive: false, // true to enable/disable the button depending on the context
  tooltip: 'Insert something', // Tooltip of the buttons
  text: 'Chapter', // Text that should be shown in a menu/toolbar
  textMode: 'menu', // Text is hidden in the toolbar, but visible in a menu
  data: { // Additional data
    elementType: 'chapter'
  },
  listeners: {
    scope: editor, // Scope of the listener function
    click: editor.configObj.configData.onMyButtonClick, // Handler for "onClick"
    toggle: editor.configObj.configData.onMyButtonToggle // Handler for "onToggle"
  },
  raw: {} // Additional raw button parameters
}

Alternatively, either predefined buttons can be used directly or tanned from them. Here there are already a lot of buttons, which can be found in the toolbar chapter.

Toolbar​

The toolbar exports the function createToolbarConfig, which takes care of creating the buttons.

module.exports = {
	createToolbarConfig: function(editor) {
		return [
      // Button defintions
    ];
  }
}

External toolbar​

The toolbar exports the function createExternalToolbarConfig, which takes care of creating the menus/buttons.

module.exports = {
	createExternalToolbarConfig: function(editor) {
		return {
			type: 'menu', // or 'ribbon'
			items: [
        {
          text: 'Menu Item Name',
          items: [
            // button definitions
          ]
        }
      ]
    }
  }
}

Type​

The external toolbar has two modes in which it can be used. Here the type can either be set to menu so that each entry represents a separate menu with buttons. Alternatively the type can be set to ribbon. In this case all buttons from toolbar.js are permanently displayed and all buttons from the active ribbon are added behind.