_source/plugins/showborders/plugin.js

   1 /*\r
   2 Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.\r
   3 For licensing, see LICENSE.html or http://ckeditor.com/license\r
   4 */\r
   5 \r
   6 /**\r
   7  * @fileOverview The "show border" plugin. The command display visible outline\r
   8  * border line around all table elements if table doesn't have a none-zero 'border' attribute specified.\r
   9  */\r
  10 \r
  11 (function()\r
  12 {\r
  13         var showBorderClassName = 'cke_show_border',\r
  14                 cssStyleText,\r
  15                 cssTemplate =\r
  16                 // TODO: For IE6, we don't have child selector support,\r
  17                 // where nested table cells could be incorrect.\r
  18                 ( CKEDITOR.env.ie6Compat ?\r
  19                   [\r
  20                         '.%1 table.%2,',\r
  21                          '.%1 table.%2 td, .%1 table.%2 th',\r
  22                          '{',\r
  23                                 'border : #d3d3d3 1px dotted',\r
  24                          '}'\r
  25                   ] :\r
  26                   [\r
  27                          '.%1 table.%2,',\r
  28                          '.%1 table.%2 > tr > td, .%1 table.%2 > tr > th,',\r
  29                          '.%1 table.%2 > tbody > tr > td, .%1 table.%2 > tbody > tr > th,',\r
  30                          '.%1 table.%2 > thead > tr > td, .%1 table.%2 > thead > tr > th,',\r
  31                          '.%1 table.%2 > tfoot > tr > td, .%1 table.%2 > tfoot > tr > th',\r
  32                          '{',\r
  33                                 'border : #d3d3d3 1px dotted',\r
  34                          '}'\r
  35                   ] ).join( '' );\r
  36 \r
  37         cssStyleText = cssTemplate.replace( /%2/g, showBorderClassName ).replace( /%1/g, 'cke_show_borders ' );\r
  38 \r
  39         var commandDefinition =\r
  40         {\r
  41                 preserveState : true,\r
  42                 editorFocus : false,\r
  43                 readOnly: 1,\r
  44 \r
  45                 exec : function ( editor )\r
  46                 {\r
  47                         this.toggleState();\r
  48                         this.refresh( editor );\r
  49                 },\r
  50 \r
  51                 refresh : function( editor )\r
  52                 {\r
  53                         if ( editor.document )\r
  54                         {\r
  55                                 var funcName = ( this.state == CKEDITOR.TRISTATE_ON ) ? 'addClass' : 'removeClass';\r
  56                                 editor.document.getBody()[ funcName ]( 'cke_show_borders' );\r
  57                         }\r
  58                 }\r
  59         };\r
  60 \r
  61         CKEDITOR.plugins.add( 'showborders',\r
  62         {\r
  63                 requires : [ 'wysiwygarea' ],\r
  64                 modes : { 'wysiwyg' : 1 },\r
  65 \r
  66                 init : function( editor )\r
  67                 {\r
  68 \r
  69                         var command = editor.addCommand( 'showborders', commandDefinition );\r
  70                         command.canUndo = false;\r
  71 \r
  72                         if ( editor.config.startupShowBorders !== false )\r
  73                                 command.setState( CKEDITOR.TRISTATE_ON );\r
  74 \r
  75                         editor.addCss( cssStyleText );\r
  76 \r
  77                         // Refresh the command on setData.\r
  78                         editor.on( 'mode', function()\r
  79                                 {\r
  80                                         if ( command.state != CKEDITOR.TRISTATE_DISABLED )\r
  81                                                 command.refresh( editor );\r
  82                                 }, null, null, 100 );\r
  83 \r
  84                         // Refresh the command on wysiwyg frame reloads.\r
  85                         editor.on( 'contentDom', function()\r
  86                                 {\r
  87                                         if ( command.state != CKEDITOR.TRISTATE_DISABLED )\r
  88                                                 command.refresh( editor );\r
  89                                 });\r
  90 \r
  91                         editor.on( 'removeFormatCleanup', function( evt )\r
  92                                 {\r
  93                                         var element = evt.data;\r
  94                                         if ( editor.getCommand( 'showborders' ).state == CKEDITOR.TRISTATE_ON &&\r
  95                                                 element.is( 'table' ) && ( !element.hasAttribute( 'border' ) || parseInt( element.getAttribute( 'border' ), 10 ) <= 0 ) )\r
  96                                                         element.addClass( showBorderClassName );\r
  97                                 });\r
  98                 },\r
  99 \r
 100                 afterInit : function( editor )\r
 101                 {\r
 102                         var dataProcessor = editor.dataProcessor,\r
 103                                 dataFilter = dataProcessor && dataProcessor.dataFilter,\r
 104                                 htmlFilter = dataProcessor && dataProcessor.htmlFilter;\r
 105 \r
 106                         if ( dataFilter )\r
 107                         {\r
 108                                 dataFilter.addRules(\r
 109                                         {\r
 110                                                 elements :\r
 111                                                 {\r
 112                                                         'table' : function( element )\r
 113                                                         {\r
 114                                                                 var attributes = element.attributes,\r
 115                                                                         cssClass = attributes[ 'class' ],\r
 116                                                                         border = parseInt( attributes.border, 10 );\r
 117 \r
 118                                                                 if ( !border || border <= 0 )\r
 119                                                                         attributes[ 'class' ] = ( cssClass || '' ) + ' ' + showBorderClassName;\r
 120                                                         }\r
 121                                                 }\r
 122                                         } );\r
 123                         }\r
 124 \r
 125                         if ( htmlFilter )\r
 126                         {\r
 127                                 htmlFilter.addRules(\r
 128                                 {\r
 129                                         elements :\r
 130                                         {\r
 131                                                 'table' : function( table )\r
 132                                                 {\r
 133                                                         var attributes = table.attributes,\r
 134                                                                 cssClass = attributes[ 'class' ];\r
 135 \r
 136                                                         cssClass && ( attributes[ 'class' ] =\r
 137                                                                       cssClass.replace( showBorderClassName, '' )\r
 138                                                                                       .replace( /\s{2}/, ' ' )\r
 139                                                                                                   .replace( /^\s+|\s+$/, '' ) );\r
 140                                                 }\r
 141                                         }\r
 142                                 } );\r
 143                         }\r
 144                 }\r
 145         });\r
 146 \r
 147         // Table dialog must be aware of it.\r
 148         CKEDITOR.on( 'dialogDefinition', function( ev )\r
 149         {\r
 150                 var dialogName = ev.data.name;\r
 151 \r
 152                 if ( dialogName == 'table' || dialogName == 'tableProperties' )\r
 153                 {\r
 154                         var dialogDefinition = ev.data.definition,\r
 155                                 infoTab = dialogDefinition.getContents( 'info' ),\r
 156                                 borderField = infoTab.get( 'txtBorder' ),\r
 157                                 originalCommit = borderField.commit;\r
 158 \r
 159                         borderField.commit = CKEDITOR.tools.override( originalCommit, function( org )\r
 160                         {\r
 161                                 return function( data, selectedTable )\r
 162                                         {\r
 163                                                 org.apply( this, arguments );\r
 164                                                 var value = parseInt( this.getValue(), 10 );\r
 165                                                 selectedTable[ ( !value || value <= 0 ) ? 'addClass' : 'removeClass' ]( showBorderClassName );\r
 166                                         };\r
 167                         } );\r
 168 \r
 169                         var advTab = dialogDefinition.getContents( 'advanced' ),\r
 170                                 classField = advTab && advTab.get( 'advCSSClasses' );\r
 171 \r
 172                         if ( classField )\r
 173                         {\r
 174                                 classField.setup = CKEDITOR.tools.override( classField.setup, function( originalSetup )\r
 175                                         {\r
 176                                                 return function()\r
 177                                                         {\r
 178                                                                 originalSetup.apply( this, arguments );\r
 179                                                                 this.setValue( this.getValue().replace( /cke_show_border/, '' ) );\r
 180                                                         };\r
 181                                         });\r
 182 \r
 183                                 classField.commit = CKEDITOR.tools.override( classField.commit, function( originalCommit )\r
 184                                         {\r
 185                                                 return function( data, element )\r
 186                                                         {\r
 187                                                                 originalCommit.apply( this, arguments );\r
 188 \r
 189                                                                 if ( !parseInt( element.getAttribute( 'border' ), 10 ) )\r
 190                                                                         element.addClass( 'cke_show_border' );\r
 191                                                         };\r
 192                                         });\r
 193                         }\r
 194                 }\r
 195         });\r
 196 \r
 197 } )();\r
 198 \r
 199 /**\r
 200  * Whether to automatically enable the "show borders" command when the editor loads.\r
 201  * (ShowBorders in FCKeditor)\r
 202  * @name CKEDITOR.config.startupShowBorders\r
 203  * @type Boolean\r
 204  * @default true\r
 205  * @example\r
 206  * config.startupShowBorders = false;\r
 207  */\r