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.

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.

• javascript
• editor
• ckeditor

3 Answers 3

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.

This is for anyone struggling to enable alignment/justify options like I did. To enable, the following is required as hanji suggested:

config.extraPlugins: 'justify'

Simply use the following to customize ckeditor toolbar for align and justify..

config.toolbar = [
        {name: "paragraph", 
         items: ["NumberedList", "BulletedList","Outdent","Indent","Blockquote","JustifyLeft","JustifyCenter","JustifyRight","JustifyBlock"]
        }
    ];

for further customization in toolbar you can refer to this page and simply edit your config.js:

http://ckeditor./forums/CKEditor/Complete-list-of-toolbar-items