| 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586 | 
							- <!DOCTYPE html>
 
- <!--
 
- Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
 
- For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
 
- -->
 
- <html>
 
- <head>
 
- 	<meta charset="utf-8">
 
- 	<title>Using DevTools Plugin — CKEditor Sample</title>
 
- 	<script src="../../../ckeditor.js"></script>
 
- 	<link rel="stylesheet" href="../../../samples/old/sample.css">
 
- 	<meta name="ckeditor-sample-name" content="Developer Tools plugin">
 
- 	<meta name="ckeditor-sample-group" content="Plugins">
 
- 	<meta name="ckeditor-sample-description" content="Using the Developer Tools plugin to display information about dialog window UI elements to allow for easier customization.">
 
- </head>
 
- <body>
 
- 	<h1 class="samples">
 
- 		<a href="../../../samples/old/index.html">CKEditor Samples</a> » Using the Developer Tools Plugin
 
- 	</h1>
 
- 	<div class="warning deprecated">
 
- 		This sample is not maintained anymore. Check out its <a href="https://sdk.ckeditor.com/samples/devtools.html">brand new version in CKEditor SDK</a>.
 
- 	</div>
 
- 	<div class="description">
 
- 		<p>
 
- 			This sample shows how to configure CKEditor instances to use the
 
- 			<strong>Developer Tools</strong> (<code>devtools</code>) plugin that displays
 
- 			information about dialog window elements, including the name of the dialog window,
 
- 			tab, and UI element. Please note that the tooltip also contains a link to the
 
- 			<a href="https://docs.ckeditor.com/ckeditor4/docs/#!/api">CKEditor JavaScript API</a>
 
- 			documentation for each of the selected elements.
 
- 		</p>
 
- 		<p>
 
- 			This plugin is aimed at developers who would like to customize their CKEditor
 
- 			instances and create their own plugins. By default it is turned off; it is
 
- 			usually useful to only turn it on in the development phase. Note that it works with
 
- 			all CKEditor dialog windows, including the ones that were created by custom plugins.
 
- 		</p>
 
- 		<p>
 
- 			To add a CKEditor instance using the <strong>devtools</strong> plugin, insert
 
- 			the following JavaScript call into your code:
 
- 		</p>
 
- <pre class="samples">
 
- CKEDITOR.replace( '<em>textarea_id</em>', {
 
- 	<strong>extraPlugins: 'devtools'</strong>
 
- });</pre>
 
- 		<p>
 
- 			Note that <code><em>textarea_id</em></code> in the code above is the <code>id</code> attribute of
 
- 			the <code><textarea></code> element to be replaced with CKEditor.
 
- 		</p>
 
- 	</div>
 
- 	<form action="../../../samples/sample_posteddata.php" method="post">
 
- 		<p>
 
- 			<label for="editor1">
 
- 				Editor 1:
 
- 			</label>
 
- 			<textarea cols="80" id="editor1" name="editor1" rows="10"><p>This is some <strong>sample text</strong>. You are using <a href="https://ckeditor.com/">CKEditor</a>.</p></textarea>
 
- 			<script>
 
- 				// This call can be placed at any point after the
 
- 				// <textarea>, or inside a <head><script> in a
 
- 				// window.onload event handler.
 
- 				// Replace the <textarea id="editor"> with an CKEditor
 
- 				// instance, using default configurations.
 
- 				CKEDITOR.replace( 'editor1', {
 
- 					extraPlugins: 'devtools'
 
- 				});
 
- 			</script>
 
- 		</p>
 
- 		<p>
 
- 			<input type="submit" value="Submit">
 
- 		</p>
 
- 	</form>
 
- 	<div id="footer">
 
- 		<hr>
 
- 		<p>
 
- 			CKEditor - The text editor for the Internet - <a class="samples" href="https://ckeditor.com/">https://ckeditor.com</a>
 
- 		</p>
 
- 		<p id="copy">
 
- 			Copyright © 2003-2018, <a class="samples" href="https://cksource.com/">CKSource</a> - Frederico
 
- 			Knabben. All rights reserved.
 
- 		</p>
 
- 	</div>
 
- </body>
 
- </html>
 
 
  |