_samples/ui_color.html

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   2 <!--
   3 Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
   4 For licensing, see LICENSE.html or http://ckeditor.com/license
   5 -->
   6 <html xmlns="http://www.w3.org/1999/xhtml">
   7 <head>
   8         <title>UI Color Picker &mdash; CKEditor Sample</title>
   9         <meta content="text/html; charset=utf-8" http-equiv="content-type" />
  10         <script type="text/javascript" src="../ckeditor.js"></script>
  11         <script src="sample.js" type="text/javascript"></script>
  12         <link href="sample.css" rel="stylesheet" type="text/css" />
  13 </head>
  14 <body>
  15         <h1 class="samples">
  16                 CKEditor Sample &mdash; UI Color Picker
  17         </h1>
  18         <div class="description">
  19         <p>
  20                 This sample shows how to automatically replace <code>&lt;textarea&gt;</code> elements
  21                 with a CKEditor instance with an option to change the color of its user interface.
  22         </p>
  23         <h2 class="samples">Setting the User Interface Color</h2>
  24         <p>
  25         To specify the color of the user interface, set the <code>uiColor</code> property:
  26         </p>
  27         <pre class="samples">CKEDITOR.replace( '<em>textarea_id</em>',
  28         {
  29                 <strong>uiColor: '#EE0000'</strong>
  30         });</pre>
  31         <p>
  32                 Note that <code><em>textarea_id</em></code> in the code above is the <code>id</code> attribute of
  33                 the <code>&lt;textarea&gt;</code> element to be replaced.
  34         </p>
  35         <h2 class="samples">Enabling the Color Picker</h2>
  36         <p>
  37                 If the <strong>uicolor</strong> plugin along with the dedicated <strong>UIColor</strong>
  38                 toolbar button is added to CKEditor, the user will also be able to pick the color of the
  39                 UI from the color palette available in the <strong>UI Color Picker</strong> dialog window.
  40         </p>
  41         <p>
  42                 To insert a CKEditor instance with the <strong>uicolor</strong> plugin enabled,
  43                 use the following JavaScript call:
  44         </p>
  45         <pre class="samples">CKEDITOR.replace( '<em>textarea_id</em>',
  46         {
  47                 <strong>extraPlugins : 'uicolor',</strong>
  48                 toolbar : [ [ 'Bold', 'Italic' ], [ <strong>'UIColor'</strong> ] ]
  49         });</pre>
  50         </div>
  51         <!-- This <div> holds alert messages to be display in the sample page. -->
  52         <div id="alerts">
  53                 <noscript>
  54                         <p>
  55                                 <strong>CKEditor requires JavaScript to run</strong>. In a browser with no JavaScript
  56                                 support, like yours, you should still see the contents (HTML data) and you should
  57                                 be able to edit it normally, without a rich editor interface.
  58                         </p>
  59                 </noscript>
  60         </div>
  61         <p>
  62                 Click the <strong>UI Color Picker</strong> button to test your color preferences at runtime.
  63         </p>
  64         <p>
  65                 The first editor instance includes the <strong>UI Color Picker</strong> toolbar button,
  66                 but the default UI color is not defined, so the editor uses the skin color.
  67         </p>
  68         <form action="sample_posteddata.php" method="post">
  69         <p>
  70                 <textarea cols="80" id="editor1" name="editor1" rows="10">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
  71                 <script type="text/javascript">
  72                 //<![CDATA[
  73
  74                         // Replace the <textarea id="editor"> with an CKEditor
  75                         // instance, using default configurations.
  76                         CKEDITOR.replace( 'editor1',
  77                                 {
  78                                         extraPlugins : 'uicolor',
  79                                         toolbar :
  80                                         [
  81                                                 [ 'Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink' ],
  82                                                 [ 'UIColor' ]
  83                                         ]
  84                                 });
  85
  86                 //]]>
  87                 </script>
  88         </p>
  89         <p>
  90                 The second editor instance includes the <strong>UI Color Picker</strong> toolbar button. The
  91                 default UI color was defined, so the skin color is not used.
  92         </p>
  93         <p>
  94                 <textarea cols="80" id="editor2" name="editor2" rows="10">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
  95                 <script type="text/javascript">
  96                 //<![CDATA[
  97
  98                         // Replace the <textarea id="editor"> with an CKEditor
  99                         // instance, using default configurations.
 100                         CKEDITOR.replace( 'editor2',
 101                                 {
 102                                         extraPlugins : 'uicolor',
 103                                         uiColor: '#14B8C4',
 104                                         toolbar :
 105                                         [
 106                                                 [ 'Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink' ],
 107                                                 [ 'UIColor' ]
 108                                         ]
 109                                 } );
 110
 111                 //]]>
 112                 </script>
 113         </p>
 114         <p>
 115                 <input type="submit" value="Submit" />
 116         </p>
 117         </form>
 118         <div id="footer">
 119                 <hr />
 120                 <p>
 121                         CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>
 122                 </p>
 123                 <p id="copy">
 124                         Copyright &copy; 2003-2011, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
 125                         Knabben. All rights reserved.
 126                 </p>
 127         </div>
 128 </body>
 129 </html>