CKEditor Samples » Kama UI Color

This sample shows how to automatically replace <textarea> elements with a CKEditor instance with an option to change the color of its user interface.
Note:The UI skin color is a feature dedicated to the "kama" skin.

Setting the User Interface Color

To specify the color of the user interface, set the uiColor property:

CKEDITOR.replace( 'textarea_id', {
	uiColor: '#EE0000'
});

Note that textarea_id in the code above is the id attribute of the <textarea> element to be replaced.

Enabling the Color Picker

If the uicolor plugin along with the dedicated UIColor toolbar button is added to CKEditor, the user will also be able to pick the color of the UI from the color palette available in the UI Color Picker dialog window.

To insert a CKEditor instance with the uicolor plugin enabled, use the following JavaScript call:

CKEDITOR.replace( 'textarea_id', {
	extraPlugins : 'uicolor',
	toolbar : [ [ 'Bold', 'Italic' ], [ 'UIColor' ] ]
});