| 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 | <title>Shared-Space Plugin — CKEditor Sample</title> |
|---|
| 9 | <meta charset="utf-8"> |
|---|
| 10 | <script src="../../../ckeditor.js"></script> |
|---|
| 11 | <link rel="stylesheet" href="../../../samples/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/index.html">CKEditor Samples</a> » Sharing Toolbar and Bottom-bar Spaces |
|---|
| 19 | </h1> |
|---|
| 20 | <div class="description"> |
|---|
| 21 | <p> |
|---|
| 22 | This sample shows several editor instances that share the very same spaces for both the toolbar and the bottom bar. |
|---|
| 23 | </p> |
|---|
| 24 | </div> |
|---|
| 25 | <div id="top"> |
|---|
| 26 | <!-- This div will handle all toolbars --> |
|---|
| 27 | </div> |
|---|
| 28 | |
|---|
| 29 | <div style="height: 300px; overflow: auto; border: 1px solid #afafaf; padding: 20px; margin: 20px;"> |
|---|
| 30 | |
|---|
| 31 | <div id="framed1" style="width: 49%; float: left; margin-bottom: 20px;"></div> |
|---|
| 32 | <div id="framed2" style="width: 49%; float: right; margin-bottom: 20px;"></div> |
|---|
| 33 | |
|---|
| 34 | <hr style="clear: both; margin: 20px 0;"> |
|---|
| 35 | |
|---|
| 36 | <div contenteditable="true" id="inline1" style="width: 49%; float: left;"> |
|---|
| 37 | <h3 class="wtf" id="wtf"> |
|---|
| 38 | Integer condimentum sit amet |
|---|
| 39 | </h3> |
|---|
| 40 | <p class="bob" id="bob"> |
|---|
| 41 | <strong>Aenean nonummy a, mattis varius. Cras aliquet.</strong> |
|---|
| 42 | Praesent <a href="http://ckeditor.com/">magna non mattis ac, rhoncus nunc</a>, rhoncus eget, cursus pulvinar mollis.</p> |
|---|
| 43 | <p>Proin id nibh. Sed eu libero posuere sed, lectus. Phasellus dui gravida gravida feugiat mattis ac, felis.</p> |
|---|
| 44 | <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> |
|---|
| 45 | </div> |
|---|
| 46 | <div contenteditable="true" id="inline2" style="width: 49%; float: right;"> |
|---|
| 47 | <h3> |
|---|
| 48 | Praesent wisi accumsan sit amet nibh |
|---|
| 49 | </h3> |
|---|
| 50 | <p>Donec ullamcorper, risus tortor, pretium porttitor. Morbi quam quis lectus non leo.</p> |
|---|
| 51 | <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> |
|---|
| 52 | <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> |
|---|
| 53 | </div> |
|---|
| 54 | |
|---|
| 55 | </div> |
|---|
| 56 | |
|---|
| 57 | <div id="bottom"> |
|---|
| 58 | <!-- This div will handle all toolbars --> |
|---|
| 59 | </div> |
|---|
| 60 | |
|---|
| 61 | <script> |
|---|
| 62 | |
|---|
| 63 | // Turn off automatic editor creation first. |
|---|
| 64 | CKEDITOR.disableAutoInline = true; |
|---|
| 65 | |
|---|
| 66 | CKEDITOR.inline( 'inline1', { |
|---|
| 67 | extraPlugins: 'sharedspace', |
|---|
| 68 | removePlugins: 'floatingspace,resize', |
|---|
| 69 | sharedSpaces: { |
|---|
| 70 | top: 'top', |
|---|
| 71 | bottom: 'bottom' |
|---|
| 72 | } |
|---|
| 73 | }); |
|---|
| 74 | |
|---|
| 75 | CKEDITOR.inline( 'inline2', { |
|---|
| 76 | extraPlugins: 'sharedspace', |
|---|
| 77 | removePlugins: 'floatingspace,resize', |
|---|
| 78 | sharedSpaces: { |
|---|
| 79 | top: 'top', |
|---|
| 80 | bottom: 'bottom' |
|---|
| 81 | } |
|---|
| 82 | }); |
|---|
| 83 | |
|---|
| 84 | CKEDITOR.appendTo( 'framed1', { |
|---|
| 85 | extraPlugins: 'sharedspace', |
|---|
| 86 | removePlugins: 'maximize,resize', |
|---|
| 87 | sharedSpaces: { |
|---|
| 88 | top: 'top', |
|---|
| 89 | bottom: 'bottom' |
|---|
| 90 | } |
|---|
| 91 | }, |
|---|
| 92 | document.getElementById( 'inline1' ).innerHTML |
|---|
| 93 | ); |
|---|
| 94 | |
|---|
| 95 | CKEDITOR.appendTo( 'framed2', { |
|---|
| 96 | extraPlugins: 'sharedspace', |
|---|
| 97 | removePlugins: 'maximize,resize', |
|---|
| 98 | sharedSpaces: { |
|---|
| 99 | top: 'top', |
|---|
| 100 | bottom: 'bottom' |
|---|
| 101 | } |
|---|
| 102 | }, |
|---|
| 103 | document.getElementById( 'inline2' ).innerHTML |
|---|
| 104 | ); |
|---|
| 105 | |
|---|
| 106 | </script> |
|---|
| 107 | |
|---|
| 108 | <div id="footer"> |
|---|
| 109 | <hr> |
|---|
| 110 | <p> |
|---|
| 111 | CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a> |
|---|
| 112 | </p> |
|---|
| 113 | <p id="copy"> |
|---|
| 114 | Copyright © 2003-2012, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico |
|---|
| 115 | Knabben. All rights reserved. |
|---|
| 116 | </p> |
|---|
| 117 | </div> |
|---|
| 118 | </body> |
|---|
| 119 | </html> |
|---|
