How to change the CKEditor skin

Home > Search > How-to
  by

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. 

  1. Download the Kama skin from http://ckeditor.com/addon/kama.
  2. 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/.
  3. 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','-' ] }
	];	
};

 



Add a Comment




We will never share your name or email with anyone. Enter your email if you would like to be notified when we respond to your comment.




Please enter in the box below so that we can be sure you are a human.




Comments