|
1 <!DOCTYPE html> |
|
2 <!-- |
|
3 Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved. |
|
4 For licensing, see LICENSE.md or http://ckeditor.com/license |
|
5 --> |
|
6 <html> |
|
7 <head> |
|
8 <meta charset="utf-8"> |
|
9 <title>UI Color Picker — CKEditor Sample</title> |
|
10 <script src="../../ckeditor.js"></script> |
|
11 <link rel="stylesheet" href="sample.css"> |
|
12 </head> |
|
13 <body> |
|
14 <h1 class="samples"> |
|
15 <a href="index.html">CKEditor Samples</a> » UI Color |
|
16 </h1> |
|
17 <div class="warning deprecated"> |
|
18 This sample is not maintained anymore. Check out its <a href="http://sdk.ckeditor.com/samples/uicolor.html">brand new version in CKEditor SDK</a>. |
|
19 </div> |
|
20 <div class="description"> |
|
21 <p> |
|
22 This sample shows how to automatically replace <code><textarea></code> elements |
|
23 with a CKEditor instance with an option to change the color of its user interface.<br> |
|
24 <strong>Note:</strong>The UI skin color feature depends on the CKEditor skin |
|
25 compatibility. The Moono and Kama skins are examples of skins that work with it. |
|
26 </p> |
|
27 </div> |
|
28 <form action="sample_posteddata.php" method="post"> |
|
29 <p> |
|
30 This editor instance has a UI color value defined in configuration to change the skin color, |
|
31 To specify the color of the user interface, set the <code>uiColor</code> property: |
|
32 </p> |
|
33 <pre class="samples"> |
|
34 CKEDITOR.replace( '<em>textarea_id</em>', { |
|
35 <strong>uiColor: '#14B8C4'</strong> |
|
36 });</pre> |
|
37 <p> |
|
38 Note that <code><em>textarea_id</em></code> in the code above is the <code>id</code> attribute of |
|
39 the <code><textarea></code> element to be replaced. |
|
40 </p> |
|
41 <p> |
|
42 <textarea cols="80" id="editor1" name="editor1" rows="10"><p>This is some <strong>sample text</strong>. You are using <a href="http://ckeditor.com/">CKEditor</a>.</p></textarea> |
|
43 <script> |
|
44 |
|
45 // Replace the <textarea id="editor"> with an CKEditor |
|
46 // instance, using default configurations. |
|
47 CKEDITOR.replace( 'editor1', { |
|
48 uiColor: '#14B8C4', |
|
49 toolbar: [ |
|
50 [ 'Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink' ], |
|
51 [ 'FontSize', 'TextColor', 'BGColor' ] |
|
52 ] |
|
53 }); |
|
54 |
|
55 </script> |
|
56 </p> |
|
57 <p> |
|
58 <input type="submit" value="Submit"> |
|
59 </p> |
|
60 </form> |
|
61 <div id="footer"> |
|
62 <hr> |
|
63 <p> |
|
64 CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a> |
|
65 </p> |
|
66 <p id="copy"> |
|
67 Copyright © 2003-2016, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico |
|
68 Knabben. All rights reserved. |
|
69 </p> |
|
70 </div> |
|
71 </body> |
|
72 </html> |