sources/plugins/showborders/plugin.js

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