public/assets/plugins/ckeditor/samples/old/uicolor/uicolor.html

   1 <!DOCTYPE html>\r
   2 <!--\r
   3 Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.\r
   4 For licensing, see LICENSE.md or http://ckeditor.com/license\r
   5 -->\r
   6 <html>\r
   7 <head>\r
   8         <meta charset="utf-8">\r
   9         <title>UI Color Picker &mdash; CKEditor Sample</title>\r
  10         <script src="../../../ckeditor.js"></script>\r
  11         <link rel="stylesheet" href="../../../samples/old/sample.css">\r
  12         <meta name="ckeditor-sample-name" content="UIColor plugin">\r
  13         <meta name="ckeditor-sample-group" content="Plugins">\r
  14         <meta name="ckeditor-sample-description" content="Using the UIColor plugin to pick up skin color.">\r
  15 </head>\r
  16 <body>\r
  17         <h1 class="samples">\r
  18                 <a href="../../../samples/old/index.html">CKEditor Samples</a> &raquo; UI Color Plugin\r
  19         </h1>\r
  20         <div class="warning deprecated">\r
  21                 This sample is not maintained anymore. Check out its <a href="http://sdk.ckeditor.com/samples/uicolorpicker.html">brand new version in CKEditor SDK</a>.\r
  22         </div>\r
  23         <div class="description">\r
  24                 <p>\r
  25                         This sample shows how to use the UI Color picker toolbar button to preview the skin color of the editor.\r
  26                         <strong>Note:</strong>The UI skin color feature depends on the CKEditor skin\r
  27                         compatibility. The Moono and Kama skins are examples of skins that work with it.\r
  28                 </p>\r
  29         </div>\r
  30         <form action="../../../samples/sample_posteddata.php" method="post">\r
  31         <div id="ui-color-plugin">\r
  32                 <p>\r
  33                         If the <strong>uicolor</strong> plugin along with the dedicated <strong>UIColor</strong>\r
  34                         toolbar button is added to CKEditor, the user will also be able to pick the color of the\r
  35                         UI from the color palette available in the <strong>UI Color Picker</strong> dialog window.\r
  36                 </p>\r
  37                 <p>\r
  38                         To insert a CKEditor instance with the <strong>uicolor</strong> plugin enabled,\r
  39                         use the following JavaScript call:\r
  40                 </p>\r
  41                 <pre class="samples">\r
  42 CKEDITOR.replace( '<em>textarea_id</em>', {\r
  43         <strong>extraPlugins: 'uicolor',</strong>\r
  44         toolbar: [ [ 'Bold', 'Italic' ], [ <strong>'UIColor'</strong> ] ]\r
  45 });</pre>\r
  46                 <h2>Used in themed instance</h2>\r
  47                 <p>\r
  48                         Click the <strong>UI Color Picker</strong> toolbar button to open up a color picker dialog.\r
  49                 </p>\r
  50                 <p>\r
  51                         <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>\r
  52                         <script>\r
  53 \r
  54                                 // Replace the <textarea id="editor"> with an CKEditor\r
  55                                 // instance, using default configurations.\r
  56                                 CKEDITOR.replace( 'editor1', {\r
  57                                         extraPlugins: 'uicolor',\r
  58                                         toolbar: [\r
  59                                                 [ 'Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink' ],\r
  60                                                 [ 'FontSize', 'TextColor', 'BGColor' ],\r
  61                                                 [ 'UIColor' ]\r
  62                                         ]\r
  63                                 });\r
  64 \r
  65                         </script>\r
  66                 </p>\r
  67                 <h2>Used in inline instance</h2>\r
  68                 <p>\r
  69                         Click the below editable region to display floating toolbar, then click <strong>UI Color Picker</strong> button.\r
  70                 </p>\r
  71                 <div id="editor2" contenteditable="true">\r
  72                         <p>This is some <strong>sample text</strong>. You are using <a data-cke-saved-href="http://ckeditor.com/" href="http://ckeditor.com/">CKEditor</a>.</p>\r
  73                 </div>\r
  74                 <script>\r
  75 \r
  76                         // Disable automatic creation of inline instances.\r
  77                         CKEDITOR.disableAutoInline = true;\r
  78 \r
  79                         // Replace the <div id="editor3"> with an inline CKEditor instance.\r
  80                         CKEDITOR.inline( 'editor2', {\r
  81                                 extraPlugins: 'uicolor',\r
  82                                 toolbar: [\r
  83                                         [ 'Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink' ],\r
  84                                         [ 'FontSize', 'TextColor', 'BGColor' ],\r
  85                                         [ 'UIColor' ]\r
  86                                 ]\r
  87                         });\r
  88 \r
  89                 </script>\r
  90         </div>\r
  91         <p>\r
  92                 <input type="submit" value="Submit">\r
  93         </p>\r
  94         </form>\r
  95         <div id="footer">\r
  96                 <hr>\r
  97                 <p>\r
  98                         CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>\r
  99                 </p>\r
 100                 <p id="copy">\r
 101                         Copyright &copy; 2003-2016, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico\r
 102                         Knabben. All rights reserved.\r
 103                 </p>\r
 104         </div>\r
 105 </body>\r
 106 </html>\r