How to customize CK-Editor's tools menu?

Question

I would like to change tool menu optons on ck-editor. for example I remove some of them that I dont need to use. How can I do that ?

Answer 1

There's a configuration setting that allows you to set which buttons will appear.

You just create your own toolbar layout. I've included the default full toolbar code, you can remove the buttons that you don't want to appear.

It's best to copy the default config.js file and rename it, then call your custom config file and the custom toolbar when you load the editor:

CKEDITOR.replace( 'xxx_textarea_id_xxx',
{
  customConfig : 'xxx_name_of_custom_config_file_xxx.js',
  toolbar : 'XXX_custom_name_XXX'
});

---

This is the config setting for the default full toolbar layout.

The '/' within the toolbar layout means break to a new line.
The name: 'document', items : entries are each shown as a group and there are spaces between the entries.
The '-' creates a vertical spacer within a group.

The demo page shows an example of this default toolbar layout:
CKEditor Demo

config.toolbar_Full =
[
    { name: 'document',    items : [ 'Source','-','Save','NewPage','DocProps','Preview','Print','-','Templates' ] },
    { name: 'clipboard',   items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] },
    { name: 'editing',     items : [ 'Find','Replace','-','SelectAll','-','SpellChecker', 'Scayt' ] },
    { name: 'forms',       items : [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField' ] },
    '/',
    { name: 'basicstyles', items : [ 'Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat' ] },
    { name: 'paragraph',   items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote','CreateDiv','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl' ] },
    { name: 'links',       items : [ 'Link','Unlink','Anchor' ] },
    { name: 'insert',      items : [ 'Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak' ] },
    '/',
    { name: 'styles',      items : [ 'Styles','Format','Font','FontSize' ] },
    { name: 'colors',      items : [ 'TextColor','BGColor' ] },
    { name: 'tools',       items : [ 'Maximize', 'ShowBlocks','-','About' ] }
];

---

This is a custom toolbar config setting.
When you set the toolbar config setting you only use the part of the name that is after "toolbar_". toolbar : 'XXX_custom_name_XXX'

config.toolbar_XXX_custom_name_XXX =
[
    { name: 'xxx_custom_group_namexxx',    items : ['Save','NewPage','DocProps','Preview','Print','-','Templates' ] },
    { name: 'clipboard',   items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] },
    { name: 'editing',     items : [ 'Find','Replace','-','SelectAll' ] },
    '/',
    { name: 'basicstyles', items : [ 'Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat' ] },
    { name: 'paragraph',   items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote','CreateDiv','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl' ] },
    { name: 'links',       items : [ 'Link','Unlink','Anchor' ] },
    { name: 'insert',      items : [ 'Image','Table','HorizontalRule','Smiley','SpecialChar','PageBreak' ] },
    '/',
    { name: 'styles',      items : [ 'Styles','Format','Font','FontSize' ] },
    { name: 'colors',      items : [ 'TextColor','BGColor' ] },
    { name: 'tools',       items : [ 'Maximize', 'ShowBlocks','-','About' ] }
];

---

Here's the link to the toolbar page in the developers guide:
CKEditor 3.x | Developers Guide - CKEditor Toolbar

---

You might want to turn off any features that you aren't using with the removePlugins config setting:

config.removePlugins = 'flash,iframe';

---

Here's the page from the CKEditor 3 JavaScript API Documentation that lists all of the config settings:
Namespace CKEDITOR.config