CKEditor Sample — UI Color Picker

This sample shows how to automatically replace <textarea> elements with a CKEditor instance with an option to change the color of its user interface.

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' ] ]

Click the UI Color Picker button to test your color preferences at runtime.

The first editor instance includes the UI Color Picker toolbar button, but the default UI color is not defined, so the editor uses the skin color.

The second editor instance includes the UI Color Picker toolbar button. The default UI color was defined, so the skin color is not used.