1 | <!DOCTYPE html>
|
---|
2 | <!--
|
---|
3 | Copyright (c) 2003-2015, 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="description">
|
---|
18 | <p>
|
---|
19 | This sample shows how to automatically replace <code><textarea></code> elements
|
---|
20 | with a CKEditor instance with an option to change the color of its user interface.<br>
|
---|
21 | <strong>Note:</strong>The UI skin color feature depends on the CKEditor skin
|
---|
22 | compatibility. The Moono and Kama skins are examples of skins that work with it.
|
---|
23 | </p>
|
---|
24 | </div>
|
---|
25 | <form action="sample_posteddata.php" method="post">
|
---|
26 | <p>
|
---|
27 | This editor instance has a UI color value defined in configuration to change the skin color,
|
---|
28 | To specify the color of the user interface, set the <code>uiColor</code> property:
|
---|
29 | </p>
|
---|
30 | <pre class="samples">
|
---|
31 | CKEDITOR.replace( '<em>textarea_id</em>', {
|
---|
32 | <strong>uiColor: '#14B8C4'</strong>
|
---|
33 | });</pre>
|
---|
34 | <p>
|
---|
35 | Note that <code><em>textarea_id</em></code> in the code above is the <code>id</code> attribute of
|
---|
36 | the <code><textarea></code> element to be replaced.
|
---|
37 | </p>
|
---|
38 | <p>
|
---|
39 | <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>
|
---|
40 | <script>
|
---|
41 |
|
---|
42 | // Replace the <textarea id="editor"> with an CKEditor
|
---|
43 | // instance, using default configurations.
|
---|
44 | CKEDITOR.replace( 'editor1', {
|
---|
45 | uiColor: '#14B8C4',
|
---|
46 | toolbar: [
|
---|
47 | [ 'Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink' ],
|
---|
48 | [ 'FontSize', 'TextColor', 'BGColor' ]
|
---|
49 | ]
|
---|
50 | });
|
---|
51 |
|
---|
52 | </script>
|
---|
53 | </p>
|
---|
54 | <p>
|
---|
55 | <input type="submit" value="Submit">
|
---|
56 | </p>
|
---|
57 | </form>
|
---|
58 | <div id="footer">
|
---|
59 | <hr>
|
---|
60 | <p>
|
---|
61 | CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>
|
---|
62 | </p>
|
---|
63 | <p id="copy">
|
---|
64 | Copyright © 2003-2015, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
|
---|
65 | Knabben. All rights reserved.
|
---|
66 | </p>
|
---|
67 | </div>
|
---|
68 | </body>
|
---|
69 | </html>
|
---|