Created by Michael Fromin on Dec 10, 2015

Creating custom toolbar commands

 
 Textbox.io’s toolbar can be customized to suit the needs of your application. Buttons on the toolbar are referred to as commands. Custom commands can be created at initialization time as part of the editor configuration.

Important

When using custom commands, you’ll need to explicitly define the rest of your toolbar configuration (i.e. stipulate all items to appear). See Changing the Toolbar for more information.

A typical custom command can be defined appear as the following: 

var customCommand = {
	id : 'myCommand',
	text : 'my custom command', 
	icon: './path/to/my/image.png',
	action : function () {
		alert('hello world');
		// write custom functionality to occur when the button is clicked here.
	}
}

 

Properties:

PropertyTypeDescription
idStringA unique, user-defined key to identify the custom command. This enables the command to be uniquely identified at runtime
textStringThe text to display as a tooltip when a user hovers over the command
iconStringa URL path (relative or absolute) to a 13*13px image for the command's icon.
actionfunctionA function defining the action to occur when the user clicks on the button.

 

Including custom commands in your toolbar

Including the custom command in your toolbar requires specifying where you'd like it in your toolbar:

var myEditor = textboxio.replace('#someDiv', {
	ui:{
		toolbar: {
			items: ['undo','insert', 'style', 'emphasis', 'align', 'listindent', 'format', 'tools', // other toolbar items
					{ //create a group to house our custom command
					  label: 'Custom commands group', 
                      items: [customCommand] //our newly created command 
                    }
			] 
		}
	}
});

Basic example 

This example shows how to create a basic custom item and add it to the toolbar.

 

Accessing the editor from action functions

Often when writing action functions for custom commands, you'll want to do something meaningful with the editor content. To do this, use textboxio.getActiveEditor() to obtain a reference to the editor where the cursor is currently located.

See the API reference for more information.

Example