[Summary view] [Print] [Text view]

   1  /*

   2  Copyright (c) 2003-2010, CKSource - Frederico Knabben. All rights reserved.

   3  For licensing, see LICENSE.html or http://ckeditor.com/license

   4  */
   5  
   6  /**

   7   * @fileOverview The "toolbar" plugin. Renders the default toolbar interface in

   8   * the editor.

   9   */
  10  
  11  (function()
  12  {
  13      var toolbox = function()
  14      {
  15          this.toolbars = [];
  16          this.focusCommandExecuted = false;
  17      };
  18  
  19      toolbox.prototype.focus = function()
  20      {
  21          for ( var t = 0, toolbar ; toolbar = this.toolbars[ t++ ] ; )
  22          {
  23              for ( var i = 0, item ; item = toolbar.items[ i++ ] ; )
  24              {
  25                  if ( item.focus )
  26                  {
  27                      item.focus();
  28                      return;
  29                  }
  30              }
  31          }
  32      };
  33  
  34      var commands =
  35      {
  36          toolbarFocus :
  37          {
  38              modes : { wysiwyg : 1, source : 1 },
  39  
  40              exec : function( editor )
  41              {
  42                  if ( editor.toolbox )
  43                  {
  44                      editor.toolbox.focusCommandExecuted = true;
  45  
  46                      // Make the first button focus accessible. (#3417)

  47                      if ( CKEDITOR.env.ie )
  48                          setTimeout( function(){ editor.toolbox.focus(); }, 100 );
  49                      else
  50                          editor.toolbox.focus();
  51                  }
  52              }
  53          }
  54      };
  55  
  56      CKEDITOR.plugins.add( 'toolbar',
  57      {
  58          init : function( editor )
  59          {
  60              var itemKeystroke = function( item, keystroke )
  61              {
  62                  var next, nextToolGroup, groupItemsCount;
  63                  var rtl = editor.lang.dir == 'rtl';
  64  
  65                  switch ( keystroke )
  66                  {
  67                      case rtl ? 37 : 39 :                    // RIGHT-ARROW
  68                      case 9 :                    // TAB
  69                          do
  70                          {
  71                              // Look for the next item in the toolbar.

  72                              next = item.next;
  73  
  74                              if ( !next )
  75                              {
  76                                  nextToolGroup = item.toolbar.next;
  77                                  groupItemsCount = nextToolGroup && nextToolGroup.items.length;
  78  
  79                                  // Bypass the empty toolgroups.

  80                                  while ( groupItemsCount === 0 )
  81                                  {
  82                                      nextToolGroup = nextToolGroup.next;
  83                                      groupItemsCount = nextToolGroup && nextToolGroup.items.length;
  84                                  }
  85  
  86                                  if ( nextToolGroup )
  87                                      next = nextToolGroup.items[ 0 ];
  88                              }
  89  
  90                              item = next;
  91                          }
  92                          while ( item && !item.focus )
  93  
  94                          // If available, just focus it, otherwise focus the

  95                          // first one.

  96                          if ( item )
  97                              item.focus();
  98                          else
  99                              editor.toolbox.focus();
 100  
 101                          return false;
 102  
 103                      case rtl ? 39 : 37 :                    // LEFT-ARROW
 104                      case CKEDITOR.SHIFT + 9 :    // SHIFT + TAB
 105                          do
 106                          {
 107                              // Look for the previous item in the toolbar.

 108                              next = item.previous;
 109  
 110                              if ( !next )
 111                              {
 112                                  nextToolGroup = item.toolbar.previous;
 113                                  groupItemsCount = nextToolGroup && nextToolGroup.items.length;
 114  
 115                                  // Bypass the empty toolgroups.

 116                                  while ( groupItemsCount === 0 )
 117                                  {
 118                                      nextToolGroup = nextToolGroup.previous;
 119                                      groupItemsCount = nextToolGroup && nextToolGroup.items.length;
 120                                  }
 121  
 122                                  if ( nextToolGroup )
 123                                      next = nextToolGroup.items[ groupItemsCount - 1 ];
 124                              }
 125  
 126                              item = next;
 127                          }
 128                          while ( item && !item.focus )
 129  
 130                          // If available, just focus it, otherwise focus the

 131                          // last one.

 132                          if ( item )
 133                              item.focus();
 134                          else
 135                          {
 136                              var lastToolbarItems = editor.toolbox.toolbars[ editor.toolbox.toolbars.length - 1 ].items;
 137                              lastToolbarItems[ lastToolbarItems.length - 1 ].focus();
 138                          }
 139  
 140                          return false;
 141  
 142                      case 27 :                    // ESC
 143                          editor.focus();
 144                          return false;
 145  
 146                      case 13 :                    // ENTER
 147                      case 32 :                    // SPACE
 148                          item.execute();
 149                          return false;
 150                  }
 151                  return true;
 152              };
 153  
 154              editor.on( 'themeSpace', function( event )
 155                  {
 156                      if ( event.data.space == editor.config.toolbarLocation )
 157                      {
 158                          editor.toolbox = new toolbox();
 159  
 160                          var labelId = 'cke_' + CKEDITOR.tools.getNextNumber();
 161  
 162                          var output = [ '<div class="cke_toolbox" role="toolbar" aria-labelledby="', labelId, '"' ],
 163                              expanded =  editor.config.toolbarStartupExpanded !== false,
 164                              groupStarted;
 165  
 166                          output.push( expanded ? '>' : ' style="display:none">' );
 167  
 168                          // Sends the ARIA label.

 169                          output.push( '<span id="', labelId, '" class="cke_voice_label">', editor.lang.toolbar, '</span>' );
 170  
 171                          var toolbars = editor.toolbox.toolbars,
 172                              toolbar =
 173                                      ( editor.config.toolbar instanceof Array ) ?
 174                                          editor.config.toolbar
 175                                      :
 176                                          editor.config[ 'toolbar_' + editor.config.toolbar ];
 177  
 178                          for ( var r = 0 ; r < toolbar.length ; r++ )
 179                          {
 180                              var row = toolbar[ r ];
 181  
 182                              // It's better to check if the row object is really

 183                              // available because it's a common mistake to leave

 184                              // an extra comma in the toolbar definition

 185                              // settings, which leads on the editor not loading

 186                              // at all in IE. (#3983)

 187                              if ( !row )
 188                                  continue;
 189  
 190                              var toolbarId = 'cke_' + CKEDITOR.tools.getNextNumber(),
 191                                  toolbarObj = { id : toolbarId, items : [] };
 192  
 193                              if ( groupStarted )
 194                              {
 195                                  output.push( '</div>' );
 196                                  groupStarted = 0;
 197                              }
 198  
 199                              if ( row === '/' )
 200                              {
 201                                  output.push( '<div class="cke_break"></div>' );
 202                                  continue;
 203                              }
 204  
 205                              output.push( '<span id="', toolbarId, '" class="cke_toolbar" role="presentation"><span class="cke_toolbar_start"></span>' );
 206  
 207                              // Add the toolbar to the "editor.toolbox.toolbars"

 208                              // array.

 209                              var index = toolbars.push( toolbarObj ) - 1;
 210  
 211                              // Create the next/previous reference.

 212                              if ( index > 0 )
 213                              {
 214                                  toolbarObj.previous = toolbars[ index - 1 ];
 215                                  toolbarObj.previous.next = toolbarObj;
 216                              }
 217  
 218                              // Create all items defined for this toolbar.

 219                              for ( var i = 0 ; i < row.length ; i++ )
 220                              {
 221                                  var item,
 222                                      itemName = row[ i ];
 223  
 224                                  if ( itemName == '-' )
 225                                      item = CKEDITOR.ui.separator;
 226                                  else
 227                                      item = editor.ui.create( itemName );
 228  
 229                                  if ( item )
 230                                  {
 231                                      if ( item.canGroup )
 232                                      {
 233                                          if ( !groupStarted )
 234                                          {
 235                                              output.push( '<span class="cke_toolgroup" role="presentation">' );
 236                                              groupStarted = 1;
 237                                          }
 238                                      }
 239                                      else if ( groupStarted )
 240                                      {
 241                                          output.push( '</span>' );
 242                                          groupStarted = 0;
 243                                      }
 244  
 245                                      var itemObj = item.render( editor, output );
 246                                      index = toolbarObj.items.push( itemObj ) - 1;
 247  
 248                                      if ( index > 0 )
 249                                      {
 250                                          itemObj.previous = toolbarObj.items[ index - 1 ];
 251                                          itemObj.previous.next = itemObj;
 252                                      }
 253  
 254                                      itemObj.toolbar = toolbarObj;
 255                                      itemObj.onkey = itemKeystroke;
 256  
 257                                      /*

 258                                       * Fix for #3052:

 259                                       * Prevent JAWS from focusing the toolbar after document load.

 260                                       */
 261                                      itemObj.onfocus = function()
 262                                      {
 263                                          if ( !editor.toolbox.focusCommandExecuted )
 264                                              editor.focus();
 265                                      };
 266                                  }
 267                              }
 268  
 269                              if ( groupStarted )
 270                              {
 271                                  output.push( '</span>' );
 272                                  groupStarted = 0;
 273                              }
 274  
 275                              output.push( '<span class="cke_toolbar_end"></span></span>' );
 276                          }
 277  
 278                          output.push( '</div>' );
 279  
 280                          if ( editor.config.toolbarCanCollapse )
 281                          {
 282                              var collapserFn = CKEDITOR.tools.addFunction(
 283                                  function()
 284                                  {
 285                                      editor.execCommand( 'toolbarCollapse' );
 286                                  } );
 287  
 288                              editor.on( 'destroy', function () {
 289                                      CKEDITOR.tools.removeFunction( collapserFn );
 290                                  } );
 291  
 292                              var collapserId = 'cke_' + CKEDITOR.tools.getNextNumber();
 293  
 294                              editor.addCommand( 'toolbarCollapse',
 295                                  {
 296                                      exec : function( editor )
 297                                      {
 298                                          var collapser = CKEDITOR.document.getById( collapserId );
 299                                          var toolbox = collapser.getPrevious();
 300                                          var contents = editor.getThemeSpace( 'contents' );
 301                                          var toolboxContainer = toolbox.getParent();
 302                                          var contentHeight = parseInt( contents.$.style.height, 10 );
 303                                          var previousHeight = toolboxContainer.$.offsetHeight;
 304                                          var collapsed = !toolbox.isVisible();
 305  
 306                                          if ( !collapsed )
 307                                          {
 308                                              toolbox.hide();
 309                                              collapser.addClass( 'cke_toolbox_collapser_min' );
 310                                              collapser.setAttribute( 'title', editor.lang.toolbarExpand );
 311                                          }
 312                                          else
 313                                          {
 314                                              toolbox.show();
 315                                              collapser.removeClass( 'cke_toolbox_collapser_min' );
 316                                              collapser.setAttribute( 'title', editor.lang.toolbarCollapse );
 317                                          }
 318  
 319                                          // Update collapser symbol.

 320                                          collapser.getFirst().setText( collapsed ?
 321                                              '\u25B2' :        // BLACK UP-POINTING TRIANGLE
 322                                              '\u25C0' );        // BLACK LEFT-POINTING TRIANGLE

 323  
 324                                          var dy = toolboxContainer.$.offsetHeight - previousHeight;
 325                                          contents.setStyle( 'height', ( contentHeight - dy ) + 'px' );
 326  
 327                                          editor.fire( 'resize' );
 328                                      },
 329  
 330                                      modes : { wysiwyg : 1, source : 1 }
 331                                  } );
 332  
 333                              output.push( '<a title="' + ( expanded ? editor.lang.toolbarCollapse : editor.lang.toolbarExpand )
 334                                                        + '" id="' + collapserId + '" tabIndex="-1" class="cke_toolbox_collapser' );
 335  
 336                              if ( !expanded )
 337                                  output.push( ' cke_toolbox_collapser_min' );
 338  
 339                              output.push( '" onclick="CKEDITOR.tools.callFunction(' + collapserFn + ')">',
 340                                          '<span>&#9650;</span>',        // BLACK UP-POINTING TRIANGLE
 341                                          '</a>' );
 342                          }
 343  
 344                          event.data.html += output.join( '' );
 345                      }
 346                  });
 347  
 348              editor.addCommand( 'toolbarFocus', commands.toolbarFocus );
 349          }
 350      });
 351  })();
 352  
 353  /**

 354   * The UI element that renders a toolbar separator.

 355   * @type Object

 356   * @example

 357   */
 358  CKEDITOR.ui.separator =
 359  {
 360      render : function( editor, output )
 361      {
 362          output.push( '<span class="cke_separator" role="separator"></span>' );
 363          return {};
 364      }
 365  };
 366  
 367  /**

 368   * The "theme space" to which rendering the toolbar. For the default theme,

 369   * the recommended options are "top" and "bottom".

 370   * @type String

 371   * @default 'top'

 372   * @see CKEDITOR.config.theme

 373   * @example

 374   * config.toolbarLocation = 'bottom';

 375   */
 376  CKEDITOR.config.toolbarLocation = 'top';
 377  
 378  /**

 379   * The toolbar definition. It is an array of toolbars (strips),

 380   * each one being also an array, containing a list of UI items.

 381   * Note that this setting is composed by "toolbar_" added by the toolbar name,

 382   * which in this case is called "Basic". This second part of the setting name

 383   * can be anything. You must use this name in the

 384   * {@link CKEDITOR.config.toolbar} setting, so you instruct the editor which

 385   * toolbar_(name) setting to you.

 386   * @type Array

 387   * @example

 388   * // Defines a toolbar with only one strip containing the "Source" button, a

 389   * // separator and the "Bold" and "Italic" buttons.

 390   * <b>config.toolbar_Basic =

 391   * [

 392   *     [ 'Source', '-', 'Bold', 'Italic' ]

 393   * ]</b>;

 394   * config.toolbar = 'Basic';

 395   */
 396  CKEDITOR.config.toolbar_Basic =
 397  [
 398      ['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink','-','About']
 399  ];
 400  
 401  /**

 402   * This is the default toolbar definition used by the editor. It contains all

 403   * editor features.

 404   * @type Array

 405   * @default (see example)

 406   * @example

 407   * // This is actually the default value.

 408   * config.toolbar_Full =

 409   * [

 410   *     ['Source','-','Save','NewPage','Preview','-','Templates'],

 411   *     ['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print', 'SpellChecker', 'Scayt'],

 412   *     ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],

 413   *     ['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'],

 414   *     '/',

 415   *     ['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],

 416   *     ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote','CreateDiv'],

 417   *     ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],

 418   *     ['Link','Unlink','Anchor'],

 419   *     ['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],

 420   *     '/',

 421   *     ['Styles','Format','Font','FontSize'],

 422   *     ['TextColor','BGColor'],

 423   *     ['Maximize', 'ShowBlocks','-','About']

 424   * ];

 425   */
 426  CKEDITOR.config.toolbar_Full =
 427  [
 428      ['Source','-','Save','NewPage','Preview','-','Templates'],
 429      ['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print', 'SpellChecker', 'Scayt'],
 430      ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
 431      ['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'],
 432      '/',
 433      ['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
 434      ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote','CreateDiv'],
 435      ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
 436      ['BidiLtr', 'BidiRtl'],
 437      ['Link','Unlink','Anchor'],
 438      ['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
 439      '/',
 440      ['Styles','Format','Font','FontSize'],
 441      ['TextColor','BGColor'],
 442      ['Maximize', 'ShowBlocks','-','About']
 443  ];
 444  
 445  /**

 446   * The toolbox (alias toolbar) definition. It is a toolbar name or an array of

 447   * toolbars (strips), each one being also an array, containing a list of UI items.

 448   * @type Array|String

 449   * @default 'Full'

 450   * @example

 451   * // Defines a toolbar with only one strip containing the "Source" button, a

 452   * // separator and the "Bold" and "Italic" buttons.

 453   * config.toolbar =

 454   * [

 455   *     [ 'Source', '-', 'Bold', 'Italic' ]

 456   * ];

 457   * @example

 458   * // Load toolbar_Name where Name = Basic.

 459   * config.toolbar = 'Basic';

 460   */
 461  CKEDITOR.config.toolbar = 'Full';
 462  
 463  /**

 464   * Whether the toolbar can be collapsed by the user. If disabled, the collapser

 465   * button will not be displayed.

 466   * @type Boolean

 467   * @default true

 468   * @example

 469   * config.toolbarCanCollapse = false;

 470   */
 471  CKEDITOR.config.toolbarCanCollapse = true;
 472  
 473  /**

 474   * Whether the toolbar must start expanded when the editor is loaded.

 475   * @name CKEDITOR.config.toolbarStartupExpanded

 476   * @type Boolean

 477   * @default true

 478   * @example

 479   * config.toolbarStartupExpanded = false;

 480   */