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 

IDCommands includedAppearance
undoundo, redo
insertinsert
stylestyle
emphasisbold, italic, underline
alignalignment
listindent
ul, ol, indent, outdent, blockquote
formatfont-menu, removeformat
toolsfind, accessibility, fullscreen, usersettings
language
language, ltrdir, rtldir

Command IDs

IDFunction DescriptionAppearance
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-sizeShows the font-size widget.
font-colorShows the font-color widget.
removeformat
Remove formatting from selection.
find
Toggle inline find and replace dialog
accessibilityAccessibility 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 IDspecial label valueEnglish ARIA label
undogroup.undoUndo and Redo group
insertgroup.insertInsert group
stylegroup.styleStyles group
emphasisgroup.emphasisFormatting group
aligngroup.alignAlignment group
listindentgroup.listindentList and Indent group
formatgroup.formatFont group
toolsgroup.toolsTools group
languagegroup.languageLanguage group

Menu labels

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

Command IDspecial label valueEnglish ARIA label
insertmenu.insertInsert Menu
font-menumenu.fontFont 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);

 


Attachments:

tools.png (image/png)
find.png (image/png)
borderWidth.png (image/png)
borderColor.png (image/png)
backgroundColor.png (image/png)
specialchar.png (image/png)
mediaembed.png (image/png)
hr.png (image/png)
wordcount.png (image/png)
font-color.png (image/png)
font-size.png (image/png)
font-face.png (image/png)
subscript.png (image/png)
superscript.png (image/png)
rtldir.png (image/png)
Screen Shot 2015-03-25 at 10.02.26 AM.png (image/png)
ltrdir.png (image/png)
language item.png (image/png)
language group.png (image/png)
image2014-8-26 16:11:36.png (image/png)
image2014-8-26 16:11:21.png (image/png)
image2014-8-26 16:11:5.png (image/png)
image2014-8-26 16:10:50.png (image/png)
image2014-8-26 16:10:26.png (image/png)
image2014-8-26 16:10:9.png (image/png)
image2014-8-26 16:9:54.png (image/png)
image2014-8-26 16:9:47.png (image/png)
image2014-8-26 16:9:18.png (image/png)
image2014-8-26 15:57:4.png (image/png)
image2014-8-26 15:56:46.png (image/png)
image2014-8-26 15:56:33.png (image/png)
image2014-8-26 15:56:21.png (image/png)
image2014-8-26 15:56:9.png (image/png)
image2014-8-26 15:55:50.png (image/png)
image2014-8-26 15:55:37.png (image/png)
image2014-8-26 15:55:26.png (image/png)
image2014-8-26 15:55:12.png (image/png)
image2014-8-26 15:55:3.png (image/png)
image2014-8-26 15:54:53.png (image/png)
image2014-8-26 15:54:41.png (image/png)
image2014-8-26 15:54:21.png (image/png)
image2014-8-26 15:54:11.png (image/png)
image2014-8-26 15:53:57.png (image/png)
image2014-8-26 15:53:39.png (image/png)
image2014-8-26 15:53:28.png (image/png)
image2014-8-26 15:53:14.png (image/png)
image2014-8-26 15:52:50.png (image/png)
image2014-8-26 15:52:37.png (image/png)
toolsgroup.png (image/png)
accessibilityIcon.png (image/png)
crop.png (image/png)
rotateleft.png (image/png)
rotateright.png (image/png)
fliphorizontal.png (image/png)
flipvertical.png (image/png)
insertmenu.jpg (image/jpeg)
cellverticalalignment.jpg (image/jpeg)
insertbookmark.jpg (image/jpeg)
insert-group.png (image/png)
language-group.png (image/png)
font-menu.png (image/png)
font-color-2.4.png (image/png)