uicolor.html 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172
  1. <!DOCTYPE html>
  2. <!--
  3. Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
  4. For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  5. -->
  6. <html>
  7. <head>
  8. <meta charset="utf-8">
  9. <title>UI Color Picker &mdash; 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> &raquo; UI Color
  16. </h1>
  17. <div class="warning deprecated">
  18. This sample is not maintained anymore. Check out its <a href="https://ckeditor.com/docs/ckeditor4/latest/examples/uicolor.html">brand new version in CKEditor Examples</a>.
  19. </div>
  20. <div class="description">
  21. <p>
  22. This sample shows how to automatically replace <code>&lt;textarea&gt;</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>&lt;textarea&gt;</code> element to be replaced.
  40. </p>
  41. <p>
  42. <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="https://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
  43. <script>
  44. // Replace the <textarea id="editor"> with an CKEditor
  45. // instance, using default configurations.
  46. CKEDITOR.replace( 'editor1', {
  47. uiColor: '#14B8C4',
  48. toolbar: [
  49. [ 'Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink' ],
  50. [ 'FontSize', 'TextColor', 'BGColor' ]
  51. ]
  52. });
  53. </script>
  54. </p>
  55. <p>
  56. <input type="submit" value="Submit">
  57. </p>
  58. </form>
  59. <div id="footer">
  60. <hr>
  61. <p>
  62. CKEditor - The text editor for the Internet - <a class="samples" href="https://ckeditor.com/">https://ckeditor.com</a>
  63. </p>
  64. <p id="copy">
  65. Copyright &copy; 2003-2019, <a class="samples" href="https://cksource.com/">CKSource</a> - Frederico
  66. Knabben. All rights reserved.
  67. </p>
  68. </div>
  69. </body>
  70. </html>