Fine-tuning CKEditor 4’s toolbar

Forcing CKEditor 4’s toolbars to look exactly as you’d like is a bit hard task. Somewhere in official docs it is said, that you should use config.toolbarGroups configuration settings for this purpose. This is, of course, a complete mistake.

Benefits are weak and you’re actually loosing all the control over which button, in which group and in which line of toolbar should appear. This article will help you design CKEditor 4’s toolbars exactly, as you wish to have them, using old, good config.toolbar-way.

Notices

Let’s start with some more or less useful links. You may be interested in reading about general configuration info and details about toolbar configuration.

As for full list of all buttons, you can add to your toolbars — sorry, there is nothing official for CKEditor 4. Instead you may browse official list of CKEditor 3 toolbar items (some doesn’t work in 4) and user-contributed list of toolbar buttons for CKEditor 4. At the end of this document, you’ll find a complete button set, that you can use to further customize current CKEditor 4’s toolbar. This list is purged by me from previously mentioned source, as it turned out, that it had some missings as well.

Tips

Some useful tips:

  • to separate few buttons into own toolbar group, place them in a separate subarray,
  • to force particular group into new line, put ‘/’, before following subarray.

One, final note. All CKEditor 4’s buttons are displayed as an icon without any label. The ‘Source’ (show source) button is the only know exception. If you wish to avoid that (have it without label as well), you have to place .cke_button__source_label {display: none;} CSS code somewhere. Refer to this Stack Overflow answer for some details and/or for information, how to add label to another toolbar button.

CKEditor configuration is written as Javascript array. Since I’m using PHP (actually Yii) to generate all my website’s content, my examples in this article will be presented in both ways — pure Javascript array and PHP’s version, that can be encoded using json_encode (PHP) or CJavascript->encode() (Yii).

Word-like toolbar

Here is an example, which I uses the most and which — in my opinion — replicates old good, toolbar-like Word program (version 2003 and earlier). As good as many other word processing programs.

First, as Javascript array:

ckeditorConfiguration =
[
toolbar:
[
[
'NewPage',
'Save',
'DocProps',
'Preview',
'Print'
],
[
'Cut',
'Copy',
'Paste',
'PasteText'
],
[
'Undo',
'Redo'
],
[
'Maximize',
'ShowBlocks'
],
[
'Source'
],
'/',
[
'Format',
'FontSize'
],
[
'Bold',
'Italic',
'Underline',
'Strike',
'Subscript',
'Superscript',
'RemoveFormat'
],
[
'TextColor',
'BGColor'
],
[
'NumberedList',
'BulletedList',
'Outdent',
'Indent',
'Blockquote',
'JustifyLeft',
'JustifyCenter',
'JustifyRight',
'JustifyBlock'
],
[
'Link',
'Unlink',
'Table',
'SpecialChar'
]
]
];

If you want — for any reason — to generate CKEditor 4’s toolbars definition dynamically, on-server side, then here is an corresponding (to above) configuration code expressed as PHP array:

$ckeditorConfiguration = array
(
'toolbar'=>array
(
array
(
'NewPage',
'Save',
'DocProps',
'Preview',
'Print'
),
array
(
'Cut',
'Copy',
'Paste',
'PasteText'
),
array
(
'Undo',
'Redo'
),
array
(
'Maximize',
'ShowBlocks'
),
array
(
'Source'
),
'/',
array
(
'Format',
'FontSize'
),
array
(
'Bold',
'Italic',
'Underline',
'Strike',
'Subscript',
'Superscript',
'RemoveFormat'
),
array
(
'TextColor',
'BGColor'
),
array
(
'NumberedList',
'BulletedList',
'Outdent',
'Indent',
'Blockquote',
'JustifyLeft',
'JustifyCenter',
'JustifyRight',
'JustifyBlock'
),
array
(
'Link',
'Unlink',
'Table',
'SpecialChar'
)
)
);

Default button set

The above configuration is based on the default set (all buttons) for CKEditor 4. If you want to modify this your way, here it is an example (my configuration):

ckeditorConfiguration =
[
toolbar:
[
[
'Source',
'Save',
'NewPage',
'DocProps',
'Preview',
'Print',
'Templates'
],
[
'Cut',
'Copy',
'Paste',
'PasteText',
'PasteFromWord',
'Undo',
'Redo'
],
[
'Find',
'Replace',
'SelectAll',
'Scayt'
],
[
'Form',
'Checkbox',
'Radio',
'TextField',
'Textarea',
'Select',
'Button',
'ImageButton',
'HiddenField'
],
[
'Bold',
'Italic',
'Underline',
'Strike',
'Subscript',
'Superscript',
'RemoveFormat'
],
[
'NumberedList',
'BulletedList',
'Outdent',
'Indent',
'Blockquote',
'CreateDiv',
'JustifyLeft',
'JustifyCenter',
'JustifyRight',
'JustifyBlock',
'BidiLtr',
'BidiRtl'
],
[
'Link',
'Unlink',
'Anchor'
],
[
'CreatePlaceholder',
'Image',
'Flash',
'Table',
'HorizontalRule',
'Smiley',
'SpecialChar',
'PageBreak',
'Iframe',
'InsertPre'
],
[
'Styles',
'Format',
'Font',
'FontSize'
],
[
'TextColor',
'BGColor'
],
[
Maximize',
'ShowBlocks'
],
[
'About'
]
]
];

And PHP equivalent:

$ckeditorConfiguration = array
(
'toolbar'=>array
(
array
(
'Source',
'Save',
'NewPage',
'DocProps',
'Preview',
'Print',
'Templates'
),
array
(
'Cut',
'Copy',
'Paste',
'PasteText',
'PasteFromWord',
'Undo',
'Redo'
),
array
(
'Find',
'Replace',
'SelectAll',
'Scayt'
),
array
(
'Form',
'Checkbox',
'Radio',
'TextField',
'Textarea',
'Select',
'Button',
'ImageButton',
'HiddenField'
),
array
(
'Bold',
'Italic',
'Underline',
'Strike',
'Subscript',
'Superscript',
'RemoveFormat'
),
array
(
'NumberedList',
'BulletedList',
'Outdent',
'Indent',
'Blockquote',
'CreateDiv',
'JustifyLeft',
'JustifyCenter',
'JustifyRight',
'JustifyBlock',
'BidiLtr',
'BidiRtl'
),
array
(
'Link',
'Unlink',
'Anchor'
),
array
(
'CreatePlaceholder',
'Image',
'Flash',
'Table',
'HorizontalRule',
'Smiley',
'SpecialChar',
'PageBreak',
'Iframe',
'InsertPre'
),
array
(
'Styles',
'Format',
'Font',
'FontSize'
),
array
(
'TextColor',
'BGColor'
),
array
(
Maximize',
'ShowBlocks'
),
array
(
'About'
)
)
);

BTW: Starting from PHP 5.4 you can use a shorthand array notation in PHP, which is very similar to Javascript arrays notation (details).

Leave a Reply