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.
Group IDs
ID | Commands included | Appearance |
---|---|---|
undo | undo, redo | |
insert | link, fileupload, table, media, hr, specialchar | |
style | style | |
emphasis | bold, italic, underline | |
align | alignment | |
listindent | ul, ol, indent, outdent, blockquote | |
format | font-menu, removeformat | |
tools | find, fullscreen, usersettings | |
language | language, ltrdir, rtldir |
Command IDs
ID | Function Description | Icon |
---|---|---|
undo | Trigger undo. | |
redo | Trigger re-do. | |
link | Open link insertion dialog. | |
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. | |
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 | Open font transformation menu (font-face, font-size, font-color, superscript, subscript, strikethrough). | |
font-face | Select the font-face value from a list. | |
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 | |
fullscreen | Toggle full-screen mode. | |
wordcount | Open word count dialog. | |
usersettings | Open user settings menu (word count, toggle features, help, feedback). | |
language | Open the language application menu, apply language to selection. | |
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 as they may move to a different part of the UI in a future release, however they can be disabled in the toolbar configuration.
The features for table cell styling appear when one or more table cells are selected:
Cell Background Color | |
Cell Border Color | |
Cell Border Width |
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
.
var configBuiltIn = { ui : { toolbar : { items : [ { label: 'Undo and Redo group', // Built-in Command ids: 'undo', 'redo' items: [ 'undo', 'redo' ] }, { label: 'Insert group', items: [ { // Built-in menu id: 'insert' id : 'insert', label : 'Insert Menu', // Built-in command ids: 'link', 'fileupload', 'table' items : [ 'link', 'fileupload', 'table' ] } ] } ] } } }; var editor = textboxio.replace('#targetId', configBuiltIn);