sources/plugins/indent/dev/indent.html

   1 <!DOCTYPE html>
   2 <!--
   3 Copyright (c) 2003-2017, 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>Indent DEV sample</title>
  10         <script src="../../../ckeditor.js"></script>
  11         <style>
  12                 body {
  13                         padding: 20px;
  14                         margin: 0;
  15                 }
  16                 .editors {
  17                         display: block;
  18                         overflow: hidden;
  19                         width: 100%;
  20                         margin: 0px auto;
  21                         list-style-type: none;
  22                         margin: 0;
  23                         padding: 0;
  24
  25                         box-sizing: content-box;
  26
  27                         background: #eee;
  28                 }
  29                 .editors li {
  30                         width: 50%;
  31                         margin: 0;
  32                         padding: 10px;
  33                         float: left;
  34
  35                         box-sizing: border-box;
  36                 }
  37                 .editors li:nth-child(2n) {
  38                         background: #D4E59A;
  39                 }
  40                 #menu {
  41                         position: fixed;
  42                         top: 0;
  43                         right: 20px;
  44                         padding: 5px;
  45                         border: 1px solid #aaa;
  46                         background: #eee;
  47                 }
  48
  49         </style>
  50 </head>
  51 <body>
  52         <p id="menu">
  53                 <a href="#listnblock">List &amp; Block</a>,
  54                 <a href="#classes">Classes</a>,
  55                 <a href="#list">List</a>,
  56                 <a href="#block">Block</a>,
  57                 <a href="#br">ENTER_BR</a>
  58         </p>
  59
  60         <h1 class="samples">Indent DEV sample</h1>
  61         <h2 id="listnblock">List &amp; Block</h2>
  62         <ul class="editors">
  63                 <li>
  64                         <textarea cols="80" id="editor1" rows="10">
  65                                 <p>xx</p>
  66                                 <ul>
  67                                         <li>x</li>
  68                                         <li>y</li>
  69                                 </ul>
  70                                 <p>xx</p>
  71
  72                                 <br>
  73
  74                                 <ul><li><ol><li>xx</li></ol></li><li>yy</li></ul>
  75                         </textarea>
  76                 </li>
  77                 <li>
  78                         <pre id="editor1_out"></pre>
  79                 </li>
  80         </ul>
  81
  82         <h2 id="classes">Indent classes</h2>
  83         <ul class="editors">
  84                 <li>
  85                         <textarea cols="80" id="editor2" rows="10">
  86                                 <ul>
  87                                         <li>a</li>
  88                                         <li>
  89                                                 b
  90                                                 <ol>
  91                                                         <li>inner</li>
  92                                                 </ol>
  93                                         </li>
  94                                         <li>c</li>
  95                                 </ul>
  96                                 <p>moo</p>
  97                         </textarea>
  98                 </li>
  99                 <li>
 100                         <pre id="editor2_out"></pre>
 101                 </li>
 102         </ul>
 103
 104         <h2 id="list">List only</h2>
 105         <ul class="editors">
 106                 <li>
 107                         <textarea cols="80" id="editor3" rows="10">
 108                                 <ul>
 109                                         <li>a</li>
 110                                         <li>
 111                                                 b
 112                                                 <ol>
 113                                                         <li>inner</li>
 114                                                 </ol>
 115                                         </li>
 116                                         <li>c</li>
 117                                 </ul>
 118                                 <p>moo</p>
 119                         </textarea>
 120                 </li>
 121                 <li>
 122                         <pre id="editor3_out"></pre>
 123                 </li>
 124         </ul>
 125
 126         <h2 id="block">Block only</h2>
 127         <ul class="editors">
 128                 <li>
 129                         <textarea cols="80" id="editor4" rows="10">
 130                                 <ul>
 131                                         <li>a</li>
 132                                         <li>
 133                                                 b
 134                                                 <ol>
 135                                                         <li>inner</li>
 136                                                 </ol>
 137                                         </li>
 138                                         <li>c</li>
 139                                 </ul>
 140                                 <p>moo</p>
 141                         </textarea>
 142                 </li>
 143                 <li>
 144                         <pre id="editor4_out"></pre>
 145                 </li>
 146         </ul>
 147
 148         <h2 id="br">CKEDITOR.ENTER_BR</h2>
 149         <ul class="editors">
 150                 <li>
 151                         <textarea cols="80" id="editor5" rows="10">
 152                                 Text
 153                                 <br>
 154                                 <ul>
 155                                         <li>a</li>
 156                                         <li>b</li>
 157                                 </ul>
 158                         </textarea>
 159                 </li>
 160                 <li>
 161                         <pre id="editor5_out"></pre>
 162                 </li>
 163         </ul>
 164         <script>
 165
 166                 var plugins = 'enterkey,toolbar,htmlwriter,wysiwygarea,undo,sourcearea,clipboard,list,justify,indent,indentlist,indentblock';
 167
 168                 CKEDITOR.config.indentOffset = 10;
 169                 CKEDITOR.addCss( '\
 170                         .i1{ margin-left: 10px}\
 171                         .i2{ margin-left: 20px}\
 172                         .i3{ margin-left: 30px}' );
 173
 174                 function showData( event ) {
 175                         CKEDITOR.document.getById( this.name + '_out' ).setText( getHtmlWithSelection( this ) );
 176                 }
 177
 178                 function browserHtmlFix( html ) {
 179                         if ( CKEDITOR.env.ie && ( document.documentMode || CKEDITOR.env.version ) < 9 ) {
 180                                 // Fix output base href on anchored link.
 181                                 html = html.replace( /href="(.*?)#(.*?)"/gi,
 182                                    function( m, base, anchor ) {
 183                                            if ( base == window.location.href.replace( window.location.hash, '' ) )
 184                                                    return 'href="#' + anchor + '"';
 185
 186                                            return m;
 187                                    } );
 188
 189                                 // Fix output line break after HR.
 190                                 html = html.replace( /(<HR>)\r\n/gi, function( m, hr ) { return hr; } );
 191                         }
 192
 193                         return html;
 194                 }
 195
 196                 function getHtmlWithSelection( editorOrElement, root ) {
 197                         var isEditor = editorOrElement instanceof CKEDITOR.editor,
 198                                 element =  isEditor ? editorOrElement.editable() : editorOrElement;
 199
 200                         root = isEditor ? element :
 201                                    root instanceof CKEDITOR.dom.document ?
 202                                    root.getBody() : root || CKEDITOR.document.getBody();
 203
 204                         function replaceWithBookmark( match, startOrEnd ) {
 205                                 var bookmark;
 206                                 switch( startOrEnd ) {
 207                                         case 'S' :
 208                                                 bookmark = '[';
 209                                                 break;
 210                                         case 'E' :
 211                                                 bookmark = ']';
 212                                                 break;
 213                                         case 'C' :
 214                                                 bookmark = '^';
 215                                                 break;
 216                                 }
 217                                 return bookmark;
 218                         }
 219
 220                         // Hack: force remove the filling char hack in Webkit.
 221                         isEditor && CKEDITOR.env.webkit && editorOrElement.fire( 'beforeSetMode' );
 222
 223                         var sel = isEditor ? editorOrElement.getSelection()
 224                                           : new CKEDITOR.dom.selection( root );
 225
 226                         var doc = sel.document;
 227                         var ranges = sel.getRanges(),
 228                                 range;
 229
 230                         var bms = [];
 231                         var iter = ranges.createIterator();
 232                         while( range = iter.getNextRange() )
 233                                 bms.push( range.createBookmark( 1 ) );
 234
 235                         var html = browserHtmlFix( isEditor ? editorOrElement.getData() : element.getHtml() );
 236                         html = html.replace( /<span\b[^>]*?id="?cke_bm_\d+(\w)"?\b[^>]*?>.*?<\/span>/gi,
 237                                                                  replaceWithBookmark );
 238
 239                         for ( var i = 0, bm; i < bms.length; i++ ) {
 240                                 bm = bms[ i ];
 241                                 var start = doc.getById( bm.startNode ),
 242                                         end = doc.getById( bm.endNode );
 243
 244                                 start && start.remove();
 245                                 end && end.remove();
 246                         }
 247
 248                         return html;
 249                 }
 250
 251                 CKEDITOR.on( 'instanceReady', function ( event ) {
 252                         var editor = event.editor;
 253
 254                         showData.call( editor );
 255
 256                         editor.on( 'afterCommandExec', showData, editor );
 257                 });
 258
 259                 CKEDITOR.replace( 'editor1', {
 260                         plugins: plugins
 261                 } );
 262
 263                 CKEDITOR.replace( 'editor2', {
 264                         plugins: plugins,
 265                         indentClasses: [ 'i1', 'i2', 'i3' ]
 266                 } );
 267
 268                 CKEDITOR.replace( 'editor3', {
 269                         plugins: plugins,
 270                         removePlugins: 'indentblock'
 271                 } );
 272
 273                 CKEDITOR.replace( 'editor4', {
 274                         plugins: plugins,
 275                         removePlugins: 'indentlist'
 276                 } );
 277
 278                 CKEDITOR.replace( 'editor5', {
 279                         plugins: plugins,
 280                         enterMode: CKEDITOR.ENTER_BR
 281                 } );
 282         </script>
 283 </body>
 284 </html>