CKEditor - Customizing toolbar using the config.js file

by
Jeremy Canfield |
Updated: March 12 2020
| CKEditor articles
When downloading CKEditor, there is an option to use the basic, standard, or full version of CKEditor. It is usually best to select the package that has the buttons you would like to use. After downloading CKEditor, you will move the CKEditor folder to your web server. In the CKEditor folder is a file named config.js.
To modify the toolbar, revise the config.js file to list your preferred toolbar options. The following is an example of how to choose the buttons you want displayed in your toolbar by referencing each item.
CKEDITOR.editorConfig = function( config ) {
config.toolbar = 'MyToolbar';
config.toolbar_MyToolbar = [
{ name: 'document', items : [ 'Source','Save' ] },
{ name: 'editing', items : [ 'Scayt', 'TextColor', 'BGColor' ] },
{ name: 'insert', items : [ 'Image','CodeSnippet','Table','HorizontalRule','Blockquote' ] },
{ name: 'basicstyles', items : [ 'Bold','Italic','Underline', 'Strike' ] },
{ name: 'paragraph', items : [ 'NumberedList','BulletedList','Indent','Outdent' ] },
{ name: 'links', items : [ 'Link','Unlink','Anchor' ] },
{ name: 'tools', items : [ 'Maximize','ShowBlocks' ] }
];
};
Did you find this article helpful?
If so, consider buying me a coffee over at