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