CKEditor custom toolbar WITH config.extraPlugins

Question

I'm currently using CKEeditor 4 and I'm using a custom toolbar set in config.js, but I would also like to add the justify plugin. Justify plugin works with the standard editor, but when I specify the custom toolbar, I'm unable to include it.

The difference I can see is that the default toolbar uses toolbarGroups, in which case I added 'align' to the 'paragraph' group.

The custom toolbar uses name/items (I couldn't get it to work with groups), and I tried to use 'align', 'Align', 'justify', 'Justify', etc... nothing shows the justification buttons.

Here is the specific portion of the config.js

config.toolbarGroups = [
    { name: 'clipboard',   groups: [ 'clipboard', 'undo' ] },
    { name: 'editing',     groups: [ 'find', 'selection', 'spellchecker' ] },
    { name: 'links' },
    { name: 'insert' },
    { name: 'forms' },
    { name: 'tools' },
    { name: 'document',    groups: [ 'mode', 'document', 'doctools' ] },
    { name: 'others' },
    '/',
    { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
    { name: 'paragraph',   groups: [ 'list', 'indent', 'blocks', 'align' ] },
    { name: 'styles' },
    { name: 'colors' },
    { name: 'about' }
];


config.toolbar = 'ToolsNoImage';
config.toolbar_ToolsNoImage =
[
    { name: 'document', items : [ 'mode', 'document', 'doctools' ] },
    { name: 'clipboard', items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] },
    { name: 'editing', items : [ 'Find','Replace','-','SelectAll','-','Scayt' ] },
    { name: 'links', items : [ 'Link','Unlink','Anchor' ] },
    { name: 'insert', items : [ 'Table','HorizontalRule','SpecialChar','PageBreak'] },
    { name: 'tools', items : [ 'Maximize' ] },
    { name: 'tools', items : [ 'Source', '-', 'Preview' ] },
    '/',
    { name: 'basicstyles', items : [ 'Bold','Italic','Strike','-','RemoveFormat' ] },
    { name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote','Align' ] },
    { name: 'styles', items : [ 'Styles','Format' ] },
    { name: 'tools', items : [ 'About' ] }

];


config.toolbarCanCollapse = true;
config.toolbarStartupExpanded = true;
config.extraPlugins = 'justify';
config.extraPlugins_ToolsNoImage = 'justify';

I feel like it's something very simple.. case issue, etc.

Reinmar Reinmar · Accepted Answer · 2013-04-30T07:19:20

It is very simple, indeed :D You used wrong button names. The group is named 'align', but buttons 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock' not 'Align' (you used this name in your configuration).

Also, this won't have any effect:

config.extraPlugins_ToolsNoImage = 'justify';

And this is rather not needed:

config.extraPlugins = 'justify';

But the most important thing is button names :)

BTW. There's a plugins/toolbar/samples/toolbar.html sample in every CKEditor package - it may help you finding the right names.

CKEditor custom toolbar WITH config.extraPlugins

3 Answers