Textbox.io 2.x Documentation : Command Item IDs

Built-in editor commands are represented by a string ID in Textbox.io toolbar configurations. The following built-in command item IDs are available for use in any Textbox.io instance. Adding a command via its ID to a menu structure adds that feature to the toolbar or menu.

New in 2.4

In release 2.4 special labels were added to aid in creating groups and menus very similar to the default, for example to recreate a default group without one of the items. These labels can be used to leverage the Textbox.io translations for both tooltips and ARIA labels.

These labels are documented below.

Group IDs

ID	Commands included	Appearance
`undo`	`undo, redo`
`insert`	insert
`style`	`style`
`emphasis`	`bold, italic, underline`
`align`	`alignment`
`listindent`	ul, ol, indent, outdent, blockquote
`format`	`font-menu, removeformat`
`tools`	`find, accessibility, fullscreen, usersettings`
language	language, ltrdir, rtldir

Command IDs

ID	Function Description	Appearance
undo	Trigger undo.
redo	Trigger re-do.
insert	Default insert menu. Included commands: `link, bookmark, fileupload, table, media, hr, specialchar`
link	Open link insertion dialog.
bookmark	Insert bookmark.
fileupload	Open file/image upload dialog.
table	Open table insertion menu.
specialchar	Open special character chooser dialog.
media	Open media embed insertion dialog.
hr	Insert horizontal rule.
styles	Open style menu. The list can be configured with the styles configuration option.
bold	Apply bold to selection.
italic	Apply italic to selection.
underline	Apply underline to selection.
strikethrough	Apply strikethrough to selection.
superscript	Apply superscript to selection.
subscript	Apply subscript to selection.
alignment	Open modify element alignment menu.
ul	Change selection to un-ordered list.
ol	Change selection to ordered list.
indent	Add indent to selection.
outdent	Remove indent from selection.
blockquote	Apply blockquote to selection.
font-menu	Default font transformation menu. Included commands: `font-face, font-size, font-color, superscript, subscript, strikethrough`
`font-face`	Select the font-face value from a list. The list can be configured with the fonts configuration option.
`font-size`	Shows the font-size widget.
`font-color`	Shows the font-color widget.
removeformat	Remove formatting from selection.
find	Toggle inline find and replace dialog
`accessibility`	Accessibility checker
fullscreen	Toggle full-screen mode.
wordcount	Open word count dialog.
usersettings	Open user settings menu. Included commands: `wordcount` feature toggles such as spelling and capitalisation help
language	Open the language application menu. The list can be changed with the languages configuration option.
ltrdir	Toggle left to right text direction.
rtldir	Toggle right to left text direction.

Context Features

These items are currently appended to the end of the toolbar. These features are not directly configurable but they can be disabled in the toolbar configuration.

Table Toolbar

The features for table cell styling appear when one or more table cells are selected:

Cell Background Color
Cell Border Color
Cell Border Width
Cell Vertical Alignment

Image Editing Toolbar

The features for image editing appear when an image (and only an image) is selected:

Crop Image
Rotate Left 90°
Rotate Right 90°
Horizontal Flip
Vertical Flip

Translated labels

To aid with the creation of custom menus and toolbar groups, the editor translations can be leveraged through special labels. English is shown here as an example but the appropriate language for the editor UI will be used.

Group labels

For each Group ID, "group." is prepended to the name.

Group ID	special label value	English ARIA label
`undo`	`group.undo`	Undo and Redo group
`insert`	`group.insert`	Insert group
`style`	`group.style`	Styles group
`emphasis`	`group.emphasis`	Formatting group
`align`	`group.align`	Alignment group
`listindent`	`group.listindent`	List and Indent group
`format`	`group.format`	Font group
`tools`	`group.tools`	Tools group
`language`	`group.language`	Language group

Menu labels

The two menus on the default toolbar that contain configurable items also have translations available.

Command ID	special label value	English ARIA label
`insert`	`menu.insert`	Insert Menu
`font-menu`	`menu.font`	Font Menu

Example Configuration

In this example, a simple configuration object is created that specifies a custom toolbar using built-in command ids for an editor created by replace. It uses translated labels to create an experience matching the default undo group and insert menu but with a shorter menu.

var configBuiltIn = {
	ui : {
		toolbar : {
			items : [
				{ 
       				label: 'group.undo', 
        			// Built-in Command ids: 'undo', 'redo'
					items: [ 'undo', 'redo' ]    		
      			},
				{ 
        			label: 'group.insert', 
        			items: [
          				{ 
							// Built-in menu id: 'insert'
            				id    : 'insert',			
            				label  : 'menu.insert',
							// Built-in command ids: 'link', 'fileupload', 'table' 
            				items : [ 'link', 'fileupload', 'table' ]		
          				}
        			]
      			}
			] 
		}
	}
};
 
var editor = textboxio.replace('#targetId', configBuiltIn);