CKEditor Samples » UI Color Plugin

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

Used in themed instance

Click the UI Color Picker toolbar button to open up a color picker dialog.

<p>This is some <strong>sample text</strong>. You are using <a href="http://ckeditor.com/">CKEditor</a>.</p>

Used in inline instance

Click the below editable region to display floating toolbar, then click UI Color Picker button.