PageRenderTime 24ms CodeModel.GetById 13ms app.highlight 7ms RepoModel.GetById 2ms app.codeStats 0ms

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