X-Git-Url: https://jasonwoof.com/gitweb/?a=blobdiff_plain;f=_samples%2Fui_color.html;h=ed2f07d8c6fc6f8591f80be4c00d866e0c24be97;hb=3fe9cac293e090ea459a3ee10d78cbe9e1dd0e03;hp=497e625014429e8bf460f56c5fd80bb462efadee;hpb=7cd80714081a8ffdf4a1a8d2c72f120ed5ef3d6d;p=ckeditor.git diff --git a/_samples/ui_color.html b/_samples/ui_color.html index 497e625..ed2f07d 100644 --- a/_samples/ui_color.html +++ b/_samples/ui_color.html @@ -1,20 +1,53 @@ - Sample - CKEditor - + UI Color Picker — CKEditor Sample + - + -

- CKEditor Sample +

+ 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 second editor instance includes the UI Color Picker toolbar button. The + default UI color was defined, so the skin color is not used. +

+

+ + -

-

- -

-
+ //]]> + +

+

+ +

+