sharedspaces.html 4.8 KB

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