httemplate/elements/ckeditor/samples/old/toolbar/toolbar.html

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