[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 "show border" plugin. The command display visible outline

   8   * border line around all table elements if table doesn't have a none-zero 'border' attribute specified.

   9   */
  10  
  11  (function()
  12  {
  13      var showBorderClassName = 'cke_show_border',
  14          cssStyleText,
  15          cssTemplate =
  16          // TODO: For IE6, we don't have child selector support,

  17          // where nested table cells could be incorrect.

  18          ( CKEDITOR.env.ie6Compat ?
  19            [
  20              '.%1 table.%2,',
  21               '.%1 table.%2 td, .%1 table.%2 th,',
  22               '{',
  23                  'border : #d3d3d3 1px dotted',
  24               '}'
  25            ] :
  26            [
  27               '.%1 table.%2,',
  28               '.%1 table.%2 > tr > td, .%1 table.%2 > tr > th,',
  29               '.%1 table.%2 > tbody > tr > td, .%1 table.%2 > tbody > tr > th,',
  30               '.%1 table.%2 > thead > tr > td, .%1 table.%2 > thead > tr > th,',
  31               '.%1 table.%2 > tfoot > tr > td, .%1 table.%2 > tfoot > tr > th',
  32               '{',
  33                  'border : #d3d3d3 1px dotted',
  34               '}'
  35            ] ).join( '' );
  36  
  37      cssStyleText = cssTemplate.replace( /%2/g, showBorderClassName ).replace( /%1/g, 'cke_show_borders ' );
  38  
  39      var commandDefinition =
  40      {
  41          preserveState : true,
  42          editorFocus : false,
  43  
  44          exec : function ( editor )
  45          {
  46              this.toggleState();
  47              this.refresh( editor );
  48          },
  49  
  50          refresh : function( editor )
  51          {
  52              var funcName = ( this.state == CKEDITOR.TRISTATE_ON ) ? 'addClass' : 'removeClass';
  53              editor.document.getBody()[ funcName ]( 'cke_show_borders' );
  54          }
  55      };
  56  
  57      CKEDITOR.plugins.add( 'showborders',
  58      {
  59          requires : [ 'wysiwygarea' ],
  60          modes : { 'wysiwyg' : 1 },
  61  
  62          init : function( editor )
  63          {
  64  
  65              var command = editor.addCommand( 'showborders', commandDefinition );
  66              command.canUndo = false;
  67  
  68              if ( editor.config.startupShowBorders !== false )
  69                  command.setState( CKEDITOR.TRISTATE_ON );
  70  
  71              editor.addCss( cssStyleText );
  72  
  73              // Refresh the command on setData.

  74              editor.on( 'mode', function()
  75                  {
  76                      if ( command.state != CKEDITOR.TRISTATE_DISABLED )
  77                          command.refresh( editor );
  78                  }, null, null, 100 );
  79  
  80              // Refresh the command on wysiwyg frame reloads.

  81              editor.on( 'contentDom', function()
  82                  {
  83                      if ( command.state != CKEDITOR.TRISTATE_DISABLED )
  84                          command.refresh( editor );
  85                  });
  86  
  87              editor.on( 'removeFormatCleanup', function( evt )
  88                  {
  89                      var element = evt.data;
  90                      if ( editor.getCommand( 'showborders' ).state == CKEDITOR.TRISTATE_ON &&
  91                          element.is( 'table' ) && ( !element.hasAttribute( 'border' ) || parseInt( element.getAttribute( 'border' ), 10 ) <= 0 ) )
  92                              element.addClass( showBorderClassName );
  93                  });
  94          },
  95  
  96          afterInit : function( editor )
  97          {
  98              var dataProcessor = editor.dataProcessor,
  99                  dataFilter = dataProcessor && dataProcessor.dataFilter,
 100                  htmlFilter = dataProcessor && dataProcessor.htmlFilter;
 101  
 102              if ( dataFilter )
 103              {
 104                  dataFilter.addRules(
 105                      {
 106                          elements :
 107                          {
 108                              'table' : function( element )
 109                              {
 110                                  var attributes = element.attributes,
 111                                      cssClass = attributes[ 'class' ],
 112                                      border = parseInt( attributes.border, 10 );
 113  
 114                                  if ( !border || border <= 0 )
 115                                      attributes[ 'class' ] = ( cssClass || '' ) + ' ' + showBorderClassName;
 116                              }
 117                          }
 118                      } );
 119              }
 120  
 121              if ( htmlFilter )
 122              {
 123                  htmlFilter.addRules(
 124                  {
 125                      elements :
 126                      {
 127                          'table' : function( table )
 128                          {
 129                              var attributes = table.attributes,
 130                                  cssClass = attributes[ 'class' ];
 131  
 132                              cssClass && ( attributes[ 'class' ] =
 133                                            cssClass.replace( showBorderClassName, '' )
 134                                                    .replace( /\s{2}/, ' ' )
 135                                                    .replace( /^\s+|\s+$/, '' ) );
 136                          }
 137                      }
 138                  } );
 139              }
 140          }
 141      });
 142  
 143      // Table dialog must be aware of it.

 144      CKEDITOR.on( 'dialogDefinition', function( ev )
 145      {
 146          var dialogName = ev.data.name;
 147  
 148          if ( dialogName == 'table' || dialogName == 'tableProperties' )
 149          {
 150              var dialogDefinition = ev.data.definition,
 151                  infoTab = dialogDefinition.getContents( 'info' ),
 152                  borderField = infoTab.get( 'txtBorder' ),
 153                  originalCommit = borderField.commit;
 154  
 155              borderField.commit = CKEDITOR.tools.override( originalCommit, function( org )
 156              {
 157                  return function( data, selectedTable )
 158                      {
 159                          org.apply( this, arguments );
 160                          var value = parseInt( this.getValue(), 10 );
 161                          selectedTable[ ( !value || value <= 0 ) ? 'addClass' : 'removeClass' ]( showBorderClassName );
 162                      };
 163              } );
 164  
 165              var advTab = dialogDefinition.getContents( 'advanced' ),
 166                  classField = advTab && advTab.get( 'advCSSClasses' );
 167  
 168              if ( classField )
 169              {
 170                  classField.setup = CKEDITOR.tools.override( classField.setup, function( originalSetup )
 171                      {
 172                          return function()
 173                              {
 174                                  originalSetup.apply( this, arguments );
 175                                  this.setValue( this.getValue().replace( /cke_show_border/, '' ) );
 176                              };
 177                      });
 178  
 179                  classField.commit = CKEDITOR.tools.override( classField.commit, function( originalCommit )
 180                      {
 181                          return function( data, element )
 182                              {
 183                                  originalCommit.apply( this, arguments );
 184  
 185                                  if ( !parseInt( element.getAttribute( 'border' ), 10 ) )
 186                                      element.addClass( 'cke_show_border' );
 187                              };
 188                      });
 189              }
 190          }
 191      });
 192  
 193  } )();
 194  
 195  /**

 196   * Whether to automatically enable the "show borders" command when the editor loads.

 197   * @type Boolean

 198   * @default true

 199   * @example

 200   * config.startupShowBorders = false;

 201   */