CKEditor Samples » Toolbar Configuration

This sample page demonstrates editor with loaded full toolbar (all registered buttons) and, if current editor's configuration modifies default settings, also editor with modified toolbar.

Since CKEditor 4 there are two ways to configure toolbar buttons.

By config.toolbar

You can explicitly define which buttons are displayed in which groups and in which order. This is the more precise setting, but less flexible. If newly added plugin adds its own button you'll have to add it manually to your config.toolbar setting as well.

To add a CKEditor instance with custom toolbar setting, insert the following JavaScript call to your code:

CKEDITOR.replace( 'textarea_id', {
	toolbar: [
		{ name: 'document', items: [ 'Source', '-', 'NewPage', 'Preview', '-', 'Templates' ] },	// Defines toolbar group with name (used to create voice label) and items in 3 subgroups.
		[ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ],			// Defines toolbar group without name.
		'/',																					// Line break - next group will be placed in new line.
		{ name: 'basicstyles', items: [ 'Bold', 'Italic' ] }
	]
});

By config.toolbarGroups

You can define which groups of buttons (like e.g. basicstyles, clipboard and forms) are displayed and in which order. Registered buttons are associated with toolbar groups by toolbar property in their definition. This setting's advantage is that you don't have to modify toolbar configuration when adding/removing plugins which register their own buttons.

To add a CKEditor instance with custom toolbar groups setting, insert the following JavaScript call to your code:

CKEDITOR.replace( 'textarea_id', {
	toolbarGroups: [
		{ name: 'document',	   groups: [ 'mode', 'document' ] },			// Displays document group with its two subgroups.
 		{ name: 'clipboard',   groups: [ 'clipboard', 'undo' ] },			// Group's name will be used to create voice label.
 		'/',																// Line break - next group will be placed in new line.
 		{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
 		{ name: 'links' }
	]

	// NOTE: Remember to leave 'toolbar' property with the default value (null).
});