public/assets/plugins/ckeditor/samples/old/sharedspace/sharedspace.html

   1 <!DOCTYPE html>
   2 <!--
   3 Copyright (c) 2003-2012, 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>Shared-Space 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="Shared-Space plugin">
  13         <meta name="ckeditor-sample-group" content="Plugins">
  14         <meta name="ckeditor-sample-description" content="Having the toolbar and the bottom bar spaces shared by different editor instances.">
  15 </head>
  16 <body>
  17         <h1 class="samples">
  18                 <a href="../../../samples/old/index.html">CKEditor Samples</a> &raquo; Sharing Toolbar and Bottom-bar Spaces
  19         </h1>
  20         <div class="warning deprecated">
  21                 This sample is not maintained anymore. Check out its <a href="http://sdk.ckeditor.com/samples/sharedspace.html">brand new version in CKEditor SDK</a>.
  22         </div>
  23         <div class="description">
  24                 <p>
  25                         This sample shows several editor instances that share the very same spaces for both the toolbar and the bottom bar.
  26                 </p>
  27         </div>
  28         <div id="top">
  29                 <!-- This div will handle all toolbars -->
  30         </div>
  31
  32         <div style="height: 300px; overflow: auto; border: 1px solid #afafaf; padding: 20px; margin: 20px;">
  33
  34                 <div id="framed1" style="width: 49%; float: left; margin-bottom: 20px;"></div>
  35                 <div id="framed2" style="width: 49%; float: right; margin-bottom: 20px;"></div>
  36
  37                 <hr style="clear: both; margin: 20px 0;">
  38
  39                 <div contenteditable="true" id="inline1" style="width: 49%; float: left;">
  40                         <h3>
  41                                 Integer condimentum sit amet
  42                         </h3>
  43                         <p>
  44                                 <strong>Aenean nonummy a, mattis varius. Cras aliquet.</strong>
  45                                 Praesent <a href="http://ckeditor.com/">magna non mattis ac, rhoncus nunc</a>, rhoncus eget, cursus pulvinar mollis.</p>
  46                         <p>Proin id nibh. Sed eu libero posuere sed, lectus. Phasellus dui gravida gravida feugiat mattis ac, felis.</p>
  47                         <p>Integer condimentum sit amet, tempor elit odio, a dolor non ante at sapien. Sed ac lectus. Nulla ligula quis eleifend mi, id leo velit pede cursus arcu id nulla ac lectus. Phasellus vestibulum. Nunc viverra enim quis diam.</p>
  48                 </div>
  49                 <div contenteditable="true" id="inline2" style="width: 49%; float: right;">
  50                         <h3>
  51                                 Praesent wisi accumsan sit amet nibh
  52                         </h3>
  53                         <p>Donec ullamcorper, risus tortor, pretium porttitor. Morbi quam quis lectus non leo.</p>
  54                         <p style="margin-left: 40px; ">Integer faucibus scelerisque. Proin faucibus at, aliquet vulputate, odio at eros. Fusce <a href="http://ckeditor.com/">gravida, erat vitae augue</a>. Fusce urna fringilla gravida.</p>
  55                         <p>In hac habitasse platea dictumst. Praesent wisi accumsan sit amet nibh. Maecenas orci luctus a, lacinia quam sem, posuere commodo, odio condimentum tempor, pede semper risus. Suspendisse pede. In hac habitasse platea dictumst. Nam sed laoreet sit amet erat. Integer.</p>
  56                 </div>
  57
  58         </div>
  59
  60         <div id="bottom">
  61                 <!-- This div will handle all toolbars -->
  62         </div>
  63
  64         <script>
  65
  66                 // Turn off automatic editor creation first.
  67                 CKEDITOR.disableAutoInline = true;
  68
  69                 CKEDITOR.inline( 'inline1', {
  70                         extraPlugins: 'sharedspace',
  71                         removePlugins: 'floatingspace,resize',
  72                         sharedSpaces: {
  73                                 top: 'top',
  74                                 bottom: 'bottom'
  75                         }
  76                 });
  77
  78                 CKEDITOR.inline( 'inline2', {
  79                         extraPlugins: 'sharedspace',
  80                         removePlugins: 'floatingspace,resize',
  81                         sharedSpaces: {
  82                                 top: 'top',
  83                                 bottom: 'bottom'
  84                         }
  85                 });
  86
  87                 CKEDITOR.appendTo( 'framed1', {
  88                                 extraPlugins: 'sharedspace',
  89                                 removePlugins: 'maximize,resize',
  90                                 sharedSpaces: {
  91                                         top: 'top',
  92                                         bottom: 'bottom'
  93                                 }
  94                         },
  95                         document.getElementById( 'inline1' ).innerHTML
  96                 );
  97
  98                 CKEDITOR.appendTo( 'framed2', {
  99                                 extraPlugins: 'sharedspace',
 100                                 removePlugins: 'maximize,resize',
 101                                 sharedSpaces: {
 102                                         top: 'top',
 103                                         bottom: 'bottom'
 104                                 }
 105                         },
 106                         document.getElementById( 'inline2' ).innerHTML
 107                 );
 108
 109         </script>
 110
 111         <div id="footer">
 112                 <hr>
 113                 <p>
 114                         CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>
 115                 </p>
 116                 <p id="copy">
 117                         Copyright &copy; 2003-2012, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
 118                         Knabben. All rights reserved.
 119                 </p>
 120         </div>
 121 </body>
 122 </html>