How to remove buttons from CKeditor 4

Question

The question is in the title : How to remove buttons from CKeditor 4 .

Documentation does not answer it clearly

Answer 1

Based on reinmar answer and tested here is the better answer. Add this in your ckeditor config.js :

config.removeButtons = 'Underline,JustifyCenter';

For reference you can find the complete list of CKeditor 4 buttons there : http://ckeditor.com/comment/123266#comment-123266

Answer 2

I finaly found how, but I don't like this way as instead of removing what you don't want, you define which buttons you want (and simply don't put what you don't want). When you call CKeditor.replace you can define the toolbar like so:

    CKEDITOR.replace( 'YOURE_TEXT_AREA_ID', {
    toolbar: [
    { name: 'document', groups: [ 'mode', 'document', 'doctools' ], items: [ 'Source', '-', '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: 'forms', items: [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField' ] },
    '/',
    { 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', 'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'BidiLtr', 'BidiRtl', 'Language' ] },
    { 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' ] },
    { name: 'others', items: [ '-' ] },
    { name: 'about', items: [ 'About' ] }
]
});

(For reference this is the standard full toolbar) Items represent buttons so simply delete the items you don't want. Thats it.

Is there any better answer ?

Answer 3

After much fooling around with manually removing button and styling the toolbar by editing the config.js file, I found the ToolBar Configurator.

With that you can easily enable or disable buttons. Change button group order and add separators.

It is located in the /samples/toolbarconfigurator of the ckeditor folder. Just launch the index.html. The Toolbar Configurator is inlcuded in all the different download packages on the download page

When you are done creating your toolbar, just click Get toolbar config and copy the style to the config.js file located in the main ckeditor folder.

Answer 4

To remove buttons, try:

$(document).ready(function() {
   CKEDITOR.config.removePlugins = 'Save,Print,Preview,Find,About,Maximize,ShowBlocks';
});

The comma-separated list must contain the name of each button you want to remove. The following link is the complete list of the buttons containing the toolbar ckeditor:

list-buttons

Answer 5

In config.js file inside scripts/ckeditor/ of your project, just do the following way

config.removePlugins = 'elementspath,save,image,flash,iframe,link,smiley,tabletools,find,pagebreak,templates,about,maximize,showblocks,newpage,language';

config.removeButtons = 'Copy,Cut,Paste,Undo,Redo,Print,Form,TextField,Textarea,Button,SelectAll,NumberedList,BulletedList,CreateDiv,Table,PasteText,PasteFromWord,Select,HiddenField';

Answer 6

Open your config.js file and paste this code

CKEDITOR.editorConfig = function( config ) {
    // Define changes to default configuration here. For example:
    // config.language = 'fr';
    // config.uiColor = '#AADC6E';
    config.removePlugins = 'blockquote,save,flash,iframe,tabletools,pagebreak,templates,about,showblocks,newpage,language,print,div';
    config.removeButtons = 'Print,Form,TextField,Textarea,Button,CreateDiv,PasteText,PasteFromWord,Select,HiddenField,Radio,Checkbox,ImageButton,Anchor,BidiLtr,BidiRtl,Font,Format,Styles,Preview,Indent,Outdent';
};

Answer 7

There is a handy tool come by default with the bundle, which can be found at ckeditor/samples/toolbarconfigurator/index.html. It allows you to config the toolbar using GUI.

Answer 8

Its so Simple. Modify config.js file as below

CKEDITOR.editorConfig = function (config) {

config.removePlugins = 'save,newpage,flash,about,iframe,language'; 
//The options which you don't need in the toolbar, you can add them in the above remove plugins list.

};

Answer 9

Try

config.removeButtons = 'Save'; 

this will completely remove the save button.

Answer 10

The first way to solve this problem

1. Go to node modules -> @ckeditor -> ckeditor-build-classic -> build ->ckeditor.js

Go or search for defaultConfig in ckeditor.js --- you will find out in the last few lines

Here remove the unwanted fields like table, media, etc

The second way to solve the problem

Here are the complete list:

defaultConfig={toolbar:{items:["heading","|","bold","italic","link","bulletedList","numberedList","|","indent","outdent","|","imageUpload","blockQuote","insertTable","mediaEmbed","undo","redo"]},image:{toolbar:["imageStyle:full","imageStyle:side","|","imageTextAlternative"]},table:{contentToolbar:["tableColumn","tableRow","mergeTableCells"]},language:"en"}}]).default}

Eg - remove the table from the Editor

defaultConfig={toolbar:{items:["heading","|","bold","italic","link","bulletedList","numberedList","|","indent","outdent","|","imageUpload","blockQuote","mediaEmbed","undo","redo"]},image:{toolbar:["imageStyle:full","imageStyle:side","|","imageTextAlternative"]},language:"en"}}]).default}

put in the constructor of the component.ts file

ClassicEditor.defaultConfig={toolbar:{items:["heading","|","bold","italic","link","bulletedList","numberedList","|","indent","outdent","|","imageUpload","blockQuote","mediaEmbed","undo","redo"]},image:{toolbar:["imageStyle:full","imageStyle:side","|","imageTextAlternative"]},language:"en"}}]).default}

Answer 11

you can create your own toolbars with whatever buttons you want in whatever order you want by doing this:

1. set up a bespoke toolbar

   CKEDITOR.config.toolbar_MA = [ ['Source','-','Cut','Copy','Paste','-','Undo','Redo','RemoveFormat','-','Link','Unlink','Anchor','-','Image','Table','HorizontalRule','SpecialChar'], '/', ['Format','Templates','Bold','Italic','Underline','-','Superscript','-',['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'], '-','NumberedList','BulletedList','-','Outdent','Indent'] ];

2)select it when you create your ckeditor instance

  CKEDITOR.replace( 'myeditor',{   toolbar:'MA' });

Answer 12

You can hide all ckeditor buttons by using jquery. example " $(".ql-formats").hide(); ".use browser developer debug tool to see all class names of buttons.to hide only specific detail buttons of ckeditor. exmaple " $(".ql-image").hide(), $(".ql-video").hide() "