JasonWoof Got questions, comments, patches, etc.? Contact Jason Woofenden
b6e7405bded80187e53732f20388c9dbdeab1db4
[ckeditor.git] / table.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 (function()\r
7 {\r
8         var widthPattern = /^(\d+(?:\.\d+)?)(px|%)$/,\r
9                 heightPattern = /^(\d+(?:\.\d+)?)px$/;\r
10 \r
11         var commitValue = function( data )\r
12         {\r
13                 var id = this.id;\r
14                 if ( !data.info )\r
15                         data.info = {};\r
16                 data.info[id] = this.getValue();\r
17         };\r
18 \r
19         function tableDialog( editor, command )\r
20         {\r
21                 var makeElement = function( name )\r
22                         {\r
23                                 return new CKEDITOR.dom.element( name, editor.document );\r
24                         };\r
25 \r
26                 var dialogadvtab = editor.plugins.dialogadvtab;\r
27 \r
28                 return {\r
29                         title : editor.lang.table.title,\r
30                         minWidth : 310,\r
31                         minHeight : CKEDITOR.env.ie ? 310 : 280,\r
32 \r
33                         onLoad : function()\r
34                         {\r
35                                 var dialog = this;\r
36 \r
37                                 var styles = dialog.getContentElement( 'advanced', 'advStyles' );\r
38 \r
39                                 if ( styles )\r
40                                 {\r
41                                         styles.on( 'change', function( evt )\r
42                                                 {\r
43                                                         // Synchronize width value.\r
44                                                         var width = this.getStyle( 'width', '' ),\r
45                                                                 txtWidth = dialog.getContentElement( 'info', 'txtWidth' ),\r
46                                                                 cmbWidthType = dialog.getContentElement( 'info', 'cmbWidthType' ),\r
47                                                                 isPx = 1;\r
48 \r
49                                                         if ( width )\r
50                                                         {\r
51                                                                 isPx = ( width.length < 3 || width.substr( width.length - 1 ) != '%' );\r
52                                                                 width = parseInt( width, 10 );\r
53                                                         }\r
54 \r
55                                                         txtWidth && txtWidth.setValue( width, true );\r
56                                                         cmbWidthType && cmbWidthType.setValue( isPx ? 'pixels' : 'percents', true );\r
57 \r
58                                                         // Synchronize height value.\r
59                                                         var height = this.getStyle( 'height', '' ),\r
60                                                                 txtHeight = dialog.getContentElement( 'info', 'txtHeight' );\r
61 \r
62                                                         height && ( height = parseInt( height, 10 ) );\r
63                                                         txtHeight && txtHeight.setValue( height, true );\r
64                                                 });\r
65                                 }\r
66                         },\r
67 \r
68                         onShow : function()\r
69                         {\r
70                                 // Detect if there's a selected table.\r
71                                 var selection = editor.getSelection(),\r
72                                         ranges = selection.getRanges(),\r
73                                         selectedTable = null;\r
74 \r
75                                 var rowsInput = this.getContentElement( 'info', 'txtRows' ),\r
76                                         colsInput = this.getContentElement( 'info', 'txtCols' ),\r
77                                         widthInput = this.getContentElement( 'info', 'txtWidth' ),\r
78                                         heightInput = this.getContentElement( 'info', 'txtHeight' );\r
79 \r
80                                 if ( command == 'tableProperties' )\r
81                                 {\r
82                                         if ( ( selectedTable = selection.getSelectedElement() ) )\r
83                                                 selectedTable = selectedTable.getAscendant( 'table', true );\r
84                                         else if ( ranges.length > 0 )\r
85                                         {\r
86                                                 // Webkit could report the following range on cell selection (#4948):\r
87                                                 // <table><tr><td>[&nbsp;</td></tr></table>]\r
88                                                 if ( CKEDITOR.env.webkit )\r
89                                                         ranges[ 0 ].shrink( CKEDITOR.NODE_ELEMENT );\r
90 \r
91                                                 var rangeRoot = ranges[0].getCommonAncestor( true );\r
92                                                 selectedTable = rangeRoot.getAscendant( 'table', true );\r
93                                         }\r
94 \r
95                                         // Save a reference to the selected table, and push a new set of default values.\r
96                                         this._.selectedElement = selectedTable;\r
97                                 }\r
98 \r
99                                 // Enable or disable the row, cols, width fields.\r
100                                 if ( selectedTable )\r
101                                 {\r
102                                         this.setupContent( selectedTable );\r
103                                         rowsInput && rowsInput.disable();\r
104                                         colsInput && colsInput.disable();\r
105                                 }\r
106                                 else\r
107                                 {\r
108                                         rowsInput && rowsInput.enable();\r
109                                         colsInput && colsInput.enable();\r
110                                 }\r
111 \r
112                                 // Call the onChange method for the widht and height fields so\r
113                                 // they get reflected into the Advanced tab.\r
114                                 widthInput && widthInput.onChange();\r
115                                 heightInput && heightInput.onChange();\r
116                         },\r
117                         onOk : function()\r
118                         {\r
119                                 if ( this._.selectedElement )\r
120                                 {\r
121                                         var selection = editor.getSelection(),\r
122                                                 bms = selection.createBookmarks();\r
123                                 }\r
124 \r
125                                 var table = this._.selectedElement || makeElement( 'table' ),\r
126                                         me = this,\r
127                                         data = {};\r
128 \r
129                                 this.commitContent( data, table );\r
130 \r
131                                 if ( data.info )\r
132                                 {\r
133                                         var info = data.info;\r
134 \r
135                                         // Generate the rows and cols.\r
136                                         if ( !this._.selectedElement )\r
137                                         {\r
138                                                 var tbody = table.append( makeElement( 'tbody' ) ),\r
139                                                         rows = parseInt( info.txtRows, 10 ) || 0,\r
140                                                         cols = parseInt( info.txtCols, 10 ) || 0;\r
141 \r
142                                                 for ( var i = 0 ; i < rows ; i++ )\r
143                                                 {\r
144                                                         var row = tbody.append( makeElement( 'tr' ) );\r
145                                                         for ( var j = 0 ; j < cols ; j++ )\r
146                                                         {\r
147                                                                 var cell = row.append( makeElement( 'td' ) );\r
148                                                                 if ( !CKEDITOR.env.ie )\r
149                                                                         cell.append( makeElement( 'br' ) );\r
150                                                         }\r
151                                                 }\r
152                                         }\r
153 \r
154                                         // Modify the table headers. Depends on having rows and cols generated\r
155                                         // correctly so it can't be done in commit functions.\r
156 \r
157                                         // Should we make a <thead>?\r
158                                         var headers = info.selHeaders;\r
159                                         if ( !table.$.tHead && ( headers == 'row' || headers == 'both' ) )\r
160                                         {\r
161                                                 var thead = new CKEDITOR.dom.element( table.$.createTHead() );\r
162                                                 tbody = table.getElementsByTag( 'tbody' ).getItem( 0 );\r
163                                                 var theRow = tbody.getElementsByTag( 'tr' ).getItem( 0 );\r
164 \r
165                                                 // Change TD to TH:\r
166                                                 for ( i = 0 ; i < theRow.getChildCount() ; i++ )\r
167                                                 {\r
168                                                         var th = theRow.getChild( i );\r
169                                                         // Skip bookmark nodes. (#6155)\r
170                                                         if ( th.type == CKEDITOR.NODE_ELEMENT && !th.data( 'cke-bookmark' ) )\r
171                                                         {\r
172                                                                 th.renameNode( 'th' );\r
173                                                                 th.setAttribute( 'scope', 'col' );\r
174                                                         }\r
175                                                 }\r
176                                                 thead.append( theRow.remove() );\r
177                                         }\r
178 \r
179                                         if ( table.$.tHead !== null && !( headers == 'row' || headers == 'both' ) )\r
180                                         {\r
181                                                 // Move the row out of the THead and put it in the TBody:\r
182                                                 thead = new CKEDITOR.dom.element( table.$.tHead );\r
183                                                 tbody = table.getElementsByTag( 'tbody' ).getItem( 0 );\r
184 \r
185                                                 var previousFirstRow = tbody.getFirst();\r
186                                                 while ( thead.getChildCount() > 0 )\r
187                                                 {\r
188                                                         theRow = thead.getFirst();\r
189                                                         for ( i = 0; i < theRow.getChildCount() ; i++ )\r
190                                                         {\r
191                                                                 var newCell = theRow.getChild( i );\r
192                                                                 if ( newCell.type == CKEDITOR.NODE_ELEMENT )\r
193                                                                 {\r
194                                                                         newCell.renameNode( 'td' );\r
195                                                                         newCell.removeAttribute( 'scope' );\r
196                                                                 }\r
197                                                         }\r
198                                                         theRow.insertBefore( previousFirstRow );\r
199                                                 }\r
200                                                 thead.remove();\r
201                                         }\r
202 \r
203                                         // Should we make all first cells in a row TH?\r
204                                         if ( !this.hasColumnHeaders && ( headers == 'col' || headers == 'both' ) )\r
205                                         {\r
206                                                 for ( row = 0 ; row < table.$.rows.length ; row++ )\r
207                                                 {\r
208                                                         newCell = new CKEDITOR.dom.element( table.$.rows[ row ].cells[ 0 ] );\r
209                                                         newCell.renameNode( 'th' );\r
210                                                         newCell.setAttribute( 'scope', 'row' );\r
211                                                 }\r
212                                         }\r
213 \r
214                                         // Should we make all first TH-cells in a row make TD? If 'yes' we do it the other way round :-)\r
215                                         if ( ( this.hasColumnHeaders ) && !( headers == 'col' || headers == 'both' ) )\r
216                                         {\r
217                                                 for ( i = 0 ; i < table.$.rows.length ; i++ )\r
218                                                 {\r
219                                                         row = new CKEDITOR.dom.element( table.$.rows[i] );\r
220                                                         if ( row.getParent().getName() == 'tbody' )\r
221                                                         {\r
222                                                                 newCell = new CKEDITOR.dom.element( row.$.cells[0] );\r
223                                                                 newCell.renameNode( 'td' );\r
224                                                                 newCell.removeAttribute( 'scope' );\r
225                                                         }\r
226                                                 }\r
227                                         }\r
228 \r
229                                         // Set the width and height.\r
230                                         var styles = [];\r
231                                         if ( info.txtHeight )\r
232                                                 table.setStyle( 'height', CKEDITOR.tools.cssLength( info.txtHeight ) );\r
233                                         else\r
234                                                 table.removeStyle( 'height' );\r
235 \r
236                                         if ( info.txtWidth )\r
237                                         {\r
238                                                 var type = info.cmbWidthType || 'pixels';\r
239                                                 table.setStyle( 'width', info.txtWidth + ( type == 'pixels' ? 'px' : '%' ) );\r
240                                         }\r
241                                         else\r
242                                                 table.removeStyle( 'width' );\r
243 \r
244                                         if ( !table.getAttribute( 'style' ) )\r
245                                                 table.removeAttribute( 'style' );\r
246                                 }\r
247 \r
248                                 // Insert the table element if we're creating one.\r
249                                 if ( !this._.selectedElement )\r
250                                         editor.insertElement( table );\r
251                                 // Properly restore the selection inside table. (#4822)\r
252                                 else\r
253                                         selection.selectBookmarks( bms );\r
254 \r
255                                 return true;\r
256                         },\r
257                         contents : [\r
258                                 {\r
259                                         id : 'info',\r
260                                         label : editor.lang.table.title,\r
261                                         elements :\r
262                                         [\r
263                                                 {\r
264                                                         type : 'hbox',\r
265                                                         widths : [ null, null ],\r
266                                                         styles : [ 'vertical-align:top' ],\r
267                                                         children :\r
268                                                         [\r
269                                                                 {\r
270                                                                         type : 'vbox',\r
271                                                                         padding : 0,\r
272                                                                         children :\r
273                                                                         [\r
274                                                                                 {\r
275                                                                                         type : 'text',\r
276                                                                                         id : 'txtRows',\r
277                                                                                         'default' : 3,\r
278                                                                                         label : editor.lang.table.rows,\r
279                                                                                         required : true,\r
280                                                                                         style : 'width:5em',\r
281                                                                                         validate : function()\r
282                                                                                         {\r
283                                                                                                 var pass = true,\r
284                                                                                                         value = this.getValue();\r
285                                                                                                 pass = pass && CKEDITOR.dialog.validate.integer()( value )\r
286                                                                                                         && value > 0;\r
287                                                                                                 if ( !pass )\r
288                                                                                                 {\r
289                                                                                                         alert( editor.lang.table.invalidRows );\r
290                                                                                                         this.select();\r
291                                                                                                 }\r
292                                                                                                 return pass;\r
293                                                                                         },\r
294                                                                                         setup : function( selectedElement )\r
295                                                                                         {\r
296                                                                                                 this.setValue( selectedElement.$.rows.length );\r
297                                                                                         },\r
298                                                                                         commit : commitValue\r
299                                                                                 },\r
300                                                                                 {\r
301                                                                                         type : 'text',\r
302                                                                                         id : 'txtCols',\r
303                                                                                         'default' : 2,\r
304                                                                                         label : editor.lang.table.columns,\r
305                                                                                         required : true,\r
306                                                                                         style : 'width:5em',\r
307                                                                                         validate : function()\r
308                                                                                         {\r
309                                                                                                 var pass = true,\r
310                                                                                                         value = this.getValue();\r
311                                                                                                 pass = pass && CKEDITOR.dialog.validate.integer()( value )\r
312                                                                                                         && value > 0;\r
313                                                                                                 if ( !pass )\r
314                                                                                                 {\r
315                                                                                                         alert( editor.lang.table.invalidCols );\r
316                                                                                                         this.select();\r
317                                                                                                 }\r
318                                                                                                 return pass;\r
319                                                                                         },\r
320                                                                                         setup : function( selectedTable )\r
321                                                                                         {\r
322                                                                                                 this.setValue( selectedTable.$.rows[0].cells.length);\r
323                                                                                         },\r
324                                                                                         commit : commitValue\r
325                                                                                 },\r
326                                                                                 {\r
327                                                                                         type : 'html',\r
328                                                                                         html : '&nbsp;'\r
329                                                                                 },\r
330                                                                                 {\r
331                                                                                         type : 'select',\r
332                                                                                         id : 'selHeaders',\r
333                                                                                         'default' : '',\r
334                                                                                         label : editor.lang.table.headers,\r
335                                                                                         items :\r
336                                                                                         [\r
337                                                                                                 [ editor.lang.table.headersNone, '' ],\r
338                                                                                                 [ editor.lang.table.headersRow, 'row' ],\r
339                                                                                                 [ editor.lang.table.headersColumn, 'col' ],\r
340                                                                                                 [ editor.lang.table.headersBoth, 'both' ]\r
341                                                                                         ],\r
342                                                                                         setup : function( selectedTable )\r
343                                                                                         {\r
344                                                                                                 // Fill in the headers field.\r
345                                                                                                 var dialog = this.getDialog();\r
346                                                                                                 dialog.hasColumnHeaders = true;\r
347 \r
348                                                                                                 // Check if all the first cells in every row are TH\r
349                                                                                                 for ( var row = 0 ; row < selectedTable.$.rows.length ; row++ )\r
350                                                                                                 {\r
351                                                                                                         // If just one cell isn't a TH then it isn't a header column\r
352                                                                                                         if ( selectedTable.$.rows[row].cells[0].nodeName.toLowerCase() != 'th' )\r
353                                                                                                         {\r
354                                                                                                                 dialog.hasColumnHeaders = false;\r
355                                                                                                                 break;\r
356                                                                                                         }\r
357                                                                                                 }\r
358 \r
359                                                                                                 // Check if the table contains <thead>.\r
360                                                                                                 if ( ( selectedTable.$.tHead !== null) )\r
361                                                                                                         this.setValue( dialog.hasColumnHeaders ? 'both' : 'row' );\r
362                                                                                                 else\r
363                                                                                                         this.setValue( dialog.hasColumnHeaders ? 'col' : '' );\r
364                                                                                         },\r
365                                                                                         commit : commitValue\r
366                                                                                 },\r
367                                                                                 {\r
368                                                                                         type : 'text',\r
369                                                                                         id : 'txtBorder',\r
370                                                                                         'default' : 1,\r
371                                                                                         label : editor.lang.table.border,\r
372                                                                                         style : 'width:3em',\r
373                                                                                         validate : CKEDITOR.dialog.validate['number']( editor.lang.table.invalidBorder ),\r
374                                                                                         setup : function( selectedTable )\r
375                                                                                         {\r
376                                                                                                 this.setValue( selectedTable.getAttribute( 'border' ) || '' );\r
377                                                                                         },\r
378                                                                                         commit : function( data, selectedTable )\r
379                                                                                         {\r
380                                                                                                 if ( this.getValue() )\r
381                                                                                                         selectedTable.setAttribute( 'border', this.getValue() );\r
382                                                                                                 else\r
383                                                                                                         selectedTable.removeAttribute( 'border' );\r
384                                                                                         }\r
385                                                                                 },\r
386                                                                                 {\r
387                                                                                         id : 'cmbAlign',\r
388                                                                                         type : 'select',\r
389                                                                                         'default' : '',\r
390                                                                                         label : editor.lang.common.align,\r
391                                                                                         items :\r
392                                                                                         [\r
393                                                                                                 [ editor.lang.common.notSet , ''],\r
394                                                                                                 [ editor.lang.common.alignLeft , 'left'],\r
395                                                                                                 [ editor.lang.common.alignCenter , 'center'],\r
396                                                                                                 [ editor.lang.common.alignRight , 'right']\r
397                                                                                         ],\r
398                                                                                         setup : function( selectedTable )\r
399                                                                                         {\r
400                                                                                                 this.setValue( selectedTable.getAttribute( 'align' ) || '' );\r
401                                                                                         },\r
402                                                                                         commit : function( data, selectedTable )\r
403                                                                                         {\r
404                                                                                                 if ( this.getValue() )\r
405                                                                                                         selectedTable.setAttribute( 'align', this.getValue() );\r
406                                                                                                 else\r
407                                                                                                         selectedTable.removeAttribute( 'align' );\r
408                                                                                         }\r
409                                                                                 }\r
410                                                                         ]\r
411                                                                 },\r
412                                                                 {\r
413                                                                         type : 'vbox',\r
414                                                                         padding : 0,\r
415                                                                         children :\r
416                                                                         [\r
417                                                                                 {\r
418                                                                                         type : 'hbox',\r
419                                                                                         widths : [ '5em' ],\r
420                                                                                         children :\r
421                                                                                         [\r
422                                                                                                 {\r
423                                                                                                         type : 'text',\r
424                                                                                                         id : 'txtWidth',\r
425                                                                                                         style : 'width:5em',\r
426                                                                                                         label : editor.lang.common.width,\r
427                                                                                                         'default' : 500,\r
428                                                                                                         validate : CKEDITOR.dialog.validate['number']( editor.lang.table.invalidWidth ),\r
429 \r
430                                                                                                         // Extra labelling of width unit type.\r
431                                                                                                         onLoad : function()\r
432                                                                                                         {\r
433                                                                                                                 var widthType = this.getDialog().getContentElement( 'info', 'cmbWidthType' ),\r
434                                                                                                                         labelElement = widthType.getElement(),\r
435                                                                                                                         inputElement = this.getInputElement(),\r
436                                                                                                                         ariaLabelledByAttr = inputElement.getAttribute( 'aria-labelledby' );\r
437 \r
438                                                                                                                 inputElement.setAttribute( 'aria-labelledby', [ ariaLabelledByAttr, labelElement.$.id ].join( ' ' ) );\r
439                                                                                                         },\r
440 \r
441                                                                                                         onChange : function()\r
442                                                                                                         {\r
443                                                                                                                 var styles = this.getDialog().getContentElement( 'advanced', 'advStyles' );\r
444 \r
445                                                                                                                 if ( styles )\r
446                                                                                                                 {\r
447                                                                                                                         var value = this.getValue();\r
448 \r
449                                                                                                                         if ( value )\r
450                                                                                                                                 value += this.getDialog().getContentElement( 'info', 'cmbWidthType' ).getValue() == 'percents' ? '%' : 'px';\r
451 \r
452                                                                                                                         styles.updateStyle( 'width', value );\r
453                                                                                                                 }\r
454                                                                                                         },\r
455 \r
456                                                                                                         setup : function( selectedTable )\r
457                                                                                                         {\r
458                                                                                                                 var widthMatch = widthPattern.exec( selectedTable.$.style.width );\r
459                                                                                                                 if ( widthMatch )\r
460                                                                                                                         this.setValue( widthMatch[1] );\r
461                                                                                                                 else\r
462                                                                                                                         this.setValue( '' );\r
463                                                                                                         },\r
464                                                                                                         commit : commitValue\r
465                                                                                                 },\r
466                                                                                                 {\r
467                                                                                                         id : 'cmbWidthType',\r
468                                                                                                         type : 'select',\r
469                                                                                                         label : editor.lang.table.widthUnit,\r
470                                                                                                         labelStyle: 'visibility:hidden',\r
471                                                                                                         'default' : 'pixels',\r
472                                                                                                         items :\r
473                                                                                                         [\r
474                                                                                                                 [ editor.lang.table.widthPx , 'pixels'],\r
475                                                                                                                 [ editor.lang.table.widthPc , 'percents']\r
476                                                                                                         ],\r
477                                                                                                         setup : function( selectedTable )\r
478                                                                                                         {\r
479                                                                                                                 var widthMatch = widthPattern.exec( selectedTable.$.style.width );\r
480                                                                                                                 if ( widthMatch )\r
481                                                                                                                         this.setValue( widthMatch[2] == 'px' ? 'pixels' : 'percents' );\r
482                                                                                                         },\r
483                                                                                                         onChange : function()\r
484                                                                                                         {\r
485                                                                                                                 this.getDialog().getContentElement( 'info', 'txtWidth' ).onChange();\r
486                                                                                                         },\r
487                                                                                                         commit : commitValue\r
488                                                                                                 }\r
489                                                                                         ]\r
490                                                                                 },\r
491                                                                                 {\r
492                                                                                         type : 'hbox',\r
493                                                                                         widths : [ '5em' ],\r
494                                                                                         children :\r
495                                                                                         [\r
496                                                                                                 {\r
497                                                                                                         type : 'text',\r
498                                                                                                         id : 'txtHeight',\r
499                                                                                                         style : 'width:5em',\r
500                                                                                                         label : editor.lang.common.height,\r
501                                                                                                         'default' : '',\r
502                                                                                                         validate : CKEDITOR.dialog.validate['number']( editor.lang.table.invalidHeight ),\r
503 \r
504                                                                                                         // Extra labelling of height unit type.\r
505                                                                                                         onLoad : function()\r
506                                                                                                         {\r
507                                                                                                                 var heightType = this.getDialog().getContentElement( 'info', 'htmlHeightType' ),\r
508                                                                                                                         labelElement = heightType.getElement(),\r
509                                                                                                                         inputElement = this.getInputElement(),\r
510                                                                                                                         ariaLabelledByAttr = inputElement.getAttribute( 'aria-labelledby' );\r
511 \r
512                                                                                                                 inputElement.setAttribute( 'aria-labelledby', [ ariaLabelledByAttr, labelElement.$.id ].join( ' ' ) );\r
513                                                                                                         },\r
514 \r
515                                                                                                         onChange : function()\r
516                                                                                                         {\r
517                                                                                                                 var styles = this.getDialog().getContentElement( 'advanced', 'advStyles' );\r
518 \r
519                                                                                                                 if ( styles )\r
520                                                                                                                 {\r
521                                                                                                                         var value = this.getValue();\r
522                                                                                                                         styles.updateStyle( 'height', value && ( value + 'px' ) );\r
523                                                                                                                 }\r
524                                                                                                         },\r
525 \r
526                                                                                                         setup : function( selectedTable )\r
527                                                                                                         {\r
528                                                                                                                 var heightMatch = heightPattern.exec( selectedTable.$.style.height );\r
529                                                                                                                 if ( heightMatch )\r
530                                                                                                                         this.setValue( heightMatch[1] );\r
531                                                                                                         },\r
532                                                                                                         commit : commitValue\r
533                                                                                                 },\r
534                                                                                                 {\r
535                                                                                                         id : 'htmlHeightType',\r
536                                                                                                         type : 'html',\r
537                                                                                                         html : '<div><br />' + editor.lang.table.widthPx + '</div>'\r
538                                                                                                 }\r
539                                                                                         ]\r
540                                                                                 },\r
541                                                                                 {\r
542                                                                                         type : 'html',\r
543                                                                                         html : '&nbsp;'\r
544                                                                                 },\r
545                                                                                 {\r
546                                                                                         type : 'text',\r
547                                                                                         id : 'txtCellSpace',\r
548                                                                                         style : 'width:3em',\r
549                                                                                         label : editor.lang.table.cellSpace,\r
550                                                                                         'default' : 1,\r
551                                                                                         validate : CKEDITOR.dialog.validate['number']( editor.lang.table.invalidCellSpacing ),\r
552                                                                                         setup : function( selectedTable )\r
553                                                                                         {\r
554                                                                                                 this.setValue( selectedTable.getAttribute( 'cellSpacing' ) || '' );\r
555                                                                                         },\r
556                                                                                         commit : function( data, selectedTable )\r
557                                                                                         {\r
558                                                                                                 if ( this.getValue() )\r
559                                                                                                         selectedTable.setAttribute( 'cellSpacing', this.getValue() );\r
560                                                                                                 else\r
561                                                                                                         selectedTable.removeAttribute( 'cellSpacing' );\r
562                                                                                         }\r
563                                                                                 },\r
564                                                                                 {\r
565                                                                                         type : 'text',\r
566                                                                                         id : 'txtCellPad',\r
567                                                                                         style : 'width:3em',\r
568                                                                                         label : editor.lang.table.cellPad,\r
569                                                                                         'default' : 1,\r
570                                                                                         validate : CKEDITOR.dialog.validate['number']( editor.lang.table.invalidCellPadding ),\r
571                                                                                         setup : function( selectedTable )\r
572                                                                                         {\r
573                                                                                                 this.setValue( selectedTable.getAttribute( 'cellPadding' ) || '' );\r
574                                                                                         },\r
575                                                                                         commit : function( data, selectedTable )\r
576                                                                                         {\r
577                                                                                                 if ( this.getValue() )\r
578                                                                                                         selectedTable.setAttribute( 'cellPadding', this.getValue() );\r
579                                                                                                 else\r
580                                                                                                         selectedTable.removeAttribute( 'cellPadding' );\r
581                                                                                         }\r
582                                                                                 }\r
583                                                                         ]\r
584                                                                 }\r
585                                                         ]\r
586                                                 },\r
587                                                 {\r
588                                                         type : 'html',\r
589                                                         align : 'right',\r
590                                                         html : ''\r
591                                                 },\r
592                                                 {\r
593                                                         type : 'vbox',\r
594                                                         padding : 0,\r
595                                                         children :\r
596                                                         [\r
597                                                                 {\r
598                                                                         type : 'text',\r
599                                                                         id : 'txtCaption',\r
600                                                                         label : editor.lang.table.caption,\r
601                                                                         setup : function( selectedTable )\r
602                                                                         {\r
603                                                                                 var nodeList = selectedTable.getElementsByTag( 'caption' );\r
604                                                                                 if ( nodeList.count() > 0 )\r
605                                                                                 {\r
606                                                                                         var caption = nodeList.getItem( 0 );\r
607                                                                                         caption = CKEDITOR.tools.trim( caption.getText() );\r
608                                                                                         this.setValue( caption );\r
609                                                                                 }\r
610                                                                         },\r
611                                                                         commit : function( data, table )\r
612                                                                         {\r
613                                                                                 var caption = this.getValue(),\r
614                                                                                         captionElement = table.getElementsByTag( 'caption' );\r
615                                                                                 if ( caption )\r
616                                                                                 {\r
617                                                                                         if ( captionElement.count() > 0 )\r
618                                                                                         {\r
619                                                                                                 captionElement = captionElement.getItem( 0 );\r
620                                                                                                 captionElement.setHtml( '' );\r
621                                                                                         }\r
622                                                                                         else\r
623                                                                                         {\r
624                                                                                                 captionElement = new CKEDITOR.dom.element( 'caption', editor.document );\r
625                                                                                                 if ( table.getChildCount() )\r
626                                                                                                         captionElement.insertBefore( table.getFirst() );\r
627                                                                                                 else\r
628                                                                                                         captionElement.appendTo( table );\r
629                                                                                         }\r
630                                                                                         captionElement.append( new CKEDITOR.dom.text( caption, editor.document ) );\r
631                                                                                 }\r
632                                                                                 else if ( captionElement.count() > 0 )\r
633                                                                                 {\r
634                                                                                         for ( var i = captionElement.count() - 1 ; i >= 0 ; i-- )\r
635                                                                                                 captionElement.getItem( i ).remove();\r
636                                                                                 }\r
637                                                                         }\r
638                                                                 },\r
639                                                                 {\r
640                                                                         type : 'text',\r
641                                                                         id : 'txtSummary',\r
642                                                                         label : editor.lang.table.summary,\r
643                                                                         setup : function( selectedTable )\r
644                                                                         {\r
645                                                                                 this.setValue( selectedTable.getAttribute( 'summary' ) || '' );\r
646                                                                         },\r
647                                                                         commit : function( data, selectedTable )\r
648                                                                         {\r
649                                                                                 if ( this.getValue() )\r
650                                                                                         selectedTable.setAttribute( 'summary', this.getValue() );\r
651                                                                                 else\r
652                                                                                         selectedTable.removeAttribute( 'summary' );\r
653                                                                         }\r
654                                                                 }\r
655                                                         ]\r
656                                                 }\r
657                                         ]\r
658                                 },\r
659                                 dialogadvtab && dialogadvtab.createAdvancedTab( editor )\r
660                         ]\r
661                 };\r
662         }\r
663 \r
664         CKEDITOR.dialog.add( 'table', function( editor )\r
665                 {\r
666                         return tableDialog( editor, 'table' );\r
667                 } );\r
668         CKEDITOR.dialog.add( 'tableProperties', function( editor )\r
669                 {\r
670                         return tableDialog( editor, 'tableProperties' );\r
671                 } );\r
672 })();\r