How to hide CKEditor toolbars or buttons

In this section we will go over through the process of hiding buttons or toolbar from CKEditor. As there are lot of available option in the CKEditor by default but as per some requirement  we need to hide some button or toolbar from the editor.

Below screen shot is a full CKEditor with all the toolbars and all the options which comes by default when we first configure it.

 

Now to hide CKEditor toolbar open config.js which is inside ckeditor folder. The config contains below code.

CKEDITOR.editorConfig = function (config) {
// Define changes to default configuration here. For example:
// config.language = 'fr';
// config.uiColor = '#AADC6E';
};

Now replace the above code with the below code which contains all the tool bars and buttons specified in it.

CKEDITOR.editorConfig = function( config ) {
// Define changes to default configuration here. For example:
// config.language = 'fr';
// config.uiColor = '#AADC6E';
config.toolbar = 'Full';

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', 'Iframe'] },
'/',
{ name: 'styles', items: ['Styles', 'Format', 'Font', 'FontSize'] },
{ name: 'colors', items: ['TextColor', 'BGColor'] }
,{ name: 'tools', items: ['Maximize', 'ShowBlocks', '-', 'About'] }];

};

 

Now to remove any of the button or toolbar from the CKEditor, just remove it from above parameters.  For example if we want to remove last toolbar we just need to remove below line from the above code.

,{ name: 'tools', items: ['Maximize', 'ShowBlocks', '-', 'About'] }

 

After removing above line the output is something like below.

 

We can use the same to remove any specific button from the toolbar.