Bootstrap FreeKB - CKEditor - Change the skin
CKEditor - Change the skin

Updated:   |  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. 

  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','-' ] }
	];	
};

 




Did you find this article helpful?

If so, consider buying me a coffee over at Buy Me A Coffee



Comments


Add a Comment


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