_source/plugins/showborders/plugin.js

   1 /*
   2 Copyright (c) 2003-2011, 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                 readOnly: 1,
  44
  45                 exec : function ( editor )
  46                 {
  47                         this.toggleState();
  48                         this.refresh( editor );
  49                 },
  50
  51                 refresh : function( editor )
  52                 {
  53                         if ( editor.document )
  54                         {
  55                                 var funcName = ( this.state == CKEDITOR.TRISTATE_ON ) ? 'addClass' : 'removeClass';
  56                                 editor.document.getBody()[ funcName ]( 'cke_show_borders' );
  57                         }
  58                 }
  59         };
  60
  61         CKEDITOR.plugins.add( 'showborders',
  62         {
  63                 requires : [ 'wysiwygarea' ],
  64                 modes : { 'wysiwyg' : 1 },
  65
  66                 init : function( editor )
  67                 {
  68
  69                         var command = editor.addCommand( 'showborders', commandDefinition );
  70                         command.canUndo = false;
  71
  72                         if ( editor.config.startupShowBorders !== false )
  73                                 command.setState( CKEDITOR.TRISTATE_ON );
  74
  75                         editor.addCss( cssStyleText );
  76
  77                         // Refresh the command on setData.
  78                         editor.on( 'mode', function()
  79                                 {
  80                                         if ( command.state != CKEDITOR.TRISTATE_DISABLED )
  81                                                 command.refresh( editor );
  82                                 }, null, null, 100 );
  83
  84                         // Refresh the command on wysiwyg frame reloads.
  85                         editor.on( 'contentDom', function()
  86                                 {
  87                                         if ( command.state != CKEDITOR.TRISTATE_DISABLED )
  88                                                 command.refresh( editor );
  89                                 });
  90
  91                         editor.on( 'removeFormatCleanup', function( evt )
  92                                 {
  93                                         var element = evt.data;
  94                                         if ( editor.getCommand( 'showborders' ).state == CKEDITOR.TRISTATE_ON &&
  95                                                 element.is( 'table' ) && ( !element.hasAttribute( 'border' ) || parseInt( element.getAttribute( 'border' ), 10 ) <= 0 ) )
  96                                                         element.addClass( showBorderClassName );
  97                                 });
  98                 },
  99
 100                 afterInit : function( editor )
 101                 {
 102                         var dataProcessor = editor.dataProcessor,
 103                                 dataFilter = dataProcessor && dataProcessor.dataFilter,
 104                                 htmlFilter = dataProcessor && dataProcessor.htmlFilter;
 105
 106                         if ( dataFilter )
 107                         {
 108                                 dataFilter.addRules(
 109                                         {
 110                                                 elements :
 111                                                 {
 112                                                         'table' : function( element )
 113                                                         {
 114                                                                 var attributes = element.attributes,
 115                                                                         cssClass = attributes[ 'class' ],
 116                                                                         border = parseInt( attributes.border, 10 );
 117
 118                                                                 if ( !border || border <= 0 )
 119                                                                         attributes[ 'class' ] = ( cssClass || '' ) + ' ' + showBorderClassName;
 120                                                         }
 121                                                 }
 122                                         } );
 123                         }
 124
 125                         if ( htmlFilter )
 126                         {
 127                                 htmlFilter.addRules(
 128                                 {
 129                                         elements :
 130                                         {
 131                                                 'table' : function( table )
 132                                                 {
 133                                                         var attributes = table.attributes,
 134                                                                 cssClass = attributes[ 'class' ];
 135
 136                                                         cssClass && ( attributes[ 'class' ] =
 137                                                                       cssClass.replace( showBorderClassName, '' )
 138                                                                                       .replace( /\s{2}/, ' ' )
 139                                                                                                   .replace( /^\s+|\s+$/, '' ) );
 140                                                 }
 141                                         }
 142                                 } );
 143                         }
 144                 }
 145         });
 146
 147         // Table dialog must be aware of it.
 148         CKEDITOR.on( 'dialogDefinition', function( ev )
 149         {
 150                 var dialogName = ev.data.name;
 151
 152                 if ( dialogName == 'table' || dialogName == 'tableProperties' )
 153                 {
 154                         var dialogDefinition = ev.data.definition,
 155                                 infoTab = dialogDefinition.getContents( 'info' ),
 156                                 borderField = infoTab.get( 'txtBorder' ),
 157                                 originalCommit = borderField.commit;
 158
 159                         borderField.commit = CKEDITOR.tools.override( originalCommit, function( org )
 160                         {
 161                                 return function( data, selectedTable )
 162                                         {
 163                                                 org.apply( this, arguments );
 164                                                 var value = parseInt( this.getValue(), 10 );
 165                                                 selectedTable[ ( !value || value <= 0 ) ? 'addClass' : 'removeClass' ]( showBorderClassName );
 166                                         };
 167                         } );
 168
 169                         var advTab = dialogDefinition.getContents( 'advanced' ),
 170                                 classField = advTab && advTab.get( 'advCSSClasses' );
 171
 172                         if ( classField )
 173                         {
 174                                 classField.setup = CKEDITOR.tools.override( classField.setup, function( originalSetup )
 175                                         {
 176                                                 return function()
 177                                                         {
 178                                                                 originalSetup.apply( this, arguments );
 179                                                                 this.setValue( this.getValue().replace( /cke_show_border/, '' ) );
 180                                                         };
 181                                         });
 182
 183                                 classField.commit = CKEDITOR.tools.override( classField.commit, function( originalCommit )
 184                                         {
 185                                                 return function( data, element )
 186                                                         {
 187                                                                 originalCommit.apply( this, arguments );
 188
 189                                                                 if ( !parseInt( element.getAttribute( 'border' ), 10 ) )
 190                                                                         element.addClass( 'cke_show_border' );
 191                                                         };
 192                                         });
 193                         }
 194                 }
 195         });
 196
 197 } )();
 198
 199 /**
 200  * Whether to automatically enable the "show borders" command when the editor loads.
 201  * (ShowBorders in FCKeditor)
 202  * @name CKEDITOR.config.startupShowBorders
 203  * @type Boolean
 204  * @default true
 205  * @example
 206  * config.startupShowBorders = false;
 207  */