skins/ckeditor/samples/inlineall.html

   1 <!DOCTYPE html>
   2 <!--
   3 Copyright (c) 2003-2014, 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>Massive inline editing &mdash; CKEditor Sample</title>
  10         <script src="../ckeditor.js"></script>
  11         <script>
  12
  13                 // This code is generally not necessary, but it is here to demonstrate
  14                 // how to customize specific editor instances on the fly. This fits well
  15                 // this demo because we have editable elements (like headers) that
  16                 // require less features.
  17
  18                 // The "instanceCreated" event is fired for every editor instance created.
  19                 CKEDITOR.on( 'instanceCreated', function( event ) {
  20                         var editor = event.editor,
  21                                 element = editor.element;
  22
  23                         // Customize editors for headers and tag list.
  24                         // These editors don't need features like smileys, templates, iframes etc.
  25                         if ( element.is( 'h1', 'h2', 'h3' ) || element.getAttribute( 'id' ) == 'taglist' ) {
  26                                 // Customize the editor configurations on "configLoaded" event,
  27                                 // which is fired after the configuration file loading and
  28                                 // execution. This makes it possible to change the
  29                                 // configurations before the editor initialization takes place.
  30                                 editor.on( 'configLoaded', function() {
  31
  32                                         // Remove unnecessary plugins to make the editor simpler.
  33                                         editor.config.removePlugins = 'colorbutton,find,flash,font,' +
  34                                                 'forms,iframe,image,newpage,removeformat,' +
  35                                                 'smiley,specialchar,stylescombo,templates';
  36
  37                                         // Rearrange the layout of the toolbar.
  38                                         editor.config.toolbarGroups = [
  39                                                 { name: 'editing',              groups: [ 'basicstyles', 'links' ] },
  40                                                 { name: 'undo' },
  41                                                 { name: 'clipboard',    groups: [ 'selection', 'clipboard' ] },
  42                                                 { name: 'about' }
  43                                         ];
  44                                 });
  45                         }
  46                 });
  47
  48         </script>
  49         <link href="sample.css" rel="stylesheet">
  50         <style>
  51
  52                 /* The following styles are just to make the page look nice. */
  53
  54                 /* Workaround to show Arial Black in Firefox. */
  55                 @font-face
  56                 {
  57                         font-family: 'arial-black';
  58                         src: local('Arial Black');
  59                 }
  60
  61                 *[contenteditable="true"]
  62                 {
  63                         padding: 10px;
  64                 }
  65
  66                 #container
  67                 {
  68                         width: 960px;
  69                         margin: 30px auto 0;
  70                 }
  71
  72                 #header
  73                 {
  74                         overflow: hidden;
  75                         padding: 0 0 30px;
  76                         border-bottom: 5px solid #05B2D2;
  77                         position: relative;
  78                 }
  79
  80                 #headerLeft,
  81                 #headerRight
  82                 {
  83                         width: 49%;
  84                         overflow: hidden;
  85                 }
  86
  87                 #headerLeft
  88                 {
  89                         float: left;
  90                         padding: 10px 1px 1px;
  91                 }
  92
  93                 #headerLeft h2,
  94                 #headerLeft h3
  95                 {
  96                         text-align: right;
  97                         margin: 0;
  98                         overflow: hidden;
  99                         font-weight: normal;
 100                 }
 101
 102                 #headerLeft h2
 103                 {
 104                         font-family: "Arial Black",arial-black;
 105                         font-size: 4.6em;
 106                         line-height: 1.1;
 107                         text-transform: uppercase;
 108                 }
 109
 110                 #headerLeft h3
 111                 {
 112                         font-size: 2.3em;
 113                         line-height: 1.1;
 114                         margin: .2em 0 0;
 115                         color: #666;
 116                 }
 117
 118                 #headerRight
 119                 {
 120                         float: right;
 121                         padding: 1px;
 122                 }
 123
 124                 #headerRight p
 125                 {
 126                         line-height: 1.8;
 127                         text-align: justify;
 128                         margin: 0;
 129                 }
 130
 131                 #headerRight p + p
 132                 {
 133                         margin-top: 20px;
 134                 }
 135
 136                 #headerRight > div
 137                 {
 138                         padding: 20px;
 139                         margin: 0 0 0 30px;
 140                         font-size: 1.4em;
 141                         color: #666;
 142                 }
 143
 144                 #columns
 145                 {
 146                         color: #333;
 147                         overflow: hidden;
 148                         padding: 20px 0;
 149                 }
 150
 151                 #columns > div
 152                 {
 153                         float: left;
 154                         width: 33.3%;
 155                 }
 156
 157                 #columns #column1 > div
 158                 {
 159                         margin-left: 1px;
 160                 }
 161
 162                 #columns #column3 > div
 163                 {
 164                         margin-right: 1px;
 165                 }
 166
 167                 #columns > div > div
 168                 {
 169                         margin: 0px 10px;
 170                         padding: 10px 20px;
 171                 }
 172
 173                 #columns blockquote
 174                 {
 175                         margin-left: 15px;
 176                 }
 177
 178                 #tagLine
 179                 {
 180                         border-top: 5px solid #05B2D2;
 181                         padding-top: 20px;
 182                 }
 183
 184                 #taglist {
 185                         display: inline-block;
 186                         margin-left: 20px;
 187                         font-weight: bold;
 188                         margin: 0 0 0 20px;
 189                 }
 190
 191         </style>
 192 </head>
 193 <body>
 194 <div>
 195         <h1 class="samples"><a href="index.html">CKEditor Samples</a> &raquo; Massive inline editing</h1>
 196         <div class="description">
 197                 <p>This sample page demonstrates the inline editing feature - CKEditor instances will be created automatically from page elements with <strong>contentEditable</strong> attribute set to value <strong>true</strong>:</p>
 198                 <pre class="samples">&lt;div <strong>contenteditable="true</strong>" &gt; ... &lt;/div&gt;</pre>
 199                 <p>Click inside of any element below to start editing.</p>
 200         </div>
 201 </div>
 202 <div id="container">
 203         <div id="header">
 204                 <div id="headerLeft">
 205                         <h2 id="sampleTitle" contenteditable="true">
 206                                 CKEditor<br> Goes Inline!
 207                         </h2>
 208                         <h3 contenteditable="true">
 209                                 Lorem ipsum dolor sit amet dolor duis blandit vestibulum faucibus a, tortor.
 210                         </h3>
 211                 </div>
 212                 <div id="headerRight">
 213                         <div contenteditable="true">
 214                                 <p>
 215                                         Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies.
 216                                 </p>
 217                                 <p>
 218                                         Curabitur et ligula. Ut molestie a, ultricies porta urna. Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis. Nulla imperdiet sit amet magna. Vestibulum dapibus, mauris nec malesuada fames ac.
 219                                 </p>
 220                         </div>
 221                 </div>
 222         </div>
 223         <div id="columns">
 224                 <div id="column1">
 225                         <div contenteditable="true">
 226                                 <h3>
 227                                         Fusce vitae porttitor
 228                                 </h3>
 229                                 <p>
 230                                         <strong>
 231                                                 Lorem ipsum dolor sit amet dolor. Duis blandit vestibulum faucibus a, tortor.
 232                                         </strong>
 233                                 </p>
 234                                 <p>
 235                                         Proin nunc justo felis mollis tincidunt, risus risus pede, posuere cubilia Curae, Nullam euismod, enim. Etiam nibh ultricies dolor ac dignissim erat volutpat. Vivamus fermentum <a href="http://ckeditor.com/">nisl nulla sem in</a> metus. Maecenas wisi. Donec nec erat volutpat.
 236                                 </p>
 237                                 <blockquote>
 238                                         <p>
 239                                                 Fusce vitae porttitor a, euismod convallis nisl, blandit risus tortor, pretium.
 240                                                 Vehicula vitae, imperdiet vel, ornare enim vel sodales rutrum
 241                                         </p>
 242                                 </blockquote>
 243                                 <blockquote>
 244                                         <p>
 245                                                 Libero nunc, rhoncus ante ipsum non ipsum. Nunc eleifend pede turpis id sollicitudin fringilla. Phasellus ultrices, velit ac arcu.
 246                                         </p>
 247                                 </blockquote>
 248                                 <p>Pellentesque nunc. Donec suscipit erat. Pellentesque habitant morbi tristique ullamcorper.</p>
 249                                 <p><s>Mauris mattis feugiat lectus nec mauris. Nullam vitae ante.</s></p>
 250                         </div>
 251                 </div>
 252                 <div id="column2">
 253                         <div contenteditable="true">
 254                                 <h3>
 255                                         Integer condimentum sit amet
 256                                 </h3>
 257                                 <p>
 258                                         <strong>Aenean nonummy a, mattis varius. Cras aliquet.</strong>
 259                                         Praesent <a href="http://ckeditor.com/">magna non mattis ac, rhoncus nunc</a>, rhoncus eget, cursus pulvinar mollis.</p>
 260                                 <p>Proin id nibh. Sed eu libero posuere sed, lectus. Phasellus dui gravida gravida feugiat mattis ac, felis.</p>
 261                                 <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>
 262                         </div>
 263                         <div contenteditable="true">
 264                                 <h3>
 265                                         Praesent wisi accumsan sit amet nibh
 266                                 </h3>
 267                                 <p>Donec ullamcorper, risus tortor, pretium porttitor. Morbi quam quis lectus non leo.</p>
 268                                 <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>
 269                                 <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>
 270                         </div>
 271                 </div>
 272                 <div id="column3">
 273                         <div contenteditable="true">
 274                                 <p>
 275                                         <img src="assets/inlineall/logo.png" alt="CKEditor logo" style="float:left">
 276                                 </p>
 277                                 <p>Quisque justo neque, mattis sed, fermentum ultrices <strong>posuere cubilia Curae</strong>, Vestibulum elit metus, quis placerat ut, lectus. Ut sagittis, nunc libero, egestas consequat lobortis velit rutrum ut, faucibus turpis. Fusce porttitor, nulla quis turpis. Nullam laoreet vel, consectetuer tellus suscipit ultricies, hendrerit wisi. Donec odio nec velit ac nunc sit amet, accumsan cursus aliquet. Vestibulum ante sit amet sagittis mi.</p>
 278                                 <h3>
 279                                         Nullam laoreet vel consectetuer tellus suscipit
 280                                 </h3>
 281                                 <ul>
 282                                         <li>Ut sagittis, nunc libero, egestas consequat lobortis velit rutrum ut, faucibus turpis.</li>
 283                                         <li>Fusce porttitor, nulla quis turpis. Nullam laoreet vel, consectetuer tellus suscipit ultricies, hendrerit wisi.</li>
 284                                         <li>Mauris eget tellus. Donec non felis. Nam eget dolor. Vestibulum enim. Donec.</li>
 285                                 </ul>
 286                                 <p>Quisque justo neque, mattis sed, <a href="http://ckeditor.com/">fermentum ultrices posuere cubilia</a> Curae, Vestibulum elit metus, quis placerat ut, lectus.</p>
 287                                 <p>Nullam laoreet vel, consectetuer tellus suscipit ultricies, hendrerit wisi. Ut sagittis, nunc libero, egestas consequat lobortis velit rutrum ut, faucibus turpis. Fusce porttitor, nulla quis turpis.</p>
 288                                 <p>Donec odio nec velit ac nunc sit amet, accumsan cursus aliquet. Vestibulum ante sit amet sagittis mi. Sed in nonummy faucibus turpis. Mauris eget tellus. Donec non felis. Nam eget dolor. Vestibulum enim. Donec.</p>
 289                         </div>
 290                 </div>
 291         </div>
 292         <div id="tagLine">
 293                 Tags of this article:
 294                 <p id="taglist" contenteditable="true">
 295                         inline, editing, floating, CKEditor
 296                 </p>
 297         </div>
 298 </div>
 299 <div id="footer">
 300         <hr>
 301         <p>
 302                 CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">
 303                         http://ckeditor.com</a>
 304         </p>
 305         <p id="copy">
 306                 Copyright &copy; 2003-2014, <a class="samples" href="http://cksource.com/">CKSource</a>
 307                 - Frederico Knabben. All rights reserved.
 308         </p>
 309 </div>
 310 </body>
 311 </html>