Creating a Custom Toolbar CKEditor4 Woes

Hello All,

Sorry if this is a duplicate question but I can't find a "search" feature on the CKEditor forums.

My problem is this: I'm trying to create a custom "basic" toolbar for CKEditor4 and since they switched to toolbar "groups" I'm unable to get the toolbar buttons to display the way I want.

Here's my config:

            $('body').ckeditor( function() { }, {
               height: '300',
               width: '700',
               filebrowserBrowseUrl: 'admin/fileManager/index.html',
               baseHref:'/',
               enterMode: CKEDITOR.ENTER_P,
               shiftEnterMode: CKEDITOR.ENTER_BR,
               toolbarStartupExpanded: true,
               resize_dir: 'vertical',
               toolbarGroups: [
                   { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
                   { name: 'paragraph',   groups: [ 'list' ] },
                   { name: 'links' },
                   { name: 'colors' },
                   { name: 'insert' }
               ]
           });

When the toolbar gets drawn, the default "links" group gets displayed which shows the link, remove link, and achor buttons. I don't want the remove link or anchor buttons to be present. Similarly, when I add the toolbar group "insert" I get a bunch of different buttons when all I want added are the special characters button and the smileys (I have the plugins downloaded).

Any help that could be offered would be most appreciated. Thanks!

Sat, 04/06/2013 - 00:32

flh

Joined: 20/03/2013

Posts: 94

What ? Can't you find the

What ? Can't you find the huge search link on the top right side of the screen :D

I spent an hour to find it myself, so if the moderators could make it ..... 10 times bigger it would avoid others missing it ;-)

See attachment ;-)

Attachments:

Attachment	Size
Capture.GIF	363 bytes

Sat, 04/06/2013 - 03:41

homestar9

Joined: 16/06/2009

Posts: 8

Haha thanks. Wow I must be

Haha thanks. Wow I must be going blind. Unfortunately that search seems limited to the web site and doesn't include the discussion forum. The documentation covers mostly CKEditor 3 and none of the docs on version 4 seem to provide an example for what I'm trying to do. Do you know how I can customize a toolbar group or point me to a working example?

Thanks

Sat, 04/06/2013 - 15:48

flh

Joined: 20/03/2013

Posts: 94

I started out from the full

I started out from the full toolbar in config.js and comment out the things I don't want in the toolbar (I do so rather than deleting in case I want them back later).

Not sure I've been consistent, but I would comment the full original "row" and edit it an copy of that line to obtain the icons I need.

Here is how it looks today:

 // Toolbar configuration generated automatically by the editor based on config.toolbarGroups.
config.toolbar = [
 { name: 'document', groups: [ 'mode', 'document', 'doctools' ], items: [ 'Source','Sourcedialog', '-','Templates' ] },
//  { name: 'document', groups: [ 'mode', 'document', 'doctools' ], items: [ 'Source','Sourcedialog', '-', 'Save', 'NewPage', 'Preview', 'Print', '-', 'Templates' ] },
 { name: 'clipboard', groups: [ 'clipboard', 'undo' ], items: [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ] },
 { name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ], items: [ 'Find', 'Replace', '-',  'SelectAll', '-', 'Scayt' ] },
//  { name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ], items: [ 'Find', 'Replace', '-', 'SelectAll', '-', 'Scayt' ] },
 
 //{ name: 'forms', items: [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField' ] }
 '/',
 { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ], items: [ 'Bold', 'Italic', 'Underline', 'Subscript', 'Superscript', '-', 'RemoveFormat' ] },  //{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ], items: [ 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat' ] },
 
// { name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ], items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'] },
 { name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ], items: [ 'NumberedList', 'BulletedList','-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'] },

// { name: 'links', items: [ 'Link', 'Unlink', 'Anchor' ] },
 { name: 'insert', items: [ 'Image', 'Table' ] },  //{ name: 'insert', items: [ 'Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak', 'Iframe' ] },
 '/',
 { name: 'styles', items: [ 'Format', 'Font', 'FontSize' ] }, //{ name: 'styles', items: [ 'Styles', 'Format', 'Font', 'FontSize' ] },
 { name: 'colors', items: [ 'TextColor', 'BGColor' ] },
 { name: 'tools', items: [ 'Maximize', 'ShowBlocks' ] },
 { name: 'others', items: [ '-' ] },
 { name: 'about', items: [ 'About' ] }
];

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

Sat, 04/06/2013 - 19:45

homestar9

Joined: 16/06/2009

Posts: 8

Thanks for the info. This is

Thanks for the info. This is what worked for me to manually remove specific buttons:

config.removeButtons = '';

I also used this page to get the names of specific buttons. The documentation should list these somewhere where they are easier to find:

http://nightly.ckeditor.com/13-04-06-14-51/standard/samples/plugins/toolbar/toolbar.html#fullToolbar