/application/static/libs/adminlte/bower_components/ckeditor/samples/old/uicolor/uicolor.html

https://bitbucket.org/tin_gimranoff/docstar · HTML · 106 lines · 97 code · 5 blank · 4 comment · 0 complexity · adbcf501f69176fdc060acc2f8de1213 MD5 · raw file 

    

  1. <!DOCTYPE html>

    2. 

  2. <!--

    3. 

  3. Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.

    4. 

  4. For licensing, see LICENSE.md or http://ckeditor.com/license

    5. 

  5. -->

    6. 

  6. <html>

    7. 

  7. <head>

    8. 

  8. 	<meta charset="utf-8">

    9. 

  9. 	<title>UI Color Picker &mdash; CKEditor Sample</title>

    10. 

  10. 	<script src="../../../ckeditor.js"></script>

    11. 

  11. 	<link rel="stylesheet" href="../../../samples/old/sample.css">

    12. 

  12. 	<meta name="ckeditor-sample-name" content="UIColor plugin">

    13. 

  13. 	<meta name="ckeditor-sample-group" content="Plugins">

    14. 

  14. 	<meta name="ckeditor-sample-description" content="Using the UIColor plugin to pick up skin color.">

    15. 

  15. </head>

    16. 

  16. <body>

    17. 

  17. 	<h1 class="samples">

    18. 

  18. 		<a href="../../../samples/old/index.html">CKEditor Samples</a> &raquo; UI Color Plugin

    19. 

  19. 	</h1>

    20. 

  20. 	<div class="warning deprecated">

    21. 

  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>.

    22. 

  22. 	</div>

    23. 

  23. 	<div class="description">

    24. 

  24. 		<p>

    25. 

  25. 			This sample shows how to use the UI Color picker toolbar button to preview the skin color of the editor.

    26. 

  26. 			<strong>Note:</strong>The UI skin color feature depends on the CKEditor skin

    27. 

  27. 			compatibility. The Moono and Kama skins are examples of skins that work with it.

    28. 

  28. 		</p>

    29. 

  29. 	</div>

    30. 

  30. 	<form action="../../../samples/sample_posteddata.php" method="post">

    31. 

  31. 	<div id="ui-color-plugin">

    32. 

  32. 		<p>

    33. 

  33. 			If the <strong>uicolor</strong> plugin along with the dedicated <strong>UIColor</strong>

    34. 

  34. 			toolbar button is added to CKEditor, the user will also be able to pick the color of the

    35. 

  35. 			UI from the color palette available in the <strong>UI Color Picker</strong> dialog window.

    36. 

  36. 		</p>

    37. 

  37. 		<p>

    38. 

  38. 			To insert a CKEditor instance with the <strong>uicolor</strong> plugin enabled,

    39. 

  39. 			use the following JavaScript call:

    40. 

  40. 		</p>

    41. 

  41. 		<pre class="samples">

    42. 

  42. CKEDITOR.replace( '<em>textarea_id</em>', {

    43. 

  43. 	<strong>extraPlugins: 'uicolor',</strong>

    44. 

  44. 	toolbar: [ [ 'Bold', 'Italic' ], [ <strong>'UIColor'</strong> ] ]

    45. 

  45. });</pre>

    46. 

  46. 		<h2>Used in themed instance</h2>

    47. 

  47. 		<p>

    48. 

  48. 			Click the <strong>UI Color Picker</strong> toolbar button to open up a color picker dialog.

    49. 

  49. 		</p>

    50. 

  50. 		<p>

    51. 

  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>

    52. 

  52. 			<script>

    53. 

  53. 

    54. 

  54. 				// Replace the <textarea id="editor"> with an CKEditor

    55. 

  55. 				// instance, using default configurations.

    56. 

  56. 				CKEDITOR.replace( 'editor1', {

    57. 

  57. 					extraPlugins: 'uicolor',

    58. 

  58. 					toolbar: [

    59. 

  59. 						[ 'Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink' ],

    60. 

  60. 						[ 'FontSize', 'TextColor', 'BGColor' ],

    61. 

  61. 						[ 'UIColor' ]

    62. 

  62. 					]

    63. 

  63. 				});

    64. 

  64. 

    65. 

  65. 			</script>

    66. 

  66. 		</p>

    67. 

  67. 		<h2>Used in inline instance</h2>

    68. 

  68. 		<p>

    69. 

  69. 			Click the below editable region to display floating toolbar, then click <strong>UI Color Picker</strong> button.

    70. 

  70. 		</p>

    71. 

  71. 		<div id="editor2" contenteditable="true">

    72. 

  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>

    73. 

  73. 		</div>

    74. 

  74. 		<script>

    75. 

  75. 

    76. 

  76. 			// Disable automatic creation of inline instances.

    77. 

  77. 			CKEDITOR.disableAutoInline = true;

    78. 

  78. 

    79. 

  79. 			// Replace the <div id="editor3"> with an inline CKEditor instance.

    80. 

  80. 			CKEDITOR.inline( 'editor2', {

    81. 

  81. 				extraPlugins: 'uicolor',

    82. 

  82. 				toolbar: [

    83. 

  83. 					[ 'Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink' ],

    84. 

  84. 					[ 'FontSize', 'TextColor', 'BGColor' ],

    85. 

  85. 					[ 'UIColor' ]

    86. 

  86. 				]

    87. 

  87. 			});

    88. 

  88. 

    89. 

  89. 		</script>

    90. 

  90. 	</div>

    91. 

  91. 	<p>

    92. 

  92. 		<input type="submit" value="Submit">

    93. 

  93. 	</p>

    94. 

  94. 	</form>

    95. 

  95. 	<div id="footer">

    96. 

  96. 		<hr>

    97. 

  97. 		<p>

    98. 

  98. 			CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>

    99. 

  99. 		</p>

    100. 

  100. 		<p id="copy">

    101. 

  101. 			Copyright &copy; 2003-2017, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico

    102. 

  102. 			Knabben. All rights reserved.

    103. 

  103. 		</p>

    104. 

  104. 	</div>

    105. 

  105. </body>

    106. 

  106. </html>
    107.