Context toolbar items
These items currently appear at the end of the toolbar. Specific configuration is not available as they may move to a different part of the UI in a future release. They can however be disabled:
In this example, a custom toolbar object with two custom toolbar buttons is created and added to a
configuration object via the
ui toolbar property. This config is then used to create an
|Array||(Default Toolbar)||An array representing the structure of the Textbox.io toolbar and menu system. Each item represents a toolbar group.|
[ 'table-tools','image-tools' ]
|An array listing the items that can appear depending on the selection context|
|Boolean||true||Inline editing only. Whether the toolbar should be visible in the UI at all.|
Inline editing only. Whether the editor should be draggable from its offset position.
|Position||top: 0, left: 0|
Inline editing only. The offset coordinates of the toolbar from the top-left vertex of the container being edited.
|Boolean||the same value as ui.autoresize|
Iframe editing only. Whether the toolbar should stick to the top of the window as it scrolls, similar to Inline editing behaviour.
This option was introduced in Textbox.io release 2.4.1
Toolbars are made up of item objects. Items represent either editor commands (apply bold), toolbar groups, or menus.
Items infer their UI from their position in an the items array. An item placed inside a menu will be rendered as a menu item, while an item placed inside a toolbar group will be rendered as a button. Similarly, a menu item placed within a menu will result in a sub-menu.
Items have 3 distinct types, representing ui constructs in a Textbox.io editor.
command items represent discrete editor functionality.
menu items represent a nested group of commands invoked from a root UI element.
group items represent logical groupings of
commands either inside the toolbar or within menus.
Command type items represent discrete editor commands, such as: apply bold, insert link, etc.
Note that built-in command items are referenced by their string id rather than specified as objects.
Menu type items represent groupings of commands in a menu. When rendered, menus appear on the host toolbar as an icon, or on a host menu via an icon followed by the menu's name.
For users of assistive devices, the name of the menu is applied to menu's aria-label per WAI-ARIA.
Group type items represent logical groupings of commands on a toolbar or within a menu. When an editor is rendered groups are designated by visual separators.
For users of assistive devices, the name of the group is applied to group's aria-label per WAI-ARIA.
Built-In Command Item IDs
Built-in editor commands are represented by a predefined string id in toolbar configurations. For a list of built-in editor command ids see: Command Item IDs.