public/assets/ckeditor-4-7-0/samples/old/devtools/devtools.html

   1 <!DOCTYPE html>
   2 <!--
   3 Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
   4 For licensing, see LICENSE.md or http://ckeditor.com/license
   5 -->
   6 <html>
   7 <head>
   8         <meta charset="utf-8">
   9         <title>Using DevTools Plugin &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="Developer Tools plugin">
  13         <meta name="ckeditor-sample-group" content="Plugins">
  14         <meta name="ckeditor-sample-description" content="Using the Developer Tools plugin to display information about dialog window UI elements to allow for easier customization.">
  15 </head>
  16 <body>
  17         <h1 class="samples">
  18                 <a href="../../../samples/old/index.html">CKEditor Samples</a> &raquo; Using the Developer Tools 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/devtools.html">brand new version in CKEditor SDK</a>.
  22         </div>
  23         <div class="description">
  24                 <p>
  25                         This sample shows how to configure CKEditor instances to use the
  26                         <strong>Developer Tools</strong> (<code>devtools</code>) plugin that displays
  27                         information about dialog window elements, including the name of the dialog window,
  28                         tab, and UI element. Please note that the tooltip also contains a link to the
  29                         <a href="http://docs.ckeditor.com/#!/api">CKEditor JavaScript API</a>
  30                         documentation for each of the selected elements.
  31                 </p>
  32                 <p>
  33                         This plugin is aimed at developers who would like to customize their CKEditor
  34                         instances and create their own plugins. By default it is turned off; it is
  35                         usually useful to only turn it on in the development phase. Note that it works with
  36                         all CKEditor dialog windows, including the ones that were created by custom plugins.
  37                 </p>
  38                 <p>
  39                         To add a CKEditor instance using the <strong>devtools</strong> plugin, insert
  40                         the following JavaScript call into your code:
  41                 </p>
  42 <pre class="samples">
  43 CKEDITOR.replace( '<em>textarea_id</em>', {
  44         <strong>extraPlugins: 'devtools'</strong>
  45 });</pre>
  46                 <p>
  47                         Note that <code><em>textarea_id</em></code> in the code above is the <code>id</code> attribute of
  48                         the <code>&lt;textarea&gt;</code> element to be replaced with CKEditor.
  49                 </p>
  50         </div>
  51         <form action="../../../samples/sample_posteddata.php" method="post">
  52                 <p>
  53                         <label for="editor1">
  54                                 Editor 1:
  55                         </label>
  56                         <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>
  57                         <script>
  58
  59                                 // This call can be placed at any point after the
  60                                 // <textarea>, or inside a <head><script> in a
  61                                 // window.onload event handler.
  62
  63                                 // Replace the <textarea id="editor"> with an CKEditor
  64                                 // instance, using default configurations.
  65                                 CKEDITOR.replace( 'editor1', {
  66                                         extraPlugins: 'devtools'
  67                                 });
  68
  69                         </script>
  70                 </p>
  71                 <p>
  72                         <input type="submit" value="Submit">
  73                 </p>
  74         </form>
  75         <div id="footer">
  76                 <hr>
  77                 <p>
  78                         CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>
  79                 </p>
  80                 <p id="copy">
  81                         Copyright &copy; 2003-2017, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
  82                         Knabben. All rights reserved.
  83                 </p>
  84         </div>
  85 </body>
  86 </html>