Ticket #10021: table.js

File table.js, 27.2 KB (added by Stephen, 4 years ago)

html 5 version of table plug in

Line 
1/**
2 * @license Copyright (c) 2003-2014, CKSource - Frederico Knabben. All rights reserved.
3 * For licensing, see LICENSE.md or http://ckeditor.com/license
4 */
5
6( function() {
7        var defaultToPixel = CKEDITOR.tools.cssLength;
8
9        var commitValue = function( data ) {
10                        var id = this.id;
11                        if ( !data.info )
12                                data.info = {};
13                        data.info[ id ] = this.getValue();
14                };
15
16        function tableColumns( table ) {
17                var cols = 0,
18                        maxCols = 0;
19                for ( var i = 0, row, rows = table.$.rows.length; i < rows; i++ ) {
20                        row = table.$.rows[ i ], cols = 0;
21                        for ( var j = 0, cell, cells = row.cells.length; j < cells; j++ ) {
22                                cell = row.cells[ j ];
23                                cols += cell.colSpan;
24                        }
25
26                        cols > maxCols && ( maxCols = cols );
27                }
28
29                return maxCols;
30        }
31
32
33        // Whole-positive-integer validator.
34        function validatorNum( msg ) {
35                return function() {
36                        var value = this.getValue(),
37                                pass = !!( CKEDITOR.dialog.validate.integer()( value ) && value > 0 );
38
39                        if ( !pass ) {
40                                alert( msg );
41                                this.select();
42                        }
43
44                        return pass;
45                };
46        }
47
48        function tableDialog( editor, command ) {
49                var makeElement = function( name ) {
50                                return new CKEDITOR.dom.element( name, editor.document );
51                        };
52
53                var editable = editor.editable();
54
55                var dialogadvtab = editor.plugins.dialogadvtab;
56
57                return {
58                        title: editor.lang.table.title,
59                        minWidth: 310,
60                        minHeight: CKEDITOR.env.ie ? 310 : 280,
61
62                        onLoad: function() {
63                                var dialog = this;
64
65                                var styles = dialog.getContentElement( 'advanced', 'advStyles' );
66
67                                if ( styles ) {
68                                        styles.on( 'change', function( evt ) {
69                                                // Synchronize width value.
70                                                var width = this.getStyle( 'width', '' ),
71                                                        txtWidth = dialog.getContentElement( 'info', 'txtWidth' );
72
73                                                txtWidth && txtWidth.setValue( width, true );
74
75                                                // Synchronize height value.
76                                                var height = this.getStyle( 'height', '' ),
77                                                        txtHeight = dialog.getContentElement( 'info', 'txtHeight' );
78
79                                                txtHeight && txtHeight.setValue( height, true );
80                                        } );
81                                }
82                        },
83
84                        onShow: function() {
85                                // Detect if there's a selected table.
86                                var selection = editor.getSelection(),
87                                        ranges = selection.getRanges(),
88                                        table;
89
90                                var rowsInput = this.getContentElement( 'info', 'txtRows' ),
91                                        colsInput = this.getContentElement( 'info', 'txtCols' ),
92                                        widthInput = this.getContentElement( 'info', 'txtWidth' ),
93                                        heightInput = this.getContentElement( 'info', 'txtHeight' );
94
95                                if ( command == 'tableProperties' ) {
96                                        var selected = selection.getSelectedElement();
97                                        if ( selected && selected.is( 'table' ) )
98                                                table = selected;
99                                        else if ( ranges.length > 0 ) {
100                                                // Webkit could report the following range on cell selection (#4948):
101                                                // <table><tr><td>[&nbsp;</td></tr></table>]
102                                                if ( CKEDITOR.env.webkit )
103                                                        ranges[ 0 ].shrink( CKEDITOR.NODE_ELEMENT );
104
105                                                table = editor.elementPath( ranges[ 0 ].getCommonAncestor( true ) ).contains( 'table', 1 );
106                                        }
107
108                                        // Save a reference to the selected table, and push a new set of default values.
109                                        this._.selectedElement = table;
110                                }
111
112                                // Enable or disable the row, cols, width fields.
113                                if ( table ) {
114                                        this.setupContent( table );
115                                        rowsInput && rowsInput.disable();
116                                        colsInput && colsInput.disable();
117                                } else {
118                                        rowsInput && rowsInput.enable();
119                                        colsInput && colsInput.enable();
120                                }
121
122                                // Call the onChange method for the widht and height fields so
123                                // they get reflected into the Advanced tab.
124                                widthInput && widthInput.onChange();
125                                heightInput && heightInput.onChange();
126                        },
127                        onOk: function() {
128                                var selection = editor.getSelection(),
129                                        bms = this._.selectedElement && selection.createBookmarks();
130
131                                var table = this._.selectedElement || makeElement( 'table' ),
132                                        me = this,
133                                        data = {};
134
135                                this.commitContent( data, table );
136
137                                if ( data.info ) {
138                                        var info = data.info;
139
140                                        // Generate the rows and cols.
141                                        if ( !this._.selectedElement ) {
142                                                var tbody = table.append( makeElement( 'tbody' ) ),
143                                                        rows = parseInt( info.txtRows, 10 ) || 0,
144                                                        cols = parseInt( info.txtCols, 10 ) || 0;
145
146                                                for ( var i = 0; i < rows; i++ ) {
147                                                        var row = tbody.append( makeElement( 'tr' ) );
148                                                        for ( var j = 0; j < cols; j++ ) {
149                                                                var cell = row.append( makeElement( 'td' ) );
150                                                                cell.appendBogus();
151                                                        }
152                                                }
153                                        }
154
155                                        // Modify the table headers. Depends on having rows and cols generated
156                                        // correctly so it can't be done in commit functions.
157
158                                        // Should we make a <thead>?
159                                        var headers = info.selHeaders;
160                                        if ( !table.$.tHead && ( headers == 'row' || headers == 'both' ) ) {
161                                                var thead = new CKEDITOR.dom.element( table.$.createTHead() );
162                                                tbody = table.getElementsByTag( 'tbody' ).getItem( 0 );
163                                                var theRow = tbody.getElementsByTag( 'tr' ).getItem( 0 );
164
165                                                // Change TD to TH:
166                                                for ( i = 0; i < theRow.getChildCount(); i++ ) {
167                                                        var th = theRow.getChild( i );
168                                                        // Skip bookmark nodes. (#6155)
169                                                        if ( th.type == CKEDITOR.NODE_ELEMENT && !th.data( 'cke-bookmark' ) ) {
170                                                                th.renameNode( 'th' );
171                                                                th.setAttribute( 'scope', 'col' );
172                                                        }
173                                                }
174                                                thead.append( theRow.remove() );
175                                        }
176
177                                        if ( table.$.tHead !== null && !( headers == 'row' || headers == 'both' ) ) {
178                                                // Move the row out of the THead and put it in the TBody:
179                                                thead = new CKEDITOR.dom.element( table.$.tHead );
180                                                tbody = table.getElementsByTag( 'tbody' ).getItem( 0 );
181
182                                                var previousFirstRow = tbody.getFirst();
183                                                while ( thead.getChildCount() > 0 ) {
184                                                        theRow = thead.getFirst();
185                                                        for ( i = 0; i < theRow.getChildCount(); i++ ) {
186                                                                var newCell = theRow.getChild( i );
187                                                                if ( newCell.type == CKEDITOR.NODE_ELEMENT ) {
188                                                                        newCell.renameNode( 'td' );
189                                                                        newCell.removeAttribute( 'scope' );
190                                                                }
191                                                        }
192                                                        theRow.insertBefore( previousFirstRow );
193                                                }
194                                                thead.remove();
195                                        }
196
197                                        // Should we make all first cells in a row TH?
198                                        if ( !this.hasColumnHeaders && ( headers == 'col' || headers == 'both' ) ) {
199                                                for ( row = 0; row < table.$.rows.length; row++ ) {
200                                                        newCell = new CKEDITOR.dom.element( table.$.rows[ row ].cells[ 0 ] );
201                                                        newCell.renameNode( 'th' );
202                                                        newCell.setAttribute( 'scope', 'row' );
203                                                }
204                                        }
205
206                                        // Should we make all first TH-cells in a row make TD? If 'yes' we do it the other way round :-)
207                                        if ( ( this.hasColumnHeaders ) && !( headers == 'col' || headers == 'both' ) ) {
208                                                for ( i = 0; i < table.$.rows.length; i++ ) {
209                                                        row = new CKEDITOR.dom.element( table.$.rows[ i ] );
210                                                        if ( row.getParent().getName() == 'tbody' ) {
211                                                                newCell = new CKEDITOR.dom.element( row.$.cells[ 0 ] );
212                                                                newCell.renameNode( 'td' );
213                                                                newCell.removeAttribute( 'scope' );
214                                                        }
215                                                }
216                                        }
217
218                                        // Set the width and height.
219                                        info.txtHeight ? table.setStyle( 'height', info.txtHeight ) : table.removeStyle( 'height' );
220                                        info.txtWidth ? table.setStyle( 'width', info.txtWidth ) : table.removeStyle( 'width' );
221
222                                        if ( !table.getAttribute( 'style' ) )
223                                                table.removeAttribute( 'style' );
224                                }
225                               
226        //////////////////////////// Patched By Stephen ////////////////////////////
227
228                                for ( row = 0; row < table.$.rows.length; row++ ) { 
229                                  for (index = 0, len = table.$.rows[ row ].cells.length; index < len; ++index) {
230                                          newCell = new CKEDITOR.dom.element( table.$.rows[ row ].cells[ index ] );
231                                          if(table.getStyle('border-width')){
232                                            newCell.setStyle('border-width', table.getStyle('border-width'));
233                                          }
234                                    else{
235                                            newCell.removeStyle('border');
236                                          }             
237                                    if(table.getAttribute('cellPadding')>0){
238                                      newCell.setStyle('padding', table.getAttribute('cellPadding')+'px');
239                                    }
240                                          else{
241                                            newCell.removeStyle('padding');
242                                          }
243                                          if(table.getStyle('border-color')){
244                                            newCell.setStyle('border-color', table.getStyle('border-color'));
245                                          }
246                                          else{
247                                            newCell.removeStyle('border-color');
248                                          }
249                                          if(table.getStyle('border-style')){
250                                            newCell.setStyle('border-style', table.getStyle('border-style')); 
251                                          }
252                                          else{
253                                            newCell.removeStyle('border-style');
254                                          }
255                                        }
256                                }
257        table.removeAttribute('cellPadding');
258        //////////////////////////// Patched By Stephen ////////////////////////////
259
260                                // Insert the table element if we're creating one.
261                                if ( !this._.selectedElement ) {
262                                        editor.insertElement( table );
263                                        // Override the default cursor position after insertElement to place
264                                        // cursor inside the first cell (#7959), IE needs a while.
265                                        setTimeout( function() {
266                                                var firstCell = new CKEDITOR.dom.element( table.$.rows[ 0 ].cells[ 0 ] );
267                                                var range = editor.createRange();
268                                                range.moveToPosition( firstCell, CKEDITOR.POSITION_AFTER_START );
269                                                range.select();
270                                        }, 0 );
271                                }
272                                // Properly restore the selection, (#4822) but don't break
273                                // because of this, e.g. updated table caption.
274                                else
275                                        try {
276                                        selection.selectBookmarks( bms );
277                                } catch ( er ) {}
278                        },
279                        contents: [
280                                {
281                                id: 'info',
282                                label: editor.lang.table.title,
283                                elements: [
284                                        {
285                                        type: 'hbox',
286                                        widths: [ null, null ],
287                                        styles: [ 'vertical-align:top' ],
288                                        children: [
289                                                {
290                                                type: 'vbox',
291                                                padding: 0,
292                                                children: [
293                                                        {
294                                                        type: 'text',
295                                                        id: 'txtRows',
296                                                        'default': 3,
297                                                        label: editor.lang.table.rows,
298                                                        required: true,
299                                                        controlStyle: 'width:5em',
300                                                        validate: validatorNum( editor.lang.table.invalidRows ),
301                                                        setup: function( selectedElement ) {
302                                                                this.setValue( selectedElement.$.rows.length );
303                                                        },
304                                                        commit: commitValue
305                                                },
306                                                        {
307                                                        type: 'text',
308                                                        id: 'txtCols',
309                                                        'default': 2,
310                                                        label: editor.lang.table.columns,
311                                                        required: true,
312                                                        controlStyle: 'width:5em',
313                                                        validate: validatorNum( editor.lang.table.invalidCols ),
314                                                        setup: function( selectedTable ) {
315                                                                this.setValue( tableColumns( selectedTable ) );
316                                                        },
317                                                        commit: commitValue
318                                                },
319                                                        {
320                                                        type: 'html',
321                                                        html: '&nbsp;'
322                                                },
323                                                        {
324                                                        type: 'select',
325                                                        id: 'selHeaders',
326                                                        requiredContent: 'th',
327                                                        'default': '',
328                                                        label: editor.lang.table.headers,
329                                                        items: [
330                                                                [ editor.lang.table.headersNone, '' ],
331                                                                [ editor.lang.table.headersRow, 'row' ],
332                                                                [ editor.lang.table.headersColumn, 'col' ],
333                                                                [ editor.lang.table.headersBoth, 'both' ]
334                                                                ],
335                                                        setup: function( selectedTable ) {
336                                                                // Fill in the headers field.
337                                                                var dialog = this.getDialog();
338                                                                dialog.hasColumnHeaders = true;
339
340                                                                // Check if all the first cells in every row are TH
341                                                                for ( var row = 0; row < selectedTable.$.rows.length; row++ ) {
342                                                                        // If just one cell isn't a TH then it isn't a header column
343                                                                        var headCell = selectedTable.$.rows[ row ].cells[ 0 ];
344                                                                        if ( headCell && headCell.nodeName.toLowerCase() != 'th' ) {
345                                                                                dialog.hasColumnHeaders = false;
346                                                                                break;
347                                                                        }
348                                                                }
349
350                                                                // Check if the table contains <thead>.
351                                                                if ( ( selectedTable.$.tHead !== null ) )
352                                                                        this.setValue( dialog.hasColumnHeaders ? 'both' : 'row' );
353                                                                else
354                                                                        this.setValue( dialog.hasColumnHeaders ? 'col' : '' );
355                                                        },
356                                                        commit: commitValue
357                                                },
358                                                        {
359                                                        type: 'text',
360                                                        id: 'txtBorder',
361                                                        requiredContent: 'table[border]',
362                                                        // Avoid setting border which will then disappear.
363                                                        'default': editor.filter.check( 'table[border]' ) ? 1 : 0,
364                                                        label: editor.lang.table.border,
365                                                        controlStyle: 'width:3em',
366                                                        validate: CKEDITOR.dialog.validate[ 'number' ]( editor.lang.table.invalidBorder ),
367                                                        setup: function( selectedTable ) {
368                                                          ////////////////////////////// Patched By Stephen //////////////////////////////////
369                                                                //this.setValue( selectedTable.getAttribute( 'border' ) || '' );
370                                                                if(selectedTable.getStyle('border-width')){
371                                                                  this.setValue(selectedTable.getStyle('border-width').replace('px', ''));
372                                                                }
373                                                                else if(selectedTable.getAttribute('border')){
374                                                                  this.setValue(selectedTable.getAttribute('border'));
375                                                                  selectedTable.setStyle('border-style', 'solid'); 
376                                                                }
377                                                                else{
378                                                                  this.setValue('');
379                                                                }
380                                                                ////////////////////////////// Patched By Stephen //////////////////////////////////
381                                                        },
382                                                        commit: function( data, selectedTable ) {
383                                                          ////////////////////////////// Patched By Stephen //////////////////////////////////
384                                                                //if ( this.getValue() ) // removed
385                                                                //      selectedTable.setAttribute( 'border', this.getValue() ); // removed
386                                                                //else // removed
387                                                                //      selectedTable.removeAttribute( 'border' ); // removed
388                                              if(this.getValue()){
389                                                if(this.getValue()>0){
390                                                        selectedTable.setStyle('border-width', this.getValue()+'px');
391                                                }
392                                                else{
393                                                  selectedTable.removeStyle('border');
394                                                }
395                                              }
396                                              else{
397                                                selectedTable.removeStyle('border');
398                                              } 
399                                              selectedTable.removeAttribute('border');
400                                                          ////////////////////////////// Patched By Stephen //////////////////////////////////
401                                                        }
402                                                },
403
404
405
406              ////////////////////////////// Patched By Stephen //////////////////////////////////
407                                                        {
408                                                        id: 'cmbBorderstyle',
409                                                        type: 'select',
410                                                        requiredContent: 'table{border-style}',
411                                                        'default': 'solid',
412                                                        label: editor.lang.common.borderstyle,
413                                                        items: [
414                                                                [ editor.lang.common.notSet, '' ],
415                                                                [ editor.lang.common.borderstyleNone, 'none' ],
416                                                                [ editor.lang.common.borderstyleSolid, 'solid' ],
417                                                                [ editor.lang.common.borderstyleDotted, 'dotted' ],
418                                                                [ editor.lang.common.borderstyleDashed, 'dashed' ],
419                                                                [ editor.lang.common.borderstyleHidden, 'hidden' ],
420                                                                [ editor.lang.common.borderstyleDouble, 'double' ],
421                                                                [ editor.lang.common.borderstyleGroove, 'groove' ],
422                                                                [ editor.lang.common.borderstyleRidge, 'ridge' ],
423                                                                [ editor.lang.common.borderstyleInset, 'inset' ],
424                                                                [ editor.lang.common.borderstyleOutset, 'outset' ],
425                                                                [ editor.lang.common.borderstyleInitial, 'initial' ],
426                                                                [ editor.lang.common.borderstyleInherit, 'inherit' ]
427                                                                ],
428                                                        setup: function( selectedTable ) {
429                                                          if(this.getValue(selectedTable.getStyle('border-style'))){
430                                                            this.setValue(selectedTable.getStyle('border-style'));
431                                                          }
432                                                          //else{
433                                                          //  this.setValue('solid');
434                                                          //}
435                                                        },
436                                                        commit: function( data, selectedTable ) {
437                                                          if (this.getValue()){
438                                                            selectedTable.setStyle('border-style', this.getValue());
439                                                          }
440                                                          else {
441                                                            selectedTable.setStyle('border-style', '');
442                                                          }
443                                                        }
444                                                }, 
445                                          ////////////////////////////// Patched By Stephen //////////////////////////////////
446
447
448
449
450                                                  ////////////////////////////// Patched By Stephen //////////////////////////////////
451                                            {
452                                                        type: 'text',
453                                                        id: 'txtBordercolor',
454                                                        requiredContent: 'table',
455                                                        controlStyle: 'width:6em',
456                                                        'default': '#cccccc',
457                                                        label: editor.lang.table.tablebordercolor,
458                                                        setup: function( selectedTable ) {
459                                                                if(selectedTable.getStyle('border-color')){
460                                                                  this.setValue(selectedTable.getStyle('border-color'));
461                                                                }
462                                                                else if(selectedTable.getAttribute('bordercolor')){
463                                                                  this.setValue(selectedTable.getAttribute('bordercolor'));
464                                                                  selectedTable.removeAttribute('bordercolor');
465                                                                }
466                                                                else{
467                                                                  this.setValue(''); 
468                                                                }
469                                                        },
470                                                        commit: function( data, selectedTable ) {
471                                              if(this.getValue()){
472                                                      selectedTable.setStyle('border-color', this.getValue()); 
473                                              }
474                                              else{
475                                                selectedTable.removeStyle('border-color');
476                                              } 
477                                                        }
478                                                },
479                                                ////////////////////////////// Patched By Stephen //////////////////////////////////
480
481
482
483
484
485
486
487
488                                                        {
489                                                        id: 'cmbAlign',
490                                                        type: 'select',
491                                                        requiredContent: 'table[align]',
492                                                        ////////////////////////////// Patched By Stephen //////////////////////////////////
493                                                        //'default': '',
494                                                        'default': 'center',
495                                                        ////////////////////////////// Patched By Stephen //////////////////////////////////
496                                                        label: editor.lang.common.align,
497                                                        items: [
498                                                                [ editor.lang.common.notSet, '' ],
499                                                                [ editor.lang.common.alignLeft, 'left' ],
500                                                                [ editor.lang.common.alignCenter, 'center' ],
501                                                                [ editor.lang.common.alignRight, 'right' ]
502                                                                ],
503                                                        setup: function( selectedTable ) {
504                                                          ////////////////////////////// Patched By Stephen //////////////////////////////////
505                                                                //this.setValue( selectedTable.getAttribute( 'align' ) || '' );
506                                                                if(selectedTable.getStyle('float')){
507                                                                  this.setValue(selectedTable.getStyle('float'));
508                                                                }
509                                                                else if(selectedTable.getStyle('margin-left')){
510                                                                  this.setValue('center');
511                                                                }
512                                                                else if(selectedTable.getAttribute('align')){
513                                                                  this.setValue(selectedTable.getAttribute('align'));
514                                                                }
515                                                                else{
516                                                                  this.setValue('');
517                                                                }
518                                                                ////////////////////////////// Patched By Stephen //////////////////////////////////
519                                                        },
520                                                        commit: function( data, selectedTable ) {
521                                                          ////////////////////////////// Patched By Stephen //////////////////////////////////
522                                                                //if ( this.getValue() )
523                                                                //      selectedTable.setAttribute( 'align', this.getValue() );
524                                                                //else
525                                                                //      selectedTable.removeAttribute( 'align' );
526                                                                if(this.getValue()){
527                                                                  if(this.getValue()=='left'){
528                                                                    selectedTable.setStyle('float', 'left');
529                                                                    selectedTable.removeStyle('margin-left');
530                                                                    selectedTable.removeStyle('margin-right');
531                                                                  }
532                                                                  else if(this.getValue()=='right'){
533                                                                    selectedTable.setStyle('float', 'right');
534                                                                    selectedTable.removeStyle('margin-left');
535                                                                    selectedTable.removeStyle('margin-right');
536                                                                  }
537                                                                  else if(this.getValue()=='center'){
538                                                                    selectedTable.setStyle('margin-left', 'auto');
539                                                                    selectedTable.setStyle('margin-right', 'auto');
540                                                                    selectedTable.removeStyle('float');
541                                                                  }
542                                                                }
543                                                                else{
544                                                                  selectedTable.removeStyle('margin-left');
545                                                                  selectedTable.removeStyle('margin-right');
546                                                                  selectedTable.removeStyle('float');
547                                                                }
548                                                                selectedTable.removeAttribute('align'); 
549                                                                ////////////////////////////// Patched By Stephen //////////////////////////////////
550                                                        }
551                                                }
552                                                ]
553                                        },
554                                                {
555                                                type: 'vbox',
556                                                padding: 0,
557                                                children: [
558                                                        {
559                                                        type: 'hbox',
560                                                        widths: [ '5em' ],
561                                                        children: [
562                                                                {
563                                                                type: 'text',
564                                                                id: 'txtWidth',
565                                                                requiredContent: 'table{width}',
566                                                                controlStyle: 'width:5em',
567                                                                label: editor.lang.common.width,
568                                                                title: editor.lang.common.cssLengthTooltip,
569                                                                // Smarter default table width. (#9600)
570                                                                'default': editor.filter.check( 'table{width}' ) ? ( editable.getSize( 'width' ) < 500 ? '100%' : 500 ) : 0,
571                                                                getValue: defaultToPixel,
572                                                                validate: CKEDITOR.dialog.validate.cssLength( editor.lang.common.invalidCssLength.replace( '%1', editor.lang.common.width ) ),
573                                                                onChange: function() {
574                                                                        var styles = this.getDialog().getContentElement( 'advanced', 'advStyles' );
575                                                                        styles && styles.updateStyle( 'width', this.getValue() );
576                                                                },
577                                                                setup: function( selectedTable ) {
578                                                                        var val = selectedTable.getStyle( 'width' );
579                                                                        this.setValue( val );
580                                                                },
581                                                                commit: commitValue
582                                                        }
583                                                        ]
584                                                },
585                                                        {
586                                                        type: 'hbox',
587                                                        widths: [ '5em' ],
588                                                        children: [
589                                                                {
590                                                                type: 'text',
591                                                                id: 'txtHeight',
592                                                                requiredContent: 'table{height}',
593                                                                controlStyle: 'width:5em',
594                                                                label: editor.lang.common.height,
595                                                                title: editor.lang.common.cssLengthTooltip,
596                                                                'default': '',
597                                                                getValue: defaultToPixel,
598                                                                validate: CKEDITOR.dialog.validate.cssLength( editor.lang.common.invalidCssLength.replace( '%1', editor.lang.common.height ) ),
599                                                                onChange: function() {
600                                                                        var styles = this.getDialog().getContentElement( 'advanced', 'advStyles' );
601                                                                        styles && styles.updateStyle( 'height', this.getValue() );
602                                                                },
603
604                                                                setup: function( selectedTable ) {
605                                                                        var val = selectedTable.getStyle( 'height' );
606                                                                        val && this.setValue( val );
607                                                                },
608                                                                commit: commitValue
609                                                        }
610                                                        ]
611                                                },
612                                                        {
613                                                        type: 'html',
614                                                        html: '&nbsp;'
615                                                },
616                                                        {
617                                                        type: 'text',
618                                                        id: 'txtCellSpace',
619                                                        requiredContent: 'table[cellspacing]',
620                                                        controlStyle: 'width:3em',
621                                                        label: editor.lang.table.cellSpace,
622                                                        ////////////////////////////// Patched By Stephen //////////////////////////////////
623                                                        //'default': editor.filter.check( 'table[cellspacing]' ) ? 1 : 0,
624                                                        'default': editor.filter.check( 'table[cellspacing]' ) ? 0 : 0,
625                                                        ////////////////////////////// Patched By Stephen //////////////////////////////////
626                                                        validate: CKEDITOR.dialog.validate.number( editor.lang.table.invalidCellSpacing ),
627                                                        setup: function( selectedTable ) {
628                                                          ////////////////////////////// Patched By Stephen //////////////////////////////////
629                                                                //this.setValue( selectedTable.getAttribute( 'cellSpacing' ) || '' );
630                                                                if(selectedTable.getStyle('border-spacing')){
631                                                                  this.setValue(selectedTable.getStyle('border-spacing').replace('px','')); 
632                                                                }
633                                                                else if(selectedTable.getAttribute('cellspacing')){
634                                                                  this.setValue(selectedTable.getAttribute('cellspacing'));
635                                                                }
636                                                                else{
637                                                                  this.setValue(''); 
638                                                                }
639                                                                ////////////////////////////// Patched By Stephen //////////////////////////////////
640                                                        },
641                                                        commit: function( data, selectedTable ) {
642                                                          ////////////////////////////// Patched By Stephen //////////////////////////////////
643                                                                //if ( this.getValue() )
644                                                                //      selectedTable.setAttribute( 'cellSpacing', this.getValue() );
645                                                                //else
646                                                                //      selectedTable.removeAttribute( 'cellSpacing' );
647                                                                if(this.getValue()){
648                                                                  if(this.getValue()>0){
649                                                                    selectedTable.setStyle('border-collapse', 'separate');
650                                                                  }
651                                                                  else{
652                                                                    selectedTable.setStyle('border-collapse', 'collapse');
653                                                                  }
654                                                                  selectedTable.setStyle('border-spacing', this.getValue()+'px');
655                                                                }
656                                                                else{
657                                                                  selectedTable.setStyle('border-collapse', 'collapse');
658                                                                  selectedTable.removeStyle('border-spacing');
659                                                                }
660                                                                selectedTable.removeAttribute('cellSpacing');
661                                                          ////////////////////////////// Patched By Stephen //////////////////////////////////
662                                                        }
663                                                },
664                                                        {
665                                                        type: 'text',
666                                                        id: 'txtCellPad',
667                                                        requiredContent: 'table[cellpadding]',
668                                                        controlStyle: 'width:3em',
669                                                        label: editor.lang.table.cellPad,
670                                                        ////////////////////////////// Patched By Stephen //////////////////////////////////
671                                                        //'default': editor.filter.check( 'table[cellpadding]' ) ? 1 : 0,
672                                                        'default': editor.filter.check( 'table[cellpadding]' ) ? 4 : 0,
673                                                        ////////////////////////////// Patched By Stephen //////////////////////////////////
674                                                        validate: CKEDITOR.dialog.validate.number( editor.lang.table.invalidCellPadding ),
675                                                        setup: function( selectedTable ) {
676                                                          ////////////////////////////// Patched By Stephen //////////////////////////////////
677                                              if(selectedTable.getAttribute('cellpadding')){
678                                                this.setValue(selectedTable.getAttribute('cellpadding'));
679                                              }
680                                              else if(selectedTable.getElementsByTag('tbody').getItem(0)){
681                                                var cellpadding=0;
682                                                                  var tbody = selectedTable.getElementsByTag('tbody').getItem(0);
683                                                                  var theRow = tbody.getElementsByTag('tr').getItem(0);
684                                                                  var td = theRow.getChild(0);
685                                                                  if(td.getStyle('padding')){
686                                                                    this.setValue(td.getStyle('padding').replace('px','')); 
687                                                                  }
688                                                                  else{
689                                                                    if(selectedTable.getElementsByTag('thead').getItem(0)){
690                                                                      var thead = selectedTable.getElementsByTag('thead').getItem(0);
691                                                                      var thead = tbody.getElementsByTag('tr').getItem(0);
692                                                                      var th = theRow.getChild(0);
693                                                                      if(th.getStyle('padding')){
694                                                                        this.setValue(th.getStyle('padding').replace('px','')); 
695                                                                      }
696                                                                      else{
697                                                                        this.setValue('');
698                                                                      }
699                                                                    }
700                                                                    else{
701                                                                      this.setValue('');
702                                                                    }
703                                                                  }
704                                                                }
705                                                                ////////////////////////////// Patched By Stephen //////////////////////////////////
706                                                        },
707                                                        commit: function( data, selectedTable ) {
708                                                                if ( this.getValue() )
709                                                                        selectedTable.setAttribute( 'cellPadding', this.getValue() );
710                                                                else
711                                                                        selectedTable.removeAttribute( 'cellPadding' );
712                                                        }
713                                                }
714                                                ]
715                                        }
716                                        ]
717                                },
718                                        {
719                                        type: 'html',
720                                        align: 'right',
721                                        html: ''
722                                },
723                                        {
724                                        type: 'vbox',
725                                        padding: 0,
726                                        children: [
727                                                {
728                                                type: 'text',
729                                                id: 'txtCaption',
730                                                requiredContent: 'caption',
731                                                label: editor.lang.table.caption,
732                                                setup: function( selectedTable ) {
733                                                        this.enable();
734
735                                                        var nodeList = selectedTable.getElementsByTag( 'caption' );
736                                                        if ( nodeList.count() > 0 ) {
737                                                                var caption = nodeList.getItem( 0 );
738                                                                var firstElementChild = caption.getFirst( CKEDITOR.dom.walker.nodeType( CKEDITOR.NODE_ELEMENT ) );
739
740                                                                if ( firstElementChild && !firstElementChild.equals( caption.getBogus() ) ) {
741                                                                        this.disable();
742                                                                        this.setValue( caption.getText() );
743                                                                        return;
744                                                                }
745
746                                                                caption = CKEDITOR.tools.trim( caption.getText() );
747                                                                this.setValue( caption );
748                                                        }
749                                                },
750                                                commit: function( data, table ) {
751                                                        if ( !this.isEnabled() )
752                                                                return;
753
754                                                        var caption = this.getValue(),
755                                                                captionElement = table.getElementsByTag( 'caption' );
756                                                        if ( caption ) {
757                                                                if ( captionElement.count() > 0 ) {
758                                                                        captionElement = captionElement.getItem( 0 );
759                                                                        captionElement.setHtml( '' );
760                                                                } else {
761                                                                        captionElement = new CKEDITOR.dom.element( 'caption', editor.document );
762                                                                        if ( table.getChildCount() )
763                                                                                captionElement.insertBefore( table.getFirst() );
764                                                                        else
765                                                                                captionElement.appendTo( table );
766                                                                }
767                                                                captionElement.append( new CKEDITOR.dom.text( caption, editor.document ) );
768                                                        } else if ( captionElement.count() > 0 ) {
769                                                                for ( var i = captionElement.count() - 1; i >= 0; i-- )
770                                                                        captionElement.getItem( i ).remove();
771                                                        }
772                                                }
773                                        },
774                                                {
775                                                type: 'text',
776                                                id: 'txtSummary',
777                                                requiredContent: 'table[summary]',
778                                                label: editor.lang.table.summary,
779                                                setup: function( selectedTable ) {
780                                                        this.setValue( selectedTable.getAttribute( 'summary' ) || '' );
781                                                },
782                                                commit: function( data, selectedTable ) {
783                                                        if ( this.getValue() )
784                                                                selectedTable.setAttribute( 'summary', this.getValue() );
785                                                        else
786                                                                selectedTable.removeAttribute( 'summary' );
787                                                }
788                                        }
789                                        ]
790                                }
791                                ]
792                        },
793                                dialogadvtab && dialogadvtab.createAdvancedTab( editor, null, 'table' )
794                                ]
795                };
796        }
797
798        CKEDITOR.dialog.add( 'table', function( editor ) {
799                return tableDialog( editor, 'table' );
800        } );
801        CKEDITOR.dialog.add( 'tableProperties', function( editor ) {
802                return tableDialog( editor, 'tableProperties' );
803        } );
804} )();
© 2003 – 2019 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy