_samples/devtools.html

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   2 <!--
   3 Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
   4 For licensing, see LICENSE.html or http://ckeditor.com/license
   5 -->
   6 <html xmlns="http://www.w3.org/1999/xhtml">
   7 <head>
   8         <title>Using DevTools Plugin &mdash; CKEditor Sample</title>
   9         <meta content="text/html; charset=utf-8" http-equiv="content-type" />
  10         <script type="text/javascript" src="../ckeditor.js"></script>
  11         <script src="sample.js" type="text/javascript"></script>
  12         <link href="sample.css" rel="stylesheet" type="text/css" />
  13 </head>
  14 <body>
  15         <h1 class="samples">
  16                 CKEditor Sample &mdash; Using the Developer Tools Plugin
  17         </h1>
  18         <div class="description">
  19         <p>
  20                 This sample shows how to configure CKEditor instances to use the
  21                 <strong>Developer Tools</strong> (<code>devtools</code>) plugin that displays
  22                 information about dialog window elements, including the name of the dialog window,
  23                 tab, and UI element. Please note that the tooltip also contains a link to the
  24                 <a href="http://docs.cksource.com/ckeditor_api/">CKEditor JavaScript API</a>
  25                 documentation for each of the selected elements.
  26         </p>
  27         <p>
  28                 This plugin is aimed at developers who would like to customize their CKEditor
  29                 instances and create their own plugins. By default it is turned off; it is
  30                 usually useful to only turn it on in the development phase. Note that it works with
  31                 all CKEditor dialog windows, including the ones that were created by custom plugins.
  32         </p>
  33         <p>
  34                 To add a CKEditor instance using the <strong>devtools</strong> plugin, insert
  35                 the following JavaScript call into your code:
  36         </p>
  37         <pre class="samples">CKEDITOR.replace( '<em>textarea_id</em>',
  38         {
  39                 <strong>extraPlugins : 'devtools'</strong>
  40         });</pre>
  41         <p>
  42                 Note that <code><em>textarea_id</em></code> in the code above is the <code>id</code> attribute of
  43                 the <code>&lt;textarea&gt;</code> element to be replaced with CKEditor.
  44         </p>
  45         </div>
  46
  47         <!-- This <div> holds alert messages to be display in the sample page. -->
  48         <div id="alerts">
  49                 <noscript>
  50                         <p>
  51                                 <strong>CKEditor requires JavaScript to run</strong>. In a browser with no JavaScript
  52                                 support, like yours, you should still see the contents (HTML data) and you should
  53                                 be able to edit it normally, without a rich editor interface.
  54                         </p>
  55                 </noscript>
  56         </div>
  57         <form action="sample_posteddata.php" method="post">
  58                 <p>
  59                         <label for="editor1">
  60                                 Editor 1:</label>
  61                         <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>
  62                         <script type="text/javascript">
  63                         //<![CDATA[
  64
  65                                 // This call can be placed at any point after the
  66                                 // <textarea>, or inside a <head><script> in a
  67                                 // window.onload event handler.
  68
  69                                 // Replace the <textarea id="editor"> with an CKEditor
  70                                 // instance, using default configurations.
  71                                 CKEDITOR.replace( 'editor1' ,
  72                                 {
  73                                         extraPlugins : 'devtools'
  74                                 });
  75
  76                         //]]>
  77                         </script>
  78                 </p>
  79                 <p>
  80                         <input type="submit" value="Submit" />
  81                 </p>
  82         </form>
  83         <div id="footer">
  84                 <hr />
  85                 <p>
  86                         CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>
  87                 </p>
  88                 <p id="copy">
  89                         Copyright &copy; 2003-2011, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
  90                         Knabben. All rights reserved.
  91                 </p>
  92         </div>
  93 </body>
  94 </html>