_samples/sharedspaces.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>Shared Toolbars &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         <style id="styles" type="text/css">
  14
  15                 #editorsForm
  16                 {
  17                         height: 400px;
  18                         overflow: auto;
  19                         border: solid 1px #555;
  20                         margin: 10px 0;
  21                         padding: 0 10px;
  22                 }
  23
  24         </style>
  25 </head>
  26 <body>
  27         <h1 class="samples">
  28                 CKEditor Sample &mdash; Shared Toolbars
  29         </h1>
  30         <div class="description">
  31         <p>
  32                 This sample shows how to configure multiple CKEditor instances to share some parts of the interface.
  33                 You can choose to share the toolbar (<code>topSpace</code>), the elements path
  34                 (<code>bottomSpace</code>), or both.
  35         </p>
  36         <p>
  37                 CKEditor instances with shared spaces can be inserted with a JavaScript call using the following code:
  38         </p>
  39         <pre class="samples">CKEDITOR.replace( '<em>textarea_id</em>',
  40         {
  41                 <strong>sharedSpaces :
  42                 {
  43                         top : 'topSpace',
  44                         bottom : 'bottomSpace'
  45                 }</strong>
  46         });</pre>
  47         <p>
  48                 Note that <code><em>textarea_id</em></code> in the code above is the <code>id</code> attribute of
  49                 the <code>&lt;textarea&gt;</code> element to be replaced with CKEditor.
  50         </p>
  51         </div>
  52         <!-- This <div> holds alert messages to be display in the sample page. -->
  53         <div id="alerts">
  54                 <noscript>
  55                         <p>
  56                                 <strong>CKEditor requires JavaScript to run</strong>. In a browser with no JavaScript
  57                                 support, like yours, you should still see the contents (HTML data) and you should
  58                                 be able to edit it normally, without a rich editor interface.
  59                         </p>
  60                 </noscript>
  61         </div>
  62         <div id="topSpace">
  63         </div>
  64         <form action="sample_posteddata.php" id="editorsForm" method="post">
  65                 <p>
  66                         <label for="editor1">
  67                                 Editor 1 (uses the shared toolbar and elements path):</label>
  68                         <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>
  69                 </p>
  70                 <p>
  71                         <label for="editor2">
  72                                 Editor 2 (uses the shared toolbar and elements path):</label>
  73                         <textarea cols="80" id="editor2" name="editor2" 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>
  74                 </p>
  75                 <p>
  76                         <label for="editor3">
  77                                 Editor 3 (uses the shared toolbar only):</label>
  78                         <textarea cols="80" id="editor3" name="editor3" 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>
  79                 </p>
  80                 <p>
  81                         <label for="editor4">
  82                                 Editor 4 (no shared spaces):</label>
  83                         <textarea cols="80" id="editor4" name="editor4" 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>
  84                 </p>
  85                 <p>
  86                         <input type="submit" value="Submit" />
  87                 </p>
  88         </form>
  89         <div id="bottomSpace">
  90         </div>
  91         <div id="footer">
  92                 <hr />
  93                 <p>
  94                         CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>
  95                 </p>
  96                 <p id="copy">
  97                         Copyright &copy; 2003-2011, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
  98                         Knabben. All rights reserved.
  99                 </p>
 100         </div>
 101         <script type="text/javascript">
 102         //<![CDATA[
 103
 104                 // Create all editor instances at the end of the page, so we are sure
 105                 // that the "bottomSpace" div is available in the DOM (IE issue).
 106
 107                 CKEDITOR.replace( 'editor1',
 108                         {
 109                                 sharedSpaces :
 110                                 {
 111                                         top : 'topSpace',
 112                                         bottom : 'bottomSpace'
 113                                 },
 114
 115                                 // Removes the maximize plugin as it's not usable
 116                                 // in a shared toolbar.
 117                                 // Removes the resizer as it's not usable in a
 118                                 // shared elements path.
 119                                 removePlugins : 'maximize,resize'
 120                         } );
 121
 122                 CKEDITOR.replace( 'editor2',
 123                         {
 124                                 sharedSpaces :
 125                                 {
 126                                         top : 'topSpace',
 127                                         bottom : 'bottomSpace'
 128                                 },
 129
 130                                 // Removes the maximize plugin as it's not usable
 131                                 // in a shared toolbar.
 132                                 // Removes the resizer as it's not usable in a
 133                                 // shared elements path.
 134                                 removePlugins : 'maximize,resize'
 135                         } );
 136
 137                 CKEDITOR.replace( 'editor3',
 138                         {
 139                                 sharedSpaces :
 140                                 {
 141                                         top : 'topSpace'
 142                                 },
 143
 144                                 // Removes the maximize plugin as it's not usable
 145                                 // in a shared toolbar.
 146                                 removePlugins : 'maximize'
 147                         } );
 148
 149                 CKEDITOR.replace( 'editor4' );
 150         //]]>
 151         </script>
 152 </body>
 153 </html>