The items that appear in the editor toolbar, as well as the order in which they appear, can be customized by the Textbox.io API. Additionally, you can define your own custom toolbar commands to extend the functionality of the editor and tailor it to your specific needs.

The stock toolbar configuration

Stock editor toolbar

The editor provides a stock toolbar configuration if one is not explicitly defined. This contains a number of items of core functionality. 

Contextual toolbar items

Stock editor toolbar with contextual items showing

The editor will show extra toolbar items depending on the selection context. These can be disabled in the toolbar configuration.

Defining the toolbar configuration

The items in the toolbar are defined in the editor configuration object. 

Out of the box, Textbox.io contains a number of available toolbar ("Command") items. Each item is referenced by a Command Item ID, and each button you see in the editor has its own Command Item ID-  for example 'bold', 'italic', 'underline'.

Further, there are aliases to groups of functionality in the editor to enable you to quickly add blocks of functionality to the editor. These are outlined in Command Group Aliases.

The following example shows an editor where the toolbar items have been explicitly defined using Command Group Aliases:

Grouping buttons

When customizing the editor, it is often useful to organize toolbar command items into groups of functionality.  Groups provide users with a visual separation in the UI and commands within a group move to the More Drawer as group of items when required.

Visually, toolbar groups appear as a set of items between 2 thin vertical lines:

Groups are defined inline to the toolbar item configuration.

An example of an editor with 2 groups is shown below:

Advanced toolbar customization

Textbox.io also provides the ability to create your own toolbar commands. Read more about this in the Adding custom commands guide.