CKEditor - Change the skin

by
Jeremy Canfield |
Updated: March 12 2020
| CKEditor articles
For the purpose of this tutorial, we will assume that the Moono skin is currently being used, and we will change CKEditor to use the Kama skin.
- Download the Kama skin from http://ckeditor.com/addon/kama.
- This will download a file such as kama.version.zip to your Downloads folder. Extract the zip. This will create a folder named Kama which will contain files. Move the Kama folder to /web/server/root/ckeditor/skins/.
- At /web/server/root/ckeditor is a file config.js. Following are the default contents of the config.js file. To modify our skin, we can revise the config.js file to use the kama skin. Notice there is a line config.skin = 'kama';
CKEDITOR.editorConfig = function( config ) {
config.skin = 'kama';
config.toolbar = 'MyToolbar';
config.toolbar_MyToolbar =
[
{ name: 'document', items : [ 'Source','Save','CharCount' ] },
{ name: 'editing', items : [ 'Find','Replace','Scayt', 'TextColor' ] },
{ name: 'insert', items : [ 'Image','CodeSnippet','Table','HorizontalRule' ] },
{ name: 'basicstyles', items : [ 'Bold','Italic','Strike','-','RemoveFormat' ] },
{ name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote' ] },
{ 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