release/samples/old/toolbar/toolbar.html

   1 <!DOCTYPE html>
   2 <!--
   3 Copyright (c) 2003-2016, 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>Toolbar Configuration &mdash; CKEditor Sample</title>
  10         <meta name="ckeditor-sample-name" content="Toolbar Configurations">
  11         <meta name="ckeditor-sample-group" content="Advanced Samples">
  12         <meta name="ckeditor-sample-description" content="Configuring CKEditor to display full or custom toolbar layout.">
  13         <script src="../../../ckeditor.js"></script>
  14         <link href="../../../samples/old/sample.css" rel="stylesheet">
  15 </head>
  16 <body>
  17         <h1 class="samples">
  18                 <a href="../../../samples/old/index.html">CKEditor Samples</a> &raquo; Toolbar Configuration
  19         </h1>
  20         <div class="warning deprecated">
  21                 This sample is not maintained anymore. Check out the <a href="../../../samples/toolbarconfigurator/index.html#basic">brand new CKEditor Toolbar Configurator</a>.
  22         </div>
  23         <div class="description">
  24                 <p>
  25                         This sample page demonstrates editor with loaded <a href="#fullToolbar">full toolbar</a> (all registered buttons) and, if
  26                         current editor's configuration modifies default settings, also editor with <a href="#currentToolbar">modified toolbar</a>.
  27                 </p>
  28
  29                 <p>Since CKEditor 4 there are two ways to configure toolbar buttons.</p>
  30
  31                 <h2 class="samples">By <a href="http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-toolbar">config.toolbar</a></h2>
  32
  33                 <p>
  34                         You can explicitly define which buttons are displayed in which groups and in which order.
  35                         This is the more precise setting, but less flexible. If newly added plugin adds its
  36                         own button you'll have to add it manually to your <code>config.toolbar</code> setting as well.
  37                 </p>
  38
  39                 <p>To add a CKEditor instance with custom toolbar setting, insert the following JavaScript call to your code:</p>
  40
  41                 <pre class="samples">
  42 CKEDITOR.replace( <em>'textarea_id'</em>, {
  43         <strong>toolbar:</strong> [
  44                 { name: 'document', items: [ 'Source', '-', 'NewPage', 'Preview', '-', 'Templates' ] }, // Defines toolbar group with name (used to create voice label) and items in 3 subgroups.
  45                 [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ],                  // Defines toolbar group without name.
  46                 '/',                                                                                                                                                                    // Line break - next group will be placed in new line.
  47                 { name: 'basicstyles', items: [ 'Bold', 'Italic' ] }
  48         ]
  49 });</pre>
  50
  51                 <h2 class="samples">By <a href="http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-toolbarGroups">config.toolbarGroups</a></h2>
  52
  53                 <p>
  54                         You can define which groups of buttons (like e.g. <code>basicstyles</code>, <code>clipboard</code>
  55                         and <code>forms</code>) are displayed and in which order. Registered buttons are associated
  56                         with toolbar groups by <code>toolbar</code> property in their definition.
  57                         This setting's advantage is that you don't have to modify toolbar configuration
  58                         when adding/removing plugins which register their own buttons.
  59                 </p>
  60
  61                 <p>To add a CKEditor instance with custom toolbar groups setting, insert the following JavaScript call to your code:</p>
  62
  63                 <pre class="samples">
  64 CKEDITOR.replace( <em>'textarea_id'</em>, {
  65         <strong>toolbarGroups:</strong> [
  66                 { name: 'document',        groups: [ 'mode', 'document' ] },                    // Displays document group with its two subgroups.
  67                 { name: 'clipboard',   groups: [ 'clipboard', 'undo' ] },                       // Group's name will be used to create voice label.
  68                 '/',                                                                                                                            // Line break - next group will be placed in new line.
  69                 { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
  70                 { name: 'links' }
  71         ]
  72
  73         // NOTE: Remember to leave 'toolbar' property with the default value (null).
  74 });</pre>
  75         </div>
  76
  77         <div id="currentToolbar" style="display: none">
  78                 <h2 class="samples">Current toolbar configuration</h2>
  79                 <p>Below you can see editor with current toolbar definition.</p>
  80                 <textarea cols="80" id="editorCurrent" name="editorCurrent" 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>
  81                 <pre id="editorCurrentCfg" class="samples"></pre>
  82         </div>
  83
  84         <div id="fullToolbar">
  85                 <h2 class="samples">Full toolbar configuration</h2>
  86                 <p>Below you can see editor with full toolbar, generated automatically by the editor.</p>
  87                 <p>
  88                         <strong>Note</strong>: To create editor instance with full toolbar you don't have to set anything.
  89                         Just leave <code>toolbar</code> and <code>toolbarGroups</code> with the default, <code>null</code> values.
  90                 </p>
  91                 <textarea cols="80" id="editorFull" name="editorFull" 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>
  92                 <pre id="editorFullCfg" class="samples"></pre>
  93         </div>
  94
  95         <script>
  96
  97 (function() {
  98         'use strict';
  99
 100         var buttonsNames;
 101
 102         CKEDITOR.config.extraPlugins = 'toolbar';
 103
 104         CKEDITOR.on( 'instanceReady', function( evt ) {
 105                 var editor = evt.editor,
 106                         editorCurrent = editor.name == 'editorCurrent',
 107                         defaultToolbar = !( editor.config.toolbar || editor.config.toolbarGroups || editor.config.removeButtons ),
 108                         pre = CKEDITOR.document.getById( editor.name + 'Cfg' ),
 109                         output = '';
 110
 111                 if ( editorCurrent ) {
 112                         // If default toolbar configuration has been modified, show "current toolbar" section.
 113                         if ( !defaultToolbar )
 114                                 CKEDITOR.document.getById( 'currentToolbar' ).show();
 115                         else
 116                                 return;
 117                 }
 118
 119                 if ( !buttonsNames )
 120                         buttonsNames = createButtonsNamesHash( editor.ui.items );
 121
 122                 // Toolbar isn't set explicitly, so it was created automatically from toolbarGroups.
 123                 if ( !editor.config.toolbar ) {
 124                         output +=
 125                                 '// Toolbar configuration generated automatically by the editor based on config.toolbarGroups.\n' +
 126                                 dumpToolbarConfiguration( editor ) +
 127                                 '\n\n' +
 128                                 '// Toolbar groups configuration.\n' +
 129                                 dumpToolbarConfiguration( editor, true )
 130                 }
 131                 // Toolbar groups doesn't count in this case - print only toolbar.
 132                 else {
 133                         output += '// Toolbar configuration.\n' +
 134                                 dumpToolbarConfiguration( editor );
 135                 }
 136
 137                 // Recreate to avoid old IE from loosing whitespaces on filling <pre> content.
 138                 var preOutput = pre.getOuterHtml().replace( /(?=<\/)/, output );
 139                 CKEDITOR.dom.element.createFromHtml( preOutput ).replace( pre );
 140         } );
 141
 142         CKEDITOR.replace( 'editorCurrent', { height: 100 } );
 143         CKEDITOR.replace( 'editorFull', {
 144                 // Reset toolbar settings, so full toolbar will be generated automatically.
 145                 toolbar: null,
 146                 toolbarGroups: null,
 147                 removeButtons: null,
 148                 height: 100
 149         } );
 150
 151         function dumpToolbarConfiguration( editor, printGroups ) {
 152                 var output = [],
 153                         toolbar = editor.toolbar;
 154
 155                 for ( var i = 0; i < toolbar.length; ++i ) {
 156                         var group = dumpToolbarGroup( toolbar[ i ], printGroups );
 157                         if ( group )
 158                                 output.push( group );
 159                 }
 160
 161                 return 'config.toolbar' + ( printGroups ? 'Groups' : '' ) + ' = [\n\t' + output.join( ',\n\t' ) + '\n];';
 162         }
 163
 164         function dumpToolbarGroup( group, printGroups ) {
 165                 var output = [];
 166
 167                 if ( typeof group == 'string' )
 168                         return '\'' + group + '\'';
 169                 if ( CKEDITOR.tools.isArray( group ) )
 170                         return dumpToolbarItems( group );
 171                 // Skip group when printing entire toolbar configuration and there are no items in this group.
 172                 if ( !printGroups && !group.items )
 173                         return;
 174
 175                 if ( group.name )
 176                         output.push( 'name: \'' + group.name + '\'' );
 177
 178                 if ( group.groups )
 179                         output.push( 'groups: ' + dumpToolbarItems( group.groups ) );
 180
 181                 if ( !printGroups )
 182                         output.push( 'items: ' + dumpToolbarItems( group.items ) );
 183
 184                 return '{ ' + output.join( ', ' ) + ' }';
 185         }
 186
 187         function dumpToolbarItems( items ) {
 188                 if ( typeof items == 'string' )
 189                         return '\'' + items + '\'';
 190
 191                 var names = [],
 192                         i, item;
 193
 194                 for ( var i = 0; i < items.length; ++i ) {
 195                         item = items[ i ];
 196                         if ( typeof item == 'string' )
 197                                 names.push( item );
 198                         else {
 199                                 if ( item.type == CKEDITOR.UI_SEPARATOR )
 200                                         names.push( '-' );
 201                                 else
 202                                         names.push( buttonsNames[ item.name ] );
 203                         }
 204                 }
 205
 206                 return '[ \'' + names.join( '\', \'' ) + '\' ]';
 207         }
 208
 209         // Creates { 'lowercased': 'LowerCased' } buttons names hash.
 210         function createButtonsNamesHash( items ) {
 211                 var hash = {},
 212                         name;
 213
 214                 for ( name in items ) {
 215                         hash[ items[ name ].name ] = name;
 216                 }
 217
 218                 return hash;
 219         }
 220
 221 })();
 222         </script>
 223
 224         <div id="footer">
 225                 <hr>
 226                 <p>
 227                         CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>
 228                 </p>
 229                 <p id="copy">
 230                         Copyright &copy; 2003-2016, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
 231                         Knabben. All rights reserved.
 232                 </p>
 233         </div>
 234 </body>
 235 </html>