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