ckeditor 3.4.3 → 3.5.0

data/generators/ckeditor_install/templates/ckeditor/_source/plugins/tableresize/plugin.js

@@ -1,450 +0,0 @@
-/*
-Copyright (c) 2003-2010, CKSource - Frederico Knabben. All rights reserved.
-For licensing, see LICENSE.html or http://ckeditor.com/license
-*/
-
-(function()
-{
-	var pxUnit = CKEDITOR.tools.cssLength,
-		needsIEHacks = CKEDITOR.env.ie && ( CKEDITOR.env.ie7Compat || CKEDITOR.env.quirks || CKEDITOR.env.version < 7 );
-
-	function getWidth( el )
-	{
-		return CKEDITOR.env.ie ? el.$.clientWidth : parseInt( el.getComputedStyle( 'width' ), 10 );
-	}
-
-	function getBorderWidth( element, side )
-	{
-		var computed = element.getComputedStyle( 'border-' + side + '-width' ),
-			borderMap =
-			{
-				thin: '0px',
-				medium: '1px',
-				thick: '2px'
-			};
-
-		if ( computed.indexOf( 'px' ) < 0 )
-		{
-			// look up keywords
-			if ( computed in borderMap && element.getComputedStyle( 'border-style' ) != 'none' )
-				computed = borderMap[ computed ];
-			else
-				computed = 0;
-		}
-
-		return parseInt( computed, 10 );
-	}
-
-	// Gets the table row that contains the most columns.
-	function getMasterPillarRow( table )
-	{
-		var $rows = table.$.rows,
-			maxCells = 0, cellsCount,
-			$elected, $tr;
-
-		for ( var i = 0, len = $rows.length ; i < len; i++ )
-		{
-			$tr = $rows[ i ];
-			cellsCount = $tr.cells.length;
-
-			if ( cellsCount > maxCells )
-			{
-				maxCells = cellsCount;
-				$elected = $tr;
-			}
-		}
-
-		return $elected;
-	}
-
-	function buildTableColumnPillars( table )
-	{
-		var pillars = [],
-			pillarIndex = -1,
-			rtl = ( table.getComputedStyle( 'direction' ) == 'rtl' );
-
-		// Get the raw row element that cointains the most columns.
-		var $tr = getMasterPillarRow( table );
-
-		// Get the tbody element and position, which will be used to set the
-		// top and bottom boundaries.
-		var tbody = new CKEDITOR.dom.element( table.$.tBodies[ 0 ] ),
-			tbodyPosition = tbody.getDocumentPosition();
-
-		// Loop thorugh all cells, building pillars after each one of them.
-		for ( var i = 0, len = $tr.cells.length ; i < len ; i++ )
-		{
-			// Both the current cell and the successive one will be used in the
-			// pillar size calculation.
-			var td = new CKEDITOR.dom.element( $tr.cells[ i ] ),
-				nextTd = $tr.cells[ i + 1 ] && new CKEDITOR.dom.element( $tr.cells[ i + 1 ] );
-
-			pillarIndex += td.$.colSpan || 1;
-
-			// Calculate the pillar boundary positions.
-			var pillarLeft, pillarRight, pillarWidth, pillarPadding;
-
-			var x = td.getDocumentPosition().x;
-
-			// Calculate positions based on the current cell.
-			rtl ?
-				pillarRight = x + getBorderWidth( td, 'left' ) :
-				pillarLeft  = x + td.$.offsetWidth - getBorderWidth( td, 'right' );
-
-			// Calculate positions based on the next cell, if available.
-			if ( nextTd )
-			{
-				x =  nextTd.getDocumentPosition().x;
-
-				rtl ?
-					pillarLeft	= x + nextTd.$.offsetWidth - getBorderWidth( nextTd, 'right' ) :
-					pillarRight	= x + getBorderWidth( nextTd, 'left' );
-			}
-			// Otherwise calculate positions based on the table (for last cell).
-			else
-			{
-				x =  table.getDocumentPosition().x;
-
-				rtl ?
-					pillarLeft	= x :
-					pillarRight	= x + table.$.offsetWidth;
-			}
-
-			pillarWidth = Math.max( pillarRight - pillarLeft, 3 );
-
-			// Make the pillar touch area at least 14 pixels wide, for easy to use.
-			pillarPadding = Math.max( Math.round( 7 - ( pillarWidth / 2 ) ), 0 );
-
-			// The pillar should reflects exactly the shape of the hovered
-			// column border line.
-			pillars.push( {
-				table : table,
-				index : pillarIndex,
-				x : pillarLeft,
-				y : tbodyPosition.y,
-				width : pillarWidth,
-				height: tbody.$.offsetHeight,
-				padding : pillarPadding,
-				rtl : rtl } );
-		}
-
-		return pillars;
-	}
-
-	function getPillarAtPosition( pillars, positionX )
-	{
-		for ( var i = 0, len = pillars.length ; i < len ; i++ )
-		{
-			var pillar = pillars[ i ],
-				pad = pillar.padding;
-
-			if ( positionX >= pillar.x - pad && positionX <= ( pillar.x + pillar.width + pad ) )
-				return pillar;
-		}
-
-		return null;
-	}
-
-	function cancel( evt )
-	{
-		( evt.data || evt ).preventDefault();
-	}
-
-	function columnResizer( editor )
-	{
-		var pillar,
-			document,
-			resizer,
-			isResizing,
-			startOffset,
-			currentShift;
-
-		var leftSideCells, rightSideCells, leftShiftBoundary, rightShiftBoundary;
-
-		function detach()
-		{
-			pillar = null;
-			currentShift = 0;
-			isResizing = 0;
-
-			document.removeListener( 'mouseup', onMouseUp );
-			resizer.removeListener( 'mousedown', onMouseDown );
-			resizer.removeListener( 'mousemove', onMouseMove );
-
-			document.getBody().setStyle( 'cursor', 'auto' );
-
-			// Hide the resizer (remove it on IE7 - #5890).
-			needsIEHacks ? resizer.remove() : resizer.hide();
-		}
-
-		function resizeStart()
-		{
-			// Before starting to resize, figure out which cells to change
-			// and the boundaries of this resizing shift.
-
-			var columnIndex = pillar.index,
-				map = CKEDITOR.tools.buildTableMap( pillar.table ),
-				leftColumnCells = [],
-				rightColumnCells = [],
-				leftMinSize = Number.MAX_VALUE,
-				rightMinSize = leftMinSize,
-				rtl = pillar.rtl;
-
-			for ( var i = 0, len = map.length ; i < len ; i++ )
-			{
-				var row			= map[ i ],
-					leftCell	= row[ columnIndex + ( rtl ? 1 : 0 ) ],
-					rightCell	= row[ columnIndex + ( rtl ? 0 : 1 ) ];
-
-				leftCell	= leftCell && new CKEDITOR.dom.element( leftCell );
-				rightCell	= rightCell && new CKEDITOR.dom.element( rightCell );
-
-				if ( !leftCell || !rightCell || !leftCell.equals( rightCell ) )
-				{
-					leftCell && ( leftMinSize = Math.min( leftMinSize, getWidth( leftCell ) ) );
-					rightCell && ( rightMinSize = Math.min( rightMinSize, getWidth( rightCell ) ) );
-
-					leftColumnCells.push( leftCell );
-					rightColumnCells.push( rightCell );
-				}
-			}
-
-			// Cache the list of cells to be resized.
-			leftSideCells = leftColumnCells;
-			rightSideCells = rightColumnCells;
-
-			// Cache the resize limit boundaries.
-			leftShiftBoundary =  pillar.x - leftMinSize;
-			rightShiftBoundary = pillar.x + rightMinSize;
-
-			resizer.setOpacity( 0.5 );
-			startOffset = parseInt( resizer.getStyle( 'left' ), 10 );
-			currentShift = 0;
-			isResizing = 1;
-
-			resizer.on( 'mousemove', onMouseMove );
-
-			// Prevent the native drag behavior otherwise 'mousemove' won't fire.
-			document.on( 'dragstart', cancel );
-		}
-
-		function resizeEnd()
-		{
-			isResizing = 0;
-
-			resizer.setOpacity( 0 );
-
-			currentShift && resizeColumn();
-
-			var table = pillar.table;
-			setTimeout( function () { table.removeCustomData( '_cke_table_pillars' ); }, 0 );
-
-			document.removeListener( 'dragstart', cancel );
-		}
-
-		function resizeColumn()
-		{
-			var rtl = pillar.rtl,
-				cellsCount = rtl ? rightSideCells.length : leftSideCells.length;
-
-			// Perform the actual resize to table cells, only for those by side of the pillar.
-			for ( var i = 0 ; i < cellsCount ; i++ )
-			{
-				var leftCell = leftSideCells[ i ],
-					rightCell = rightSideCells[ i ],
-					table = pillar.table;
-
-				// Defer the resizing to avoid any interference among cells.
-				CKEDITOR.tools.setTimeout(
-					function( leftCell, leftOldWidth, rightCell, rightOldWidth, tableWidth, sizeShift )
-					{
-						leftCell && leftCell.setStyle( 'width', pxUnit( Math.max( leftOldWidth + sizeShift, 0 ) ) );
-						rightCell && rightCell.setStyle( 'width', pxUnit( Math.max( rightOldWidth - sizeShift, 0 ) ) );
-
-						// If we're in the last cell, we need to resize the table as well
-						if ( tableWidth )
-							table.setStyle( 'width', pxUnit( tableWidth + sizeShift * ( rtl ? -1 : 1 ) ) );
-					}
-					, 0,
-					this, [
-						leftCell, leftCell && getWidth( leftCell ),
-						rightCell, rightCell && getWidth( rightCell ),
-						( !leftCell || !rightCell ) && ( getWidth( table ) + getBorderWidth( table, 'left' ) + getBorderWidth( table, 'right' ) ),
-						currentShift ] );
-			}
-		}
-
-		function onMouseDown( evt )
-		{
-			cancel( evt );
-
-			resizeStart();
-
-			document.on( 'mouseup', onMouseUp, this );
-		}
-
-		function onMouseUp( evt )
-		{
-			evt.removeListener();
-
-			resizeEnd();
-		}
-
-		function onMouseMove( evt )
-		{
-			move( evt.data.$.clientX );
-		}
-
-		document = editor.document;
-
-		resizer = CKEDITOR.dom.element.createFromHtml(
-			'<div cke_temp=1 contenteditable=false unselectable=on '+
-			'style="position:absolute;cursor:col-resize;filter:alpha(opacity=0);opacity:0;' +
-				'padding:0;background-color:#004;background-image:none;border:0px none;z-index:10"></div>', document );
-
-		// Except on IE6/7 (#5890), place the resizer after body to prevent it
-		// from being editable.
-		if ( !needsIEHacks )
-			document.getDocumentElement().append( resizer );
-
-		this.attachTo = function( targetPillar )
-		{
-			// Accept only one pillar at a time.
-			if ( isResizing )
-				return;
-
-			// On IE6/7, we append the resizer everytime we need it. (#5890)
-			if ( needsIEHacks )
-			{
-				document.getBody().append( resizer );
-				currentShift = 0;
-			}
-
-			pillar = targetPillar;
-
-			resizer.setStyles(
-				{
-					width: pxUnit( targetPillar.width ),
-					height : pxUnit( targetPillar.height ),
-					left : pxUnit( targetPillar.x ),
-					top : pxUnit( targetPillar.y )
-				});
-
-			// In IE6/7, it's not possible to have custom cursors for floating
-			// elements in an editable document. Show the resizer in that case,
-			// to give the user a visual clue.
-			needsIEHacks && resizer.setOpacity( 0.25 );
-
-			resizer.on( 'mousedown', onMouseDown, this );
-
-			document.getBody().setStyle( 'cursor', 'col-resize' );
-
-			// Display the resizer to receive events but don't show it,
-			// only change the cursor to resizable shape.
-			resizer.show();
-		};
-
-		var move = this.move = function( posX )
-		{
-			if ( !pillar )
-				return 0;
-
-			var pad = pillar.padding;
-
-			if ( !isResizing && ( posX < pillar.x - pad || posX > ( pillar.x + pillar.width + pad ) ) )
-			{
-				detach();
-				return 0;
-			}
-
-			var resizerNewPosition = posX - Math.round( resizer.$.offsetWidth / 2 );
-
-			if ( isResizing )
-			{
-				if ( resizerNewPosition == leftShiftBoundary || resizerNewPosition == rightShiftBoundary )
-					return 1;
-
-				resizerNewPosition = Math.max( resizerNewPosition, leftShiftBoundary );
-				resizerNewPosition = Math.min( resizerNewPosition, rightShiftBoundary );
-
-				currentShift = resizerNewPosition - startOffset;
-			}
-
-			resizer.setStyle( 'left', pxUnit( resizerNewPosition ) );
-
-			return 1;
-		};
-	}
-
-	function clearPillarsCache( evt )
-	{
-		var target = evt.data.getTarget();
-
-		if ( evt.name == 'mouseout' )
-		{
-			// Bypass interal mouse move.
-			if ( !target.is ( 'table' ) )
-				return;
-
-			var dest = new CKEDITOR.dom.element( evt.data.$.relatedTarget || evt.data.$.toElement );
-			while( dest && dest.$ && !dest.equals( target ) && !dest.is( 'body' ) )
-				dest = dest.getParent();
-			if ( !dest || dest.equals( target ) )
-				return;
-		}
-
-		target.getAscendant( 'table', 1 ).removeCustomData( '_cke_table_pillars' );
-		evt.removeListener();
-	}
-
-	CKEDITOR.plugins.add( 'tableresize',
-	{
-		requires : [ 'tabletools' ],
-		init : function( editor )
-		{
-			editor.on( 'contentDom', function()
-			{
-				var resizer;
-
-				editor.document.getBody().on( 'mousemove', function( evt )
-					{
-						evt = evt.data;
-
-						// If we're already attached to a pillar, simply move the
-						// resizer.
-						if ( resizer && resizer.move( evt.$.clientX ) )
-						{
-							cancel( evt );
-							return;
-						}
-
-						// Considering table, tr, td, tbody but nothing else.
-						var target = evt.getTarget(),
-							table,
-							pillars;
-
-						if ( !target.is( 'table' ) && !target.getAscendant( 'tbody', 1 ) )
-							return;
-
-						table = target.getAscendant( 'table', 1 );
-
-						if ( !( pillars = table.getCustomData( '_cke_table_pillars' ) ) )
-						{
-							// Cache table pillars calculation result.
-							table.setCustomData( '_cke_table_pillars', ( pillars = buildTableColumnPillars( table ) ) );
-							table.on( 'mouseout', clearPillarsCache );
-							table.on( 'mousedown', clearPillarsCache );
-						}
-
-						var pillar = getPillarAtPosition( pillars, evt.$.clientX );
-						if ( pillar )
-						{
-							!resizer && ( resizer = new columnResizer( editor ) );
-							resizer.attachTo( pillar );
-						}
-					});
-			});
-		}
-	});
-
-})();

data/generators/ckeditor_install/templates/ckeditor/_source/plugins/tabletools/dialogs/tableCell.js

@@ -1,533 +0,0 @@
-/*
-Copyright (c) 2003-2010, CKSource - Frederico Knabben. All rights reserved.
-For licensing, see LICENSE.html or http://ckeditor.com/license
-*/
-
-CKEDITOR.dialog.add( 'cellProperties', function( editor )
-	{
-		var langTable = editor.lang.table,
-			langCell = langTable.cell,
-			langCommon = editor.lang.common,
-			validate = CKEDITOR.dialog.validate,
-			widthPattern = /^(\d+(?:\.\d+)?)(px|%)$/,
-			heightPattern = /^(\d+(?:\.\d+)?)px$/,
-			bind = CKEDITOR.tools.bind,
-			spacer = { type : 'html', html : ' ' };
-
-		/**
-		 *
-		 * @param dialogName
-		 * @param callback [ childDialog ]
-		 */
-		function getDialogValue( dialogName, callback )
-		{
-			var onOk = function()
-			{
-				releaseHandlers( this );
-				callback( this, this._.parentDialog );
-				this._.parentDialog.changeFocus( true );
-			};
-			var onCancel = function()
-			{
-				releaseHandlers( this );
-				this._.parentDialog.changeFocus();
-			};
-			var releaseHandlers = function( dialog )
-			{
-				dialog.removeListener( 'ok', onOk );
-				dialog.removeListener( 'cancel', onCancel );
-			};
-			var bindToDialog = function( dialog )
-			{
-				dialog.on( 'ok', onOk );
-				dialog.on( 'cancel', onCancel );
-			};
-			editor.execCommand( dialogName );
-			if ( editor._.storedDialogs.colordialog )
-				bindToDialog( editor._.storedDialogs.colordialog );
-			else
-			{
-				CKEDITOR.on( 'dialogDefinition', function( e )
-				{
-					if ( e.data.name != dialogName )
-						return;
-
-					var definition = e.data.definition;
-
-					e.removeListener();
-					definition.onLoad = CKEDITOR.tools.override( definition.onLoad, function( orginal )
-					{
-						return function()
-						{
-							bindToDialog( this );
-							definition.onLoad = orginal;
-							if ( typeof orginal == 'function' )
-								orginal.call( this );
-						};
-					} );
-				});
-			}
-		}
-
-		return {
-			title : langCell.title,
-			minWidth : CKEDITOR.env.ie && CKEDITOR.env.quirks ? 550 : 480,
-			minHeight : CKEDITOR.env.ie ? ( CKEDITOR.env.quirks ? 180 : 150 ) : 140,
-			contents : [
-				{
-					id : 'info',
-					label : langCell.title,
-					accessKey : 'I',
-					elements :
-					[
-						{
-							type : 'hbox',
-							widths : [ '40%', '5%', '40%' ],
-							children :
-							[
-								{
-									type : 'vbox',
-									padding : 0,
-									children :
-									[
-										{
-											type : 'hbox',
-											widths : [ '70%', '30%' ],
-											children :
-											[
-												{
-													type : 'text',
-													id : 'width',
-													label : langTable.width,
-													widths : [ '71%', '29%' ],
-													labelLayout : 'horizontal',
-													validate : validate[ 'number' ]( langCell.invalidWidth ),
-
-													// Extra labelling of width unit type.
-													onLoad : function()
-													{
-														var widthType = this.getDialog().getContentElement( 'info', 'widthType' ),
-															labelElement = widthType.getElement(),
-															inputElement = this.getInputElement(),
-															ariaLabelledByAttr = inputElement.getAttribute( 'aria-labelledby' );
-
-														inputElement.setAttribute( 'aria-labelledby', [ ariaLabelledByAttr, labelElement.$.id ].join( ' ' ) );
-													},
-
-													setup : function( element )
-													{
-														var widthAttr = parseInt( element.getAttribute( 'width' ), 10 ),
-																widthStyle = parseInt( element.getStyle( 'width' ), 10 );
-
-														!isNaN( widthAttr ) && this.setValue( widthAttr );
-														!isNaN( widthStyle ) && this.setValue( widthStyle );
-													},
-													commit : function( element )
-													{
-														var value = parseInt( this.getValue(), 10 ),
-																unit = this.getDialog().getValueOf( 'info', 'widthType' );
-
-														if ( !isNaN( value ) )
-															element.setStyle( 'width', value + unit );
-														else
-															element.removeStyle( 'width' );
-
-														element.removeAttribute( 'width' );
-													},
-													'default' : ''
-												},
-												{
-													type : 'select',
-													id : 'widthType',
-													labelLayout : 'horizontal',
-													widths : [ '0%', '100%' ],
-													label : editor.lang.table.widthUnit,
-													labelStyle: 'display:none',
-													'default' : 'px',
-													items :
-													[
-														[ langTable.widthPx, 'px' ],
-														[ langTable.widthPc, '%' ]
-													],
-													setup : function( selectedCell )
-													{
-														var widthMatch = widthPattern.exec( selectedCell.getStyle( 'width' ) || selectedCell.getAttribute( 'width' ) );
-														if ( widthMatch )
-															this.setValue( widthMatch[2] );
-													}
-												}
-											]
-										},
-										{
-											type : 'hbox',
-											widths : [ '70%', '30%' ],
-											children :
-											[
-												{
-													type : 'text',
-													id : 'height',
-													label : langTable.height,
-													'default' : '',
-													widths : [ '71%', '29%' ],
-													labelLayout : 'horizontal',
-													validate : validate[ 'number' ]( langCell.invalidHeight ),
-
-													// Extra labelling of height unit type.
-													onLoad : function()
-													{
-														var heightType = this.getDialog().getContentElement( 'info', 'htmlHeightType' ),
-															labelElement = heightType.getElement(),
-															inputElement = this.getInputElement(),
-															ariaLabelledByAttr = inputElement.getAttribute( 'aria-labelledby' );
-
-														inputElement.setAttribute( 'aria-labelledby', [ ariaLabelledByAttr, labelElement.$.id ].join( ' ' ) );
-													},
-
-													setup : function( element )
-													{
-														var heightAttr = parseInt( element.getAttribute( 'height' ), 10 ),
-																heightStyle = parseInt( element.getStyle( 'height' ), 10 );
-
-														!isNaN( heightAttr ) && this.setValue( heightAttr );
-														!isNaN( heightStyle ) && this.setValue( heightStyle );
-													},
-													commit : function( element )
-													{
-														var value = parseInt( this.getValue(), 10 );
-
-														if ( !isNaN( value ) )
-															element.setStyle( 'height', CKEDITOR.tools.cssLength( value ) );
-														else
-															element.removeStyle( 'height' );
-
-														element.removeAttribute( 'height' );
-													}
-												},
-												{
-													id : 'htmlHeightType',
-													type : 'html',
-													html : langTable.widthPx
-												}
-											]
-										},
-										spacer,
-										{
-											type : 'select',
-											id : 'wordWrap',
-											labelLayout : 'horizontal',
-											label : langCell.wordWrap,
-											widths : [ '50%', '50%' ],
-											'default' : 'yes',
-											items :
-											[
-												[ langCell.yes, 'yes' ],
-												[ langCell.no, 'no' ]
-											],
-											setup : function( element )
-											{
-												var wordWrapAttr = element.getAttribute( 'noWrap' ),
-														wordWrapStyle = element.getStyle( 'white-space' );
-
-												if ( wordWrapStyle == 'nowrap' || wordWrapAttr )
-													this.setValue( 'no' );
-											},
-											commit : function( element )
-											{
-												if ( this.getValue() == 'no' )
-													element.setStyle( 'white-space', 'nowrap' );
-												else
-													element.removeStyle( 'white-space' );
-
-												element.removeAttribute( 'noWrap' );
-											}
-										},
-										spacer,
-										{
-											type : 'select',
-											id : 'hAlign',
-											labelLayout : 'horizontal',
-											label : langCell.hAlign,
-											widths : [ '50%', '50%' ],
-											'default' : '',
-											items :
-											[
-												[ langCommon.notSet, '' ],
-												[ langTable.alignLeft, 'left' ],
-												[ langTable.alignCenter, 'center' ],
-												[ langTable.alignRight, 'right' ]
-											],
-											setup : function( element )
-											{
-												var alignAttr = element.getAttribute( 'align' ),
-														textAlignStyle = element.getStyle( 'text-align');
-
-												this.setValue(  textAlignStyle || alignAttr || '' );
-											},
-											commit : function( selectedCell )
-											{
-												var value = this.getValue();
-
-												if ( value )
-													selectedCell.setStyle( 'text-align', value );
-												else
-													selectedCell.removeStyle( 'text-align' );
-
-												selectedCell.removeAttribute( 'align' );
-											}
-										},
-										{
-											type : 'select',
-											id : 'vAlign',
-											labelLayout : 'horizontal',
-											label : langCell.vAlign,
-											widths : [ '50%', '50%' ],
-											'default' : '',
-											items :
-											[
-												[ langCommon.notSet, '' ],
-												[ langCell.alignTop, 'top' ],
-												[ langCell.alignMiddle, 'middle' ],
-												[ langCell.alignBottom, 'bottom' ],
-												[ langCell.alignBaseline, 'baseline' ]
-											],
-											setup : function( element )
-											{
-												var vAlignAttr = element.getAttribute( 'vAlign' ),
-														vAlignStyle = element.getStyle( 'vertical-align' );
-
-												switch( vAlignStyle )
-												{
-													// Ignore all other unrelated style values..
-													case 'top':
-													case 'middle':
-													case 'bottom':
-													case 'baseline':
-														break;
-													default:
-														vAlignStyle = '';
-												}
-
-												this.setValue( vAlignStyle || vAlignAttr || '' );
-											},
-											commit : function( element )
-											{
-												var value = this.getValue();
-
-												if ( value )
-													element.setStyle( 'vertical-align', value );
-												else
-													element.removeStyle( 'vertical-align' );
-
-												element.removeAttribute( 'vAlign' );
-											}
-										}
-									]
-								},
-								spacer,
-								{
-									type : 'vbox',
-									padding : 0,
-									children :
-									[
-										{
-											type : 'select',
-											id : 'cellType',
-											label : langCell.cellType,
-											labelLayout : 'horizontal',
-											widths : [ '50%', '50%' ],
-											'default' : 'td',
-											items :
-											[
-												[ langCell.data, 'td' ],
-												[ langCell.header, 'th' ]
-											],
-											setup : function( selectedCell )
-											{
-												this.setValue( selectedCell.getName() );
-											},
-											commit : function( selectedCell )
-											{
-												selectedCell.renameNode( this.getValue() );
-											}
-										},
-										spacer,
-										{
-											type : 'text',
-											id : 'rowSpan',
-											label : langCell.rowSpan,
-											labelLayout : 'horizontal',
-											widths : [ '50%', '50%' ],
-											'default' : '',
-											validate : validate.integer( langCell.invalidRowSpan ),
-											setup : function( selectedCell )
-											{
-												var attrVal = parseInt( selectedCell.getAttribute( 'rowSpan' ), 10 );
-												if ( attrVal && attrVal  != 1 )
-												 	this.setValue(  attrVal );
-											},
-											commit : function( selectedCell )
-											{
-												var value = parseInt( this.getValue(), 10 );
-												if ( value && value != 1 )
-													selectedCell.setAttribute( 'rowSpan', this.getValue() );
-												else
-													selectedCell.removeAttribute( 'rowSpan' );
-											}
-										},
-										{
-											type : 'text',
-											id : 'colSpan',
-											label : langCell.colSpan,
-											labelLayout : 'horizontal',
-											widths : [ '50%', '50%' ],
-											'default' : '',
-											validate : validate.integer( langCell.invalidColSpan ),
-											setup : function( element )
-											{
-												var attrVal = parseInt( element.getAttribute( 'colSpan' ), 10 );
-												if ( attrVal && attrVal  != 1 )
-												 	this.setValue(  attrVal );
-											},
-											commit : function( selectedCell )
-											{
-												var value = parseInt( this.getValue(), 10 );
-												if ( value && value != 1 )
-													selectedCell.setAttribute( 'colSpan', this.getValue() );
-												else
-													selectedCell.removeAttribute( 'colSpan' );
-											}
-										},
-										spacer,
-										{
-											type : 'hbox',
-											padding : 0,
-											widths : [ '80%', '20%' ],
-											children :
-											[
-												{
-													type : 'text',
-													id : 'bgColor',
-													label : langCell.bgColor,
-													labelLayout : 'horizontal',
-													widths : [ '70%', '30%' ],
-													'default' : '',
-													setup : function( element )
-													{
-														var bgColorAttr = element.getAttribute( 'bgColor' ),
-																bgColorStyle = element.getStyle( 'background-color' );
-
-														this.setValue( bgColorStyle || bgColorAttr );
-													},
-													commit : function( selectedCell )
-													{
-														var value = this.getValue();
-
-														if ( value )
-															selectedCell.setStyle( 'background-color', this.getValue() );
-														else
-															selectedCell.removeStyle( 'background-color' );
-
-														selectedCell.removeAttribute( 'bgColor');
-													}
-												},
-												{
-													type : 'button',
-													id : 'bgColorChoose',
-													label : langCell.chooseColor,
-													style : 'margin-left: 10px',
-													onClick : function()
-													{
-														var self = this;
-														getDialogValue( 'colordialog', function( colorDialog )
-														{
-															self.getDialog().getContentElement( 'info', 'bgColor' ).setValue(
-																colorDialog.getContentElement( 'picker', 'selectedColor' ).getValue()
-															);
-														} );
-													}
-												}
-											]
-										},
-										spacer,
-										{
-											type : 'hbox',
-											padding : 0,
-											widths : [ '80%', '20%' ],
-											children :
-											[
-												{
-													type : 'text',
-													id : 'borderColor',
-													label : langCell.borderColor,
-													labelLayout : 'horizontal',
-													widths : [ '70%', '30%' ],
-													'default' : '',
-													setup : function( element )
-													{
-														var borderColorAttr = element.getAttribute( 'borderColor' ),
-																borderColorStyle = element.getStyle( 'border-color' );
-
-														this.setValue( borderColorStyle || borderColorAttr );
-													},
-													commit : function( selectedCell )
-													{
-														var value = this.getValue();
-														if ( value )
-															selectedCell.setStyle( 'border-color', this.getValue() );
-														else
-															selectedCell.removeStyle( 'border-color' );
-
-														selectedCell.removeAttribute( 'borderColor');
-													}
-												},
-												{
-													type : 'button',
-													id : 'borderColorChoose',
-													label : langCell.chooseColor,
-													style : 'margin-left: 10px',
-													onClick : function()
-													{
-														var self = this;
-														getDialogValue( 'colordialog', function( colorDialog )
-														{
-															self.getDialog().getContentElement( 'info', 'borderColor' ).setValue(
-																colorDialog.getContentElement( 'picker', 'selectedColor' ).getValue()
-															);
-														} );
-													}
-												}
-											]
-										}
-									]
-								}
-							]
-						}
-					]
-				}
-			],
-			onShow : function()
-			{
-				this.cells = CKEDITOR.plugins.tabletools.getSelectedCells(
-					this._.editor.getSelection() );
-				this.setupContent( this.cells[ 0 ] );
-			},
-			onOk : function()
-			{
-				var selection = this._.editor.getSelection(),
-					bookmarks = selection.createBookmarks();
-
-				var cells = this.cells;
-				for ( var i = 0 ; i < cells.length ; i++ )
-					this.commitContent( cells[ i ] );
-
-				selection.selectBookmarks( bookmarks );
-
-				// Force selectionChange event because of alignment style.
-				var firstElement = selection.getStartElement();
-				var currentPath = new CKEDITOR.dom.elementPath( firstElement );
-
-				this._.editor._.selectionPreviousPath = currentPath;
-				this._.editor.fire( 'selectionChange', { selection : selection, path : currentPath, element : firstElement } );
-			}
-		};
-	} );