Vlad Kurkin (b_vladi) wrote in changelog,
Vlad Kurkin
b_vladi
changelog

[livejournal] r20374: LJSV-1826: Size of images by user, inser...

Committer: vkurkin
LJSV-1826: Size of images by user, inserted in RTE, in some cases ignored
U   trunk/htdocs/js/ck/plugins/image/dialogs/image.js
Modified: trunk/htdocs/js/ck/plugins/image/dialogs/image.js
===================================================================
--- trunk/htdocs/js/ck/plugins/image/dialogs/image.js	2011-10-19 06:26:26 UTC (rev 20373)
+++ trunk/htdocs/js/ck/plugins/image/dialogs/image.js	2011-10-19 07:24:43 UTC (rev 20374)
@@ -1,12 +1,10 @@
 /*
-Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
-For licensing, see LICENSE.html or http://ckeditor.com/license
-*/
+ Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
+ For licensing, see LICENSE.html or http://ckeditor.com/license
+ */
 
-(function()
-{
-	var imageDialog = function( editor, dialogType )
-	{
+(function(){
+	var imageDialog = function(editor, dialogType){
 		// Load image preview.
 		var IMAGE = 1,
 			LINK = 2,
@@ -16,67 +14,66 @@
 			regexGetSizeOrEmpty = /(^\s*(\d+)((px)|\%)?\s*$)|^$/i,
 			pxLengthRegex = /^\d+px$/;
 
-		var onSizeChange = function()
-		{
+		var onSizeChange = function(){
 			var value = this.getValue(),	// This = input element.
 				dialog = this.getDialog(),
-				aMatch  =  value.match( regexGetSize );	// Check value
-			if ( aMatch )
-			{
-				if ( aMatch[2] == '%' )			// % is allowed - > unlock ratio.
-					switchLockRatio( dialog, false );	// Unlock.
+				aMatch = value.match(regexGetSize);	// Check value
+			if(aMatch){
+				if(aMatch[2] == '%')			// % is allowed - > unlock ratio.
+				{
+					switchLockRatio(dialog, false);
+				}	// Unlock.
 				value = aMatch[1];
 			}
 
 			// Only if ratio is locked
-			if ( dialog.lockRatio )
-			{
+			if(dialog.lockRatio){
 				var oImageOriginal = dialog.originalElement;
-				if ( oImageOriginal.getCustomData( 'isReady' ) == 'true' )
-				{
-					if ( this.id == 'txtHeight' )
+				if(oImageOriginal.getCustomData('isReady') == 'true'){
+					if(this.id == 'txtHeight'){
+						if(value && value != '0'){
+							value = Math.round(oImageOriginal.$.width * ( value / oImageOriginal.$.height ));
+						}
+						if(!isNaN(value)){
+							dialog.setValueOf('info', 'txtWidth', value);
+						}
+					} else		//this.id = txtWidth.
 					{
-						if ( value && value != '0' )
-							value = Math.round( oImageOriginal.$.width * ( value  / oImageOriginal.$.height ) );
-						if ( !isNaN( value ) )
-							dialog.setValueOf( 'info', 'txtWidth', value );
+						if(value && value != '0'){
+							value = Math.round(oImageOriginal.$.height * ( value / oImageOriginal.$.width ));
+						}
+						if(!isNaN(value)){
+							dialog.setValueOf('info', 'txtHeight', value);
+						}
 					}
-					else		//this.id = txtWidth.
-					{
-						if ( value && value != '0' )
-							value = Math.round( oImageOriginal.$.height * ( value  / oImageOriginal.$.width ) );
-						if ( !isNaN( value ) )
-							dialog.setValueOf( 'info', 'txtHeight', value );
-					}
 				}
 			}
-			updatePreview( dialog );
+			updatePreview(dialog);
 		};
 
-		var updatePreview = function( dialog )
-		{
+		var updatePreview = function(dialog){
 			//Don't load before onShow.
-			if ( !dialog.originalElement || !dialog.preview )
+			if(!dialog.originalElement || !dialog.preview){
 				return 1;
+			}
 
 			// Read attributes and update imagePreview;
-			dialog.commitContent( PREVIEW, dialog.preview );
+			dialog.commitContent(PREVIEW, dialog.preview);
 			return 0;
 		};
 
 		// Custom commit dialog logic, where we're intended to give inline style
 		// field (txtdlgGenStyle) higher priority to avoid overwriting styles contribute
 		// by other fields.
-		function commitContent()
-		{
+		function commitContent(){
 			var args = arguments;
-			var inlineStyleField = this.getContentElement( 'advanced', 'txtdlgGenStyle' );
-			inlineStyleField && inlineStyleField.commit.apply( inlineStyleField, args );
+			var inlineStyleField = this.getContentElement('advanced', 'txtdlgGenStyle');
+			inlineStyleField && inlineStyleField.commit.apply(inlineStyleField, args);
 
-			this.foreach( function( widget )
-			{
-				if ( widget.commit &&  widget.id != 'txtdlgGenStyle' )
-					widget.commit.apply( widget, args );
+			this.foreach(function(widget){
+				if(widget.commit && widget.id != 'txtdlgGenStyle'){
+					widget.commit.apply(widget, args);
+				}
 			});
 		}
 
@@ -85,118 +82,109 @@
 
 		// Synchronous field values to other impacted fields is required, e.g. border
 		// size change should alter inline-style text as well.
-		function commitInternally( targetFields )
-		{
-			if ( incommit )
+		function commitInternally(targetFields){
+			if(incommit){
 				return;
+			}
 
 			incommit = 1;
 
 			var dialog = this.getDialog(),
 				element = dialog.imageElement;
-			if ( element )
-			{
+			if(element){
 				// Commit this field and broadcast to target fields.
-				this.commit( IMAGE, element );
+				this.commit(IMAGE, element);
 
-				targetFields = [].concat( targetFields );
+				targetFields = [].concat(targetFields);
 				var length = targetFields.length,
 					field;
-				for ( var i = 0; i < length; i++ )
-				{
-					field = dialog.getContentElement.apply( dialog, targetFields[ i ].split( ':' ) );
+				for(var i = 0; i < length; i++){
+					field = dialog.getContentElement.apply(dialog, targetFields[ i ].split(':'));
 					// May cause recursion.
-					field && field.setup( IMAGE, element );
+					field && field.setup(IMAGE, element);
 				}
 			}
 
 			incommit = 0;
 		}
 
-		var switchLockRatio = function( dialog, value )
-		{
-			if ( !dialog.getContentElement( 'info', 'ratioLock' ) )
+		var switchLockRatio = function(dialog, value){
+			if(!dialog.getContentElement('info', 'ratioLock')){
 				return null;
+			}
 
 			var oImageOriginal = dialog.originalElement;
 
 			// Dialog may already closed. (#5505)
-			if( !oImageOriginal )
+			if(!oImageOriginal){
 				return null;
+			}
 
 			// Check image ratio and original image ratio, but respecting user's preference.
-			if ( value == 'check' )
-			{
-				if ( !dialog.userlockRatio && oImageOriginal.getCustomData( 'isReady' ) == 'true'  )
-				{
-					var width = dialog.getValueOf( 'info', 'txtWidth' ),
-						height = dialog.getValueOf( 'info', 'txtHeight' ),
+			if(value == 'check'){
+				if(!dialog.userlockRatio && oImageOriginal.getCustomData('isReady') == 'true'){
+					var width = dialog.getValueOf('info', 'txtWidth'),
+						height = dialog.getValueOf('info', 'txtHeight'),
 						originalRatio = oImageOriginal.$.width * 1000 / oImageOriginal.$.height,
 						thisRatio = width * 1000 / height;
-					dialog.lockRatio  = false;		// Default: unlock ratio
+					dialog.lockRatio = false;		// Default: unlock ratio
 
-					if ( !width && !height )
+					if(!width && !height){
 						dialog.lockRatio = true;
-					else if ( !isNaN( originalRatio ) && !isNaN( thisRatio ) )
-					{
-						if ( Math.round( originalRatio ) == Math.round( thisRatio ) )
+					} else if(!isNaN(originalRatio) && !isNaN(thisRatio)){
+						if(Math.round(originalRatio) == Math.round(thisRatio)){
 							dialog.lockRatio = true;
+						}
 					}
 				}
-			}
-			else if ( value != undefined )
+			} else if(value != undefined){
 				dialog.lockRatio = value;
-			else
-			{
+			} else {
 				dialog.userlockRatio = 1;
 				dialog.lockRatio = !dialog.lockRatio;
 			}
 
-			var ratioButton = CKEDITOR.document.getById( btnLockSizesId );
-			if ( dialog.lockRatio )
-				ratioButton.removeClass( 'cke_btn_unlocked' );
-			else
-				ratioButton.addClass( 'cke_btn_unlocked' );
+			var ratioButton = CKEDITOR.document.getById(btnLockSizesId);
+			if(dialog.lockRatio){
+				ratioButton.removeClass('cke_btn_unlocked');
+			} else {
+				ratioButton.addClass('cke_btn_unlocked');
+			}
 
-			ratioButton.setAttribute( 'aria-checked', dialog.lockRatio );
+			ratioButton.setAttribute('aria-checked', dialog.lockRatio);
 
 			// Ratio button hc presentation - WHITE SQUARE / BLACK SQUARE
-			if ( CKEDITOR.env.hc )
-			{
-				var icon = ratioButton.getChild( 0 );
-				icon.setHtml(  dialog.lockRatio ? CKEDITOR.env.ie ? '\u25A0': '\u25A3' : CKEDITOR.env.ie ? '\u25A1' : '\u25A2' );
+			if(CKEDITOR.env.hc){
+				var icon = ratioButton.getChild(0);
+				icon.setHtml(dialog.lockRatio ? CKEDITOR.env.ie ? '\u25A0' : '\u25A3' : CKEDITOR.env.ie ? '\u25A1' : '\u25A2');
 			}
 
 			return dialog.lockRatio;
 		};
 
-		var resetSize = function( dialog )
-		{
+		var resetSize = function(dialog){
 			var oImageOriginal = dialog.originalElement;
-			if ( oImageOriginal.getCustomData( 'isReady' ) == 'true' )
-			{
-				var widthField = dialog.getContentElement( 'info', 'txtWidth' ),
-					heightField = dialog.getContentElement( 'info', 'txtHeight' );
-				widthField && widthField.setValue( oImageOriginal.$.width );
-				heightField && heightField.setValue( oImageOriginal.$.height );
+			if(oImageOriginal.getCustomData('isReady') == 'true'){
+				var widthField = dialog.getContentElement('info', 'txtWidth'),
+					heightField = dialog.getContentElement('info', 'txtHeight');
+				widthField && widthField.setValue(oImageOriginal.$.width);
+				heightField && heightField.setValue(oImageOriginal.$.height);
 			}
-			updatePreview( dialog );
+			updatePreview(dialog);
 		};
 
-		var setupDimension = function( type, element )
-		{
-			if ( type != IMAGE )
+		var setupDimension = function(type, element){
+			if(type != IMAGE){
 				return;
+			}
 
-			function checkDimension( size, defaultValue )
-			{
-				var aMatch  =  size.match( regexGetSize );
-				if ( aMatch )
-				{
-					if ( aMatch[2] == '%' )				// % is allowed.
+			function checkDimension(size, defaultValue){
+				var aMatch = size.match(regexGetSize);
+				if(aMatch){
+					if(aMatch[2] == '%')				// % is allowed.
 					{
 						aMatch[1] += '%';
-						switchLockRatio( dialog, false );	// Unlock ratio
+						switchLockRatio(dialog, false);	// Unlock ratio
 					}
 					return aMatch[1];
 				}
@@ -206,76 +194,78 @@
 			var dialog = this.getDialog(),
 				value = '',
 				dimension = this.id == 'txtWidth' ? 'width' : 'height',
-				size = element.getAttribute( dimension );
+				size = element.getAttribute(dimension);
 
-			if ( size )
-				value = checkDimension( size, value );
-			value = checkDimension( element.getStyle( dimension ), value );
+			if(size){
+				value = checkDimension(size, value);
+			}
+			value = checkDimension(element.getStyle(dimension), value);
 
-			this.setValue( value );
+			this.setValue(value);
 		};
 
 		var previewPreloader;
 
-		var onImgLoadEvent = function()
-		{
+		var onImgLoadEvent = function(){
 			// Image is ready.
 			var original = this.originalElement;
-			original.setCustomData( 'isReady', 'true' );
-			original.removeListener( 'load', onImgLoadEvent );
-			original.removeListener( 'error', onImgLoadErrorEvent );
-			original.removeListener( 'abort', onImgLoadErrorEvent );
+			original.setCustomData('isReady', 'true');
+			original.removeListener('load', onImgLoadEvent);
+			original.removeListener('error', onImgLoadErrorEvent);
+			original.removeListener('abort', onImgLoadErrorEvent);
 
 			// Hide loader
-			CKEDITOR.document.getById( imagePreviewLoaderId ).setStyle( 'display', 'none' );
+			CKEDITOR.document.getById(imagePreviewLoaderId).setStyle('display', 'none');
 
 			// New image -> new domensions
-			if ( !this.dontResetSize )
-				resetSize( this );
+			if(!this.dontResetSize){
+				resetSize(this);
+			}
 
-			if ( this.firstLoad )
-				CKEDITOR.tools.setTimeout( function(){ switchLockRatio( this, 'check' ); }, 0, this );
+			if(this.firstLoad){
+				CKEDITOR.tools.setTimeout(function(){
+					switchLockRatio(this, 'check');
+				}, 0, this);
+			}
 
 			this.firstLoad = false;
 			this.dontResetSize = false;
 		};
 
-		var onImgLoadErrorEvent = function()
-		{
+		var onImgLoadErrorEvent = function(){
 			// Error. Image is not loaded.
 			var original = this.originalElement;
-			original.removeListener( 'load', onImgLoadEvent );
-			original.removeListener( 'error', onImgLoadErrorEvent );
-			original.removeListener( 'abort', onImgLoadErrorEvent );
+			original.removeListener('load', onImgLoadEvent);
+			original.removeListener('error', onImgLoadErrorEvent);
+			original.removeListener('abort', onImgLoadErrorEvent);
 
 			// Set Error image.
-			var noimage = CKEDITOR.getUrl( editor.skinPath + 'images/noimage.png' );
+			var noimage = CKEDITOR.getUrl(editor.skinPath + 'images/noimage.png');
 
-			if ( this.preview )
-				this.preview.setAttribute( 'src', noimage );
+			if(this.preview){
+				this.preview.setAttribute('src', noimage);
+			}
 
 			// Hide loader
-			CKEDITOR.document.getById( imagePreviewLoaderId ).setStyle( 'display', 'none' );
-			switchLockRatio( this, false );	// Unlock.
+			CKEDITOR.document.getById(imagePreviewLoaderId).setStyle('display', 'none');
+			switchLockRatio(this, false);	// Unlock.
 		};
 
-		var numbering = function( id )
-			{
-				return CKEDITOR.tools.getNextId() + '_' + id;
-			},
-			btnLockSizesId = numbering( 'btnLockSizes' ),
-			btnResetSizeId = numbering( 'btnResetSize' ),
-			imagePreviewLoaderId = numbering( 'ImagePreviewLoader' ),
-			imagePreviewBoxId = numbering( 'ImagePreviewBox' ),
-			previewLinkId = numbering( 'previewLink' ),
-			previewImageId = numbering( 'previewImage' );
+		var numbering = function(id){
+			return CKEDITOR.tools.getNextId() + '_' + id;
+		},
+			btnLockSizesId = numbering('btnLockSizes'),
+			btnResetSizeId = numbering('btnResetSize'),
+			imagePreviewLoaderId = numbering('ImagePreviewLoader'),
+			imagePreviewBoxId = numbering('ImagePreviewBox'),
+			previewLinkId = numbering('previewLink'),
+			previewImageId = numbering('previewImage');
 
 		return {
 			title : editor.lang.image[ dialogType == 'image' ? 'title' : 'titleButton' ],
 			minWidth : 480,
 			minHeight : 360,
-			onShow : function()
-			{
+			onShow : function(){
 				this.imageElement = false;
 				this.linkElement = false;
 
@@ -292,192 +282,173 @@
 				var editor = this.getParentEditor(),
 					sel = this.getParentEditor().getSelection(),
 					element = sel.getSelectedElement(),
-					link = element && element.getAscendant( 'a' );
+					link = element && element.getAscendant('a');
 
 				//Hide loader.
-				CKEDITOR.document.getById( imagePreviewLoaderId ).setStyle( 'display', 'none' );
+				CKEDITOR.document.getById(imagePreviewLoaderId).setStyle('display', 'none');
 				// Create the preview before setup the dialog contents.
-				previewPreloader = new CKEDITOR.dom.element( 'img', editor.document );
-				this.preview = CKEDITOR.document.getById( previewImageId );
+				previewPreloader = new CKEDITOR.dom.element('img', editor.document);
+				this.preview = CKEDITOR.document.getById(previewImageId);
 
 				// Copy of the image
-				this.originalElement = editor.document.createElement( 'img' );
-				this.originalElement.setAttribute( 'alt', '' );
-				this.originalElement.setCustomData( 'isReady', 'false' );
+				this.originalElement = editor.document.createElement('img');
+				this.originalElement.setAttribute('alt', '');
+				this.originalElement.setCustomData('isReady', 'false');
 
-				if ( link )
-				{
+				if(link){
 					this.linkElement = link;
 					this.linkEditMode = true;
 
 					// Look for Image element.
 					var linkChildren = link.getChildren();
-					if ( linkChildren.count() == 1 )			// 1 child.
+					if(linkChildren.count() == 1)			// 1 child.
 					{
-						var childTagName = linkChildren.getItem( 0 ).getName();
-						if ( childTagName == 'img' || childTagName == 'input' )
-						{
-							this.imageElement = linkChildren.getItem( 0 );
-							if ( this.imageElement.getName() == 'img' )
+						var childTagName = linkChildren.getItem(0).getName();
+						if(childTagName == 'img' || childTagName == 'input'){
+							this.imageElement = linkChildren.getItem(0);
+							if(this.imageElement.getName() == 'img'){
 								this.imageEditMode = 'img';
-							else if ( this.imageElement.getName() == 'input' )
+							} else if(this.imageElement.getName() == 'input'){
 								this.imageEditMode = 'input';
+							}
 						}
 					}
 					// Fill out all fields.
-					if ( dialogType == 'image' )
-						this.setupContent( LINK, link );
+					if(dialogType == 'image'){
+						this.setupContent(LINK, link);
+					}
 				}
 
-				if ( element && element.getName() == 'img' && !element.data( 'cke-realelement' )
-					|| element && element.getName() == 'input' && element.getAttribute( 'type' ) == 'image' )
-				{
+				if(element && element.getName() == 'img' && !element.data('cke-realelement') || element && element.getName() == 'input' && element.getAttribute('type') == 'image'){
 					this.imageEditMode = element.getName();
 					this.imageElement = element;
 				}
 
-				if ( this.imageEditMode )
-				{
+				if(this.imageEditMode){
 					// Use the original element as a buffer from  since we don't want
 					// temporary changes to be committed, e.g. if the dialog is canceled.
 					this.cleanImageElement = this.imageElement;
-					this.imageElement = this.cleanImageElement.clone( true, true );
+					this.imageElement = this.cleanImageElement.clone(true, true);
 
 					// Fill out all fields.
-					this.setupContent( IMAGE, this.imageElement );
+					this.setupContent(IMAGE, this.imageElement);
+				} else {
+					this.imageElement = editor.document.createElement('img');
 				}
-				else
-					this.imageElement =  editor.document.createElement( 'img' );
 
 				// Refresh LockRatio button
-				switchLockRatio ( this, true );
+				switchLockRatio(this, true);
 
 				// Dont show preview if no URL given.
-				if ( !CKEDITOR.tools.trim( this.getValueOf( 'info', 'txtUrl' ) ) )
-				{
-					this.preview.removeAttribute( 'src' );
-					this.preview.setStyle( 'display', 'none' );
+				if(!CKEDITOR.tools.trim(this.getValueOf('info', 'txtUrl'))){
+					this.preview.removeAttribute('src');
+					this.preview.setStyle('display', 'none');
 				}
 			},
-			onOk : function()
-			{
+			onOk : function(){
 				// Edit existing Image.
-				if ( this.imageEditMode )
-				{
+				if(this.imageEditMode){
 					var imgTagName = this.imageEditMode;
 
 					// Image dialog and Input element.
-					if ( dialogType == 'image' && imgTagName == 'input' && confirm( editor.lang.image.button2Img ) )
-					{
+					if(dialogType == 'image' && imgTagName == 'input' && confirm(editor.lang.image.button2Img)){
 						// Replace INPUT-> IMG
 						imgTagName = 'img';
-						this.imageElement = editor.document.createElement( 'img' );
-						this.imageElement.setAttribute( 'alt', '' );
-						editor.insertElement( this.imageElement );
+						this.imageElement = editor.document.createElement('img');
+						this.imageElement.setAttribute('alt', '');
+						editor.insertElement(this.imageElement);
 					}
 					// ImageButton dialog and Image element.
-					else if ( dialogType != 'image' && imgTagName == 'img' && confirm( editor.lang.image.img2Button ))
-					{
+					else if(dialogType != 'image' && imgTagName == 'img' && confirm(editor.lang.image.img2Button)){
 						// Replace IMG -> INPUT
 						imgTagName = 'input';
-						this.imageElement = editor.document.createElement( 'input' );
-						this.imageElement.setAttributes(
-							{
+						this.imageElement = editor.document.createElement('input');
+						this.imageElement.setAttributes({
 								type : 'image',
 								alt : ''
-							}
-						);
-						editor.insertElement( this.imageElement );
-					}
-					else
-					{
+							});
+						editor.insertElement(this.imageElement);
+					} else {
 						// Restore the original element before all commits.
 						this.imageElement = this.cleanImageElement;
 						delete this.cleanImageElement;
 					}
-				}
-				else	// Create a new image.
+				} else	// Create a new image.
 				{
 					// Image dialog -> create IMG element.
-					if ( dialogType == 'image' )
-						this.imageElement = editor.document.createElement( 'img' );
-					else
-					{
-						this.imageElement = editor.document.createElement( 'input' );
-						this.imageElement.setAttribute ( 'type' ,'image' );
+					if(dialogType == 'image'){
+						this.imageElement = editor.document.createElement('img');
+					} else {
+						this.imageElement = editor.document.createElement('input');
+						this.imageElement.setAttribute('type', 'image');
 					}
-					this.imageElement.setAttribute( 'alt', '' );
+					this.imageElement.setAttribute('alt', '');
 				}
 
 				// Create a new link.
-				if ( !this.linkEditMode )
-					this.linkElement = editor.document.createElement( 'a' );
+				if(!this.linkEditMode){
+					this.linkElement = editor.document.createElement('a');
+				}
 
 				// Set attributes.
-				this.commitContent( IMAGE, this.imageElement );
-				this.commitContent( LINK, this.linkElement );
+				this.commitContent(IMAGE, this.imageElement);
+				this.commitContent(LINK, this.linkElement);
 
 				// Remove empty style attribute.
-				if ( !this.imageElement.getAttribute( 'style' ) )
-					this.imageElement.removeAttribute( 'style' );
+				if(!this.imageElement.getAttribute('style')){
+					this.imageElement.removeAttribute('style');
+				}
 
 				// Insert a new Image.
-				if ( !this.imageEditMode )
-				{
-					if ( this.addLink )
-					{
+				if(!this.imageEditMode){
+					if(this.addLink){
 						//Insert a new Link.
-						if ( !this.linkEditMode )
+						if(!this.linkEditMode){
+							editor.insertElement(this.linkElement);
+							this.linkElement.append(this.imageElement, false);
+						} else	 //Link already exists, image not.
 						{
-							editor.insertElement( this.linkElement );
-							this.linkElement.append( this.imageElement, false );
+							editor.insertElement(this.imageElement);
 						}
-						else	 //Link already exists, image not.
-							editor.insertElement( this.imageElement );
+					} else {
+						editor.insertElement(this.imageElement);
 					}
-					else
-						editor.insertElement( this.imageElement );
-				}
-				else		// Image already exists.
+				} else		// Image already exists.
 				{
 					//Add a new link element.
-					if ( !this.linkEditMode && this.addLink )
-					{
-						editor.insertElement( this.linkElement );
-						this.imageElement.appendTo( this.linkElement );
+					if(!this.linkEditMode && this.addLink){
+						editor.insertElement(this.linkElement);
+						this.imageElement.appendTo(this.linkElement);
 					}
 					//Remove Link, Image exists.
-					else if ( this.linkEditMode && !this.addLink )
-					{
-						editor.getSelection().selectElement( this.linkElement );
-						editor.insertElement( this.imageElement );
+					else if(this.linkEditMode && !this.addLink){
+						editor.getSelection().selectElement(this.linkElement);
+						editor.insertElement(this.imageElement);
 					}
 				}
 			},
-			onLoad : function()
-			{
-				if ( dialogType != 'image' )
-					this.hidePage( 'Link' );		//Hide Link tab.
+			onLoad : function(){
+				if(dialogType != 'image'){
+					this.hidePage('Link');
+				}		//Hide Link tab.
 				var doc = this._.element.getDocument();
 
-				if ( this.getContentElement( 'info', 'ratioLock' ) )
-				{
-					this.addFocusable( doc.getById( btnResetSizeId ), 5 );
-					this.addFocusable( doc.getById( btnLockSizesId ), 5 );
+				if(this.getContentElement('info', 'ratioLock')){
+					this.addFocusable(doc.getById(btnResetSizeId), 5);
+					this.addFocusable(doc.getById(btnLockSizesId), 5);
 				}
 
 				this.commitContent = commitContent;
 			},
-			onHide : function()
-			{
-				if ( this.preview )
-					this.commitContent( CLEANUP, this.preview );
+			onHide : function(){
+				if(this.preview){
+					this.commitContent(CLEANUP, this.preview);
+				}
 
-				if ( this.originalElement )
-				{
-					this.originalElement.removeListener( 'load', onImgLoadEvent );
-					this.originalElement.removeListener( 'error', onImgLoadErrorEvent );
-					this.originalElement.removeListener( 'abort', onImgLoadErrorEvent );
+				if(this.originalElement){
+					this.originalElement.removeListener('load', onImgLoadEvent);
+					this.originalElement.removeListener('error', onImgLoadErrorEvent);
+					this.originalElement.removeListener('abort', onImgLoadErrorEvent);
 					this.originalElement.remove();
 					this.originalElement = false;		// Dialog is closed.
 				}
@@ -490,678 +461,595 @@
 					label : editor.lang.image.infoTab,
 					accessKey : 'I',
 					elements :
-					[
-						{
-							type : 'vbox',
-							padding : 0,
-							children :
-							[
-								{
-									type : 'hbox',
-									widths : [ '280px', '110px' ],
-									align : 'right',
-									children :
+						[
+							{
+								type : 'vbox',
+								padding : 0,
+								children :
 									[
 										{
-											id : 'txtUrl',
-											type : 'text',
-											label : editor.lang.common.url,
-											required: true,
-											onChange : function()
-											{
-												var dialog = this.getDialog(),
-													newUrl = this.getValue();
+											type : 'hbox',
+											widths : [ '280px', '110px' ],
+											align : 'right',
+											children :
+												[
+													{
+														id : 'txtUrl',
+														type : 'text',
+														label : editor.lang.common.url,
+														required: true,
+														onChange : function(){
+															var dialog = this.getDialog(),
+																newUrl = this.getValue();
 
-												//Update original image
-												if ( newUrl.length > 0 )	//Prevent from load before onShow
-												{
-													dialog = this.getDialog();
-													var original = dialog.originalElement;
+															//Update original image
+															if(newUrl.length > 0)	//Prevent from load before onShow
+															{
+																dialog = this.getDialog();
+																var original = dialog.originalElement;
 
-													dialog.preview.removeStyle( 'display' );
+																dialog.preview.removeStyle('display');
 
-													original.setCustomData( 'isReady', 'false' );
-													// Show loader
-													var loader = CKEDITOR.document.getById( imagePreviewLoaderId );
-													if ( loader )
-														loader.setStyle( 'display', '' );
+																original.setCustomData('isReady', 'false');
+																// Show loader
+																var loader = CKEDITOR.document.getById(imagePreviewLoaderId);
+																if(loader){
+																	loader.setStyle('display', '');
+																}
 
-													original.on( 'load', onImgLoadEvent, dialog );
-													original.on( 'error', onImgLoadErrorEvent, dialog );
-													original.on( 'abort', onImgLoadErrorEvent, dialog );
-													original.setAttribute( 'src', newUrl );
+																original.on('load', onImgLoadEvent, dialog);
+																original.on('error', onImgLoadErrorEvent, dialog);
+																original.on('abort', onImgLoadErrorEvent, dialog);
+																original.setAttribute('src', newUrl);
 
-													// Query the preloader to figure out the url impacted by based href.
-													previewPreloader.setAttribute( 'src', newUrl );
-													dialog.preview.setAttribute( 'src', previewPreloader.$.src );
-													updatePreview( dialog );
-												}
-												// Dont show preview if no URL given.
-												else if ( dialog.preview )
-												{
-													dialog.preview.removeAttribute( 'src' );
-													dialog.preview.setStyle( 'display', 'none' );
-												}
-											},
-											setup : function( type, element )
-											{
-												if ( type == IMAGE )
-												{
-													var url = element.data( 'cke-saved-src' ) || element.getAttribute( 'src' );
-													var field = this;
+																// Query the preloader to figure out the url impacted by based href.
+																previewPreloader.setAttribute('src', newUrl);
+																dialog.preview.setAttribute('src', previewPreloader.$.src);
+																updatePreview(dialog);
+															}
+															// Dont show preview if no URL given.
+															else if(dialog.preview){
+																dialog.preview.removeAttribute('src');
+																dialog.preview.setStyle('display', 'none');
+															}
+														},
+														setup : function(type, element){
+															if(type == IMAGE){
+																var url = element.data('cke-saved-src') || element.getAttribute('src');
+																var field = this;
 
-													this.getDialog().dontResetSize = true;
+																this.getDialog().dontResetSize = true;
 
-													field.setValue( url );		// And call this.onChange()
-													// Manually set the initial value.(#4191)
-													field.setInitValue();
-												}
-											},
-											commit : function( type, element )
-											{
-												if ( type == IMAGE && ( this.getValue() || this.isChanged() ) )
-												{
-													element.data( 'cke-saved-src', this.getValue() );
-													element.setAttribute( 'src', this.getValue() );
-												}
-												else if ( type == CLEANUP )
-												{
-													element.setAttribute( 'src', '' );	// If removeAttribute doesn't work.
-													element.removeAttribute( 'src' );
-												}
-											},
-											validate : CKEDITOR.dialog.validate.notEmpty( editor.lang.image.urlMissing )
-										},
-										{
-											type : 'button',
-											id : 'browse',
-											// v-align with the 'txtUrl' field.
-											// TODO: We need something better than a fixed size here.
-											style : 'display:inline-block;margin-top:10px;',
-											align : 'center',
-											label : editor.lang.common.browseServer,
-											hidden : true,
-											filebrowser : 'info:txtUrl'
+																field.setValue(url);		// And call this.onChange()
+																// Manually set the initial value.(#4191)
+																field.setInitValue();
+															}
+														},
+														commit : function(type, element){
+															if(type == IMAGE && ( this.getValue() || this.isChanged() )){
+																element.data('cke-saved-src', this.getValue());
+																element.setAttribute('src', this.getValue());
+															} else if(type == CLEANUP){
+																element.setAttribute('src', '');	// If removeAttribute doesn't work.
+																element.removeAttribute('src');
+															}
+														},
+														validate : CKEDITOR.dialog.validate.notEmpty(editor.lang.image.urlMissing)
+													},
+													{
+														type : 'button',
+														id : 'browse',
+														// v-align with the 'txtUrl' field.
+														// TODO: We need something better than a fixed size here.
+														style : 'display:inline-block;margin-top:10px;',
+														align : 'center',
+														label : editor.lang.common.browseServer,
+														hidden : true,
+														filebrowser : 'info:txtUrl'
+													}
+												]
 										}
 									]
-								}
-							]
-						},
-						{
-							id : 'txtAlt',
-							type : 'text',
-							label : editor.lang.image.alt,
-							accessKey : 'T',
-							'default' : '',
-							onChange : function()
-							{
-								updatePreview( this.getDialog() );
 							},
-							setup : function( type, element )
 							{
-								if ( type == IMAGE )
-									this.setValue( element.getAttribute( 'alt' ) );
+								id : 'txtAlt',
+								type : 'text',
+								label : editor.lang.image.alt,
+								accessKey : 'T',
+								'default' : '',
+								onChange : function(){
+									updatePreview(this.getDialog());
+								},
+								setup : function(type, element){
+									if(type == IMAGE){
+										this.setValue(element.getAttribute('alt'));
+									}
+								},
+								commit : function(type, element){
+									if(type == IMAGE){
+										if(this.getValue() || this.isChanged()){
+											element.setAttribute('alt', this.getValue());
+										}
+									} else if(type == PREVIEW){
+										element.setAttribute('alt', this.getValue());
+									} else if(type == CLEANUP){
+										element.removeAttribute('alt');
+									}
+								}
 							},
-							commit : function( type, element )
 							{
-								if ( type == IMAGE )
-								{
-									if ( this.getValue() || this.isChanged() )
-										element.setAttribute( 'alt', this.getValue() );
-								}
-								else if ( type == PREVIEW )
-								{
-									element.setAttribute( 'alt', this.getValue() );
-								}
-								else if ( type == CLEANUP )
-								{
-									element.removeAttribute( 'alt' );
-								}
-							}
-						},
-						{
-							type : 'hbox',
-							children :
-							[
-								{
-									id : 'basic',
-									type : 'vbox',
-									children :
+								type : 'hbox',
+								children :
 									[
 										{
-											type : 'hbox',
-											widths : [ '50%', '50%' ],
+											id : 'basic',
+											type : 'vbox',
 											children :
-											[
-												{
-													type : 'vbox',
-													padding : 1,
-													children :
-													[
-														{
-															type : 'text',
-															width: '40px',
-															id : 'txtWidth',
-															label : editor.lang.common.width,
-															onKeyUp : onSizeChange,
-															onChange : function()
-															{
-																commitInternally.call( this, 'advanced:txtdlgGenStyle' );
-															},
-															validate : function()
-															{
-																var aMatch  =  this.getValue().match( regexGetSizeOrEmpty ),
-																	isValid = !!( aMatch && parseInt( aMatch[1], 10 ) !== 0 );
-																if ( !isValid )
-																	alert( editor.lang.common.invalidWidth );
-																return isValid;
-															},
-															setup : setupDimension,
-															commit : function( type, element, internalCommit )
-															{
-																var value = this.getValue();
-																if ( type == IMAGE )
+												[
+													{
+														type : 'hbox',
+														widths : [ '50%', '50%' ],
+														children :
+															[
 																{
-																	if ( value )
-																		element.setStyle( 'width', CKEDITOR.tools.cssLength( value ) );
-																	else
-																		element.removeStyle( 'width' );
+																	type : 'vbox',
+																	padding : 1,
+																	children :
+																		[
+																			{
+																				type : 'text',
+																				width: '40px',
+																				id : 'txtWidth',
+																				label : editor.lang.common.width,
+																				onKeyUp : onSizeChange,
+																				onChange : function(){
+																					commitInternally.call(this, 'advanced:txtdlgGenStyle');
+																				},
+																				validate : function(){
+																					var aMatch = this.getValue().match(regexGetSizeOrEmpty),
+																						isValid = !!( aMatch && parseInt(aMatch[1], 10) !== 0 );
+																					if(!isValid){
+																						alert(editor.lang.common.invalidWidth);
+																					}
+																					return isValid;
+																				},
+																				setup : setupDimension,
+																				commit : function(type, element){
+																					var value = this.getValue();
+																					var dialog = this.getDialog();
+																					if(type == IMAGE){
+																						if(value){
+																							dialog.preview.setStyle('width', CKEDITOR.tools.cssLength(value));
+																							element.setAttribute('width', value);
+																						} else {
+																							dialog.preview.removeStyle('width');
+																							element.removeAttribute('width');
+																						}
+																						element.removeStyle('width');
+																					} else if(type == PREVIEW){
+																						var aMatch = value.match(regexGetSize);
+																						if(!aMatch){
+																							var oImageOriginal = dialog.originalElement;
+																							if(oImageOriginal.getCustomData('isReady') == 'true'){
+																								element.setStyle('width', oImageOriginal.$.width + 'px');
+																							}
+																						} else {
+																							element.setStyle('width', CKEDITOR.tools.cssLength(value));
+																						}
+																					} else if(type == CLEANUP){
+																						element.removeAttribute('width');
+																						element.removeStyle('width');
+																					}
+																				}
+																			},
+																			{
+																				type : 'text',
+																				id : 'txtHeight',
+																				width: '40px',
+																				label : editor.lang.common.height,
+																				onKeyUp : onSizeChange,
+																				onChange : function(){
+																					commitInternally.call(this, 'advanced:txtdlgGenStyle');
+																				},
+																				validate : function(){
+																					var aMatch = this.getValue().match(regexGetSizeOrEmpty),
+																						isValid = !!( aMatch && parseInt(aMatch[1], 10) !== 0 );
+																					if(!isValid){
+																						alert(editor.lang.common.invalidHeight);
+																					}
+																					return isValid;
+																				},
+																				setup : setupDimension,
+																				commit : function(type, element){
+																					var value = this.getValue();
+																					var dialog = this.getDialog();
+																					if(type == IMAGE){
+																						if(value){
+																							dialog.preview.setStyle('height', CKEDITOR.tools.cssLength(value));
+																							element.setAttribute('height', value);
+																						} else {
+																							dialog.preview.removeStyle('height');
+																							element.removeAttribute('height');
+																						}
+																						element.removeStyle('height');
+																					} else if(type == PREVIEW){
+																						var aMatch = value.match(regexGetSize);
+																						if(!aMatch){
+																							var oImageOriginal = dialog.originalElement;
+																							if(oImageOriginal.getCustomData('isReady') == 'true'){
+																								element.setStyle('height', oImageOriginal.$.height + 'px');
+																							}
+																						} else {
+																							element.setStyle('height', CKEDITOR.tools.cssLength(value));
+																						}
+																					} else if(type == CLEANUP){
+																						element.removeAttribute('height');
+																						element.removeStyle('height');
+																					}
 
-																	!internalCommit && element.removeAttribute( 'width' );
-																}
-																else if ( type == PREVIEW )
+																				}
+																			}
+																		]
+																},
 																{
-																	var aMatch = value.match( regexGetSize );
-																	if ( !aMatch )
-																	{
-																		var oImageOriginal = this.getDialog().originalElement;
-																		if ( oImageOriginal.getCustomData( 'isReady' ) == 'true' )
-																			element.setStyle( 'width',  oImageOriginal.$.width + 'px');
-																	}
-																	else
-																		element.setStyle( 'width', CKEDITOR.tools.cssLength( value ) );
-																}
-																else if ( type == CLEANUP )
-																{
-																	element.removeAttribute( 'width' );
-																	element.removeStyle( 'width' );
-																}
-															}
-														},
-														{
-															type : 'text',
-															id : 'txtHeight',
-															width: '40px',
-															label : editor.lang.common.height,
-															onKeyUp : onSizeChange,
-															onChange : function()
-															{
-																commitInternally.call( this, 'advanced:txtdlgGenStyle' );
-															},
-															validate : function()
-															{
-																var aMatch = this.getValue().match( regexGetSizeOrEmpty ),
-																	isValid = !!( aMatch && parseInt( aMatch[1], 10 ) !== 0 );
-																if ( !isValid )
-																	alert( editor.lang.common.invalidHeight );
-																return isValid;
-															},
-															setup : setupDimension,
-															commit : function( type, element, internalCommit )
-															{
-																var value = this.getValue();
-																if ( type == IMAGE )
-																{
-																	if ( value )
-																		element.setStyle( 'height', CKEDITOR.tools.cssLength( value ) );
-																	else
-																		element.removeStyle( 'height' );
+																	id : 'ratioLock',
+																	type : 'html',
+																	style : 'margin-top:30px;width:40px;height:40px;',
+																	onLoad : function(){
+																		// Activate Reset button
+																		var resetButton = CKEDITOR.document.getById(btnResetSizeId),
+																			ratioButton = CKEDITOR.document.getById(btnLockSizesId);
+																		if(resetButton){
+																			resetButton.on('click', function(evt){
+																				resetSize(this);
+																				evt.data && evt.data.preventDefault();
+																			}, this.getDialog());
+																			resetButton.on('mouseover', function(){
+																				this.addClass('cke_btn_over');
+																			}, resetButton);
+																			resetButton.on('mouseout', function(){
+																				this.removeClass('cke_btn_over');
+																			}, resetButton);
+																		}
+																		// Activate (Un)LockRatio button
+																		if(ratioButton){
+																			ratioButton.on('click', function(evt){
+																				var locked = switchLockRatio(this),
+																					oImageOriginal = this.originalElement,
+																					width = this.getValueOf('info', 'txtWidth');
 
-																	!internalCommit && element.removeAttribute( 'height' );
+																				if(oImageOriginal.getCustomData('isReady') == 'true' && width){
+																					var height = oImageOriginal.$.height / oImageOriginal.$.width * width;
+																					if(!isNaN(height)){
+																						this.setValueOf('info', 'txtHeight', Math.round(height));
+																						updatePreview(this);
+																					}
+																				}
+																				evt.data && evt.data.preventDefault();
+																			}, this.getDialog());
+																			ratioButton.on('mouseover', function(){
+																				this.addClass('cke_btn_over');
+																			}, ratioButton);
+																			ratioButton.on('mouseout', function(){
+																				this.removeClass('cke_btn_over');
+																			}, ratioButton);
+																		}
+																	},
+																	html : '<div>' + '<a href="javascript:void(0)" tabindex="-1" title="' + editor.lang.image.lockRatio + '" class="cke_btn_locked" id="' + btnLockSizesId + '" role="checkbox"><span class="cke_icon"></span><span class="cke_label">' + editor.lang.image.lockRatio + '</span></a>' + '<a href="javascript:void(0)" tabindex="-1" title="' + editor.lang.image.resetSize + '" class="cke_btn_reset" id="' + btnResetSizeId + '" role="button"><span class="cke_label">' + editor.lang.image.resetSize + '</span></a>' + '</div>'
 																}
-																else if ( type == PREVIEW )
-																{
-																	var aMatch = value.match( regexGetSize );
-																	if ( !aMatch )
-																	{
-																		var oImageOriginal = this.getDialog().originalElement;
-																		if ( oImageOriginal.getCustomData( 'isReady' ) == 'true' )
-																			element.setStyle( 'height', oImageOriginal.$.height + 'px' );
-																	}
-																	else
-																		element.setStyle( 'height',  CKEDITOR.tools.cssLength( value ) );
-																}
-																else if ( type == CLEANUP )
-																{
-																	element.removeAttribute( 'height' );
-																	element.removeStyle( 'height' );
-																}
-															}
-														}
-													]
-												},
-												{
-													id : 'ratioLock',
-													type : 'html',
-													style : 'margin-top:30px;width:40px;height:40px;',
-													onLoad : function()
+															]
+													},
 													{
-														// Activate Reset button
-														var	resetButton = CKEDITOR.document.getById( btnResetSizeId ),
-															ratioButton = CKEDITOR.document.getById( btnLockSizesId );
-														if ( resetButton )
-														{
-															resetButton.on( 'click', function( evt )
+														type : 'vbox',
+														padding : 1,
+														children :
+															[
 																{
-																	resetSize( this );
-																	evt.data && evt.data.preventDefault();
-																}, this.getDialog() );
-															resetButton.on( 'mouseover', function()
-																{
-																	this.addClass( 'cke_btn_over' );
-																}, resetButton );
-															resetButton.on( 'mouseout', function()
-																{
-																	this.removeClass( 'cke_btn_over' );
-																}, resetButton );
-														}
-														// Activate (Un)LockRatio button
-														if ( ratioButton )
-														{
-															ratioButton.on( 'click', function(evt)
-																{
-																	var locked = switchLockRatio( this ),
-																		oImageOriginal = this.originalElement,
-																		width = this.getValueOf( 'info', 'txtWidth' );
+																	type : 'text',
+																	id : 'txtBorder',
+																	width: '60px',
+																	label : editor.lang.image.border,
+																	'default' : '',
+																	onKeyUp : function(){
+																		updatePreview(this.getDialog());
+																	},
+																	onChange : function(){
+																		commitInternally.call(this, 'advanced:txtdlgGenStyle');
+																	},
+																	validate : CKEDITOR.dialog.validate.integer(editor.lang.image.validateBorder),
+																	setup : function(type, element){
+																		if(type == IMAGE){
+																			var value,
+																				borderStyle = element.getStyle('border-width');
+																			borderStyle = borderStyle && borderStyle.match(/^(\d+px)(?: \1 \1 \1)?$/);
+																			value = borderStyle && parseInt(borderStyle[ 1 ], 10);
+																			isNaN(parseInt(value, 10)) && ( value = element.getAttribute('border') );
+																			this.setValue(value);
+																		}
+																	},
+																	commit : function(type, element, internalCommit){
+																		var value = parseInt(this.getValue(), 10);
+																		if(type == IMAGE || type == PREVIEW){
+																			element.setStyle('border-width', !isNaN(value) && this.isChanged() ? CKEDITOR.tools.cssLength(value) : 0);
+																			element.setStyle('border-style', 'solid');
 
-																	if ( oImageOriginal.getCustomData( 'isReady' ) == 'true' && width )
-																	{
-																		var height = oImageOriginal.$.height / oImageOriginal.$.width * width;
-																		if ( !isNaN( height ) )
-																		{
-																			this.setValueOf( 'info', 'txtHeight', Math.round( height ) );
-																			updatePreview( this );
+																			if(!internalCommit && type == IMAGE){
+																				element.removeAttribute('border');
+																			}
+																		} else if(type == CLEANUP){
+																			element.removeAttribute('border');
+																			element.removeStyle('border-width');
+																			element.removeStyle('border-style');
+																			element.removeStyle('border-color');
 																		}
 																	}
-																	evt.data && evt.data.preventDefault();
-																}, this.getDialog() );
-															ratioButton.on( 'mouseover', function()
+																},
 																{
-																	this.addClass( 'cke_btn_over' );
-																}, ratioButton );
-															ratioButton.on( 'mouseout', function()
-																{
-																	this.removeClass( 'cke_btn_over' );
-																}, ratioButton );
-														}
-													},
-													html : '<div>'+
-														'<a href="javascript:void(0)" tabindex="-1" title="' + editor.lang.image.lockRatio +
-														'" class="cke_btn_locked" id="' + btnLockSizesId + '" role="checkbox"><span class="cke_icon"></span><span class="cke_label">' + editor.lang.image.lockRatio + '</span></a>' +
-														'<a href="javascript:void(0)" tabindex="-1" title="' + editor.lang.image.resetSize +
-														'" class="cke_btn_reset" id="' + btnResetSizeId + '" role="button"><span class="cke_label">' + editor.lang.image.resetSize + '</span></a>'+
-														'</div>'
-												}
-											]
-										},
-										{
-											type : 'vbox',
-											padding : 1,
-											children :
-											[
-												{
-													type : 'text',
-													id : 'txtBorder',
-													width: '60px',
-													label : editor.lang.image.border,
-													'default' : '',
-													onKeyUp : function()
-													{
-														updatePreview( this.getDialog() );
-													},
-													onChange : function()
-													{
-														commitInternally.call( this, 'advanced:txtdlgGenStyle' );
-													},
-													validate : CKEDITOR.dialog.validate.integer( editor.lang.image.validateBorder ),
-													setup : function( type, element )
-													{
-														if ( type == IMAGE )
-														{
-															var value,
-																borderStyle = element.getStyle( 'border-width' );
-															borderStyle = borderStyle && borderStyle.match( /^(\d+px)(?: \1 \1 \1)?$/ );
-															value = borderStyle && parseInt( borderStyle[ 1 ], 10 );
-															isNaN ( parseInt( value, 10 ) ) && ( value = element.getAttribute( 'border' ) );
-															this.setValue( value );
-														}
-													},
-													commit : function( type, element, internalCommit )
-													{
-														var value = parseInt( this.getValue(), 10 );
-														if ( type == IMAGE || type == PREVIEW )
-														{
-															element.setStyle('border-width', !isNaN(value) && this.isChanged() ? CKEDITOR.tools.cssLength(value) : 0);
-															element.setStyle('border-style', 'solid');
+																	type : 'text',
+																	id : 'txtHSpace',
+																	width: '60px',
+																	label : editor.lang.image.hSpace,
+																	'default' : '',
+																	onKeyUp : function(){
+																		updatePreview(this.getDialog());
+																	},
+																	onChange : function(){
+																		commitInternally.call(this, 'advanced:txtdlgGenStyle');
+																	},
+																	validate : CKEDITOR.dialog.validate.integer(editor.lang.image.validateHSpace),
+																	setup : function(type, element){
+																		if(type == IMAGE){
+																			var value,
+																				marginLeftPx,
+																				marginRightPx,
+																				marginLeftStyle = element.getStyle('margin-left'),
+																				marginRightStyle = element.getStyle('margin-right');
 
-															if ( !internalCommit && type == IMAGE )
-																element.removeAttribute( 'border' );
-														}
-														else if ( type == CLEANUP )
-														{
-															element.removeAttribute( 'border' );
-															element.removeStyle( 'border-width' );
-															element.removeStyle( 'border-style' );
-															element.removeStyle( 'border-color' );
-														}
-													}
-												},
-												{
-													type : 'text',
-													id : 'txtHSpace',
-													width: '60px',
-													label : editor.lang.image.hSpace,
-													'default' : '',
-													onKeyUp : function()
-													{
-														updatePreview( this.getDialog() );
-													},
-													onChange : function()
-													{
-														commitInternally.call( this, 'advanced:txtdlgGenStyle' );
-													},
-													validate : CKEDITOR.dialog.validate.integer( editor.lang.image.validateHSpace ),
-													setup : function( type, element )
-													{
-														if ( type == IMAGE )
-														{
-															var value,
-																marginLeftPx,
-																marginRightPx,
-																marginLeftStyle = element.getStyle( 'margin-left' ),
-																marginRightStyle = element.getStyle( 'margin-right' );
+																			marginLeftStyle = marginLeftStyle && marginLeftStyle.match(pxLengthRegex);
+																			marginRightStyle = marginRightStyle && marginRightStyle.match(pxLengthRegex);
+																			marginLeftPx = parseInt(marginLeftStyle, 10);
+																			marginRightPx = parseInt(marginRightStyle, 10);
 
-															marginLeftStyle = marginLeftStyle && marginLeftStyle.match( pxLengthRegex );
-															marginRightStyle = marginRightStyle && marginRightStyle.match( pxLengthRegex );
-															marginLeftPx = parseInt( marginLeftStyle, 10 );
-															marginRightPx = parseInt( marginRightStyle, 10 );
+																			value = ( marginLeftPx == marginRightPx ) && marginLeftPx;
+																			isNaN(parseInt(value, 10)) && ( value = element.getAttribute('hspace') );
 
-															value = ( marginLeftPx == marginRightPx ) && marginLeftPx;
-															isNaN( parseInt( value, 10 ) ) && ( value = element.getAttribute( 'hspace' ) );
+																			this.setValue(value);
+																		}
+																	},
+																	commit : function(type, element, internalCommit){
+																		var value = parseInt(this.getValue(), 10);
+																		if(type == IMAGE || type == PREVIEW){
+																			if(!isNaN(value)){
+																				element.setStyle('margin-left', CKEDITOR.tools.cssLength(value));
+																				element.setStyle('margin-right', CKEDITOR.tools.cssLength(value));
+																			} else if(!value && this.isChanged()){
+																				element.removeStyle('margin-left');
+																				element.removeStyle('margin-right');
+																			}
 
-															this.setValue( value );
-														}
-													},
-													commit : function( type, element, internalCommit )
-													{
-														var value = parseInt( this.getValue(), 10 );
-														if ( type == IMAGE || type == PREVIEW )
-														{
-															if ( !isNaN( value ) )
-															{
-																element.setStyle( 'margin-left', CKEDITOR.tools.cssLength( value ) );
-																element.setStyle( 'margin-right', CKEDITOR.tools.cssLength( value ) );
-															}
-															else if ( !value && this.isChanged( ) )
-															{
-																element.removeStyle( 'margin-left' );
-																element.removeStyle( 'margin-right' );
-															}
+																			if(!internalCommit && type == IMAGE){
+																				element.removeAttribute('hspace');
+																			}
+																		} else if(type == CLEANUP){
+																			element.removeAttribute('hspace');
+																			element.removeStyle('margin-left');
+																			element.removeStyle('margin-right');
+																		}
+																	}
+																},
+																{
+																	type : 'text',
+																	id : 'txtVSpace',
+																	width : '60px',
+																	label : editor.lang.image.vSpace,
+																	'default' : '',
+																	onKeyUp : function(){
+																		updatePreview(this.getDialog());
+																	},
+																	onChange : function(){
+																		commitInternally.call(this, 'advanced:txtdlgGenStyle');
+																	},
+																	validate : CKEDITOR.dialog.validate.integer(editor.lang.image.validateVSpace),
+																	setup : function(type, element){
+																		if(type == IMAGE){
+																			var value,
+																				marginTopPx,
+																				marginBottomPx,
+																				marginTopStyle = element.getStyle('margin-top'),
+																				marginBottomStyle = element.getStyle('margin-bottom');
 
-															if ( !internalCommit && type == IMAGE )
-																element.removeAttribute( 'hspace' );
-														}
-														else if ( type == CLEANUP )
-														{
-															element.removeAttribute( 'hspace' );
-															element.removeStyle( 'margin-left' );
-															element.removeStyle( 'margin-right' );
-														}
-													}
-												},
-												{
-													type : 'text',
-													id : 'txtVSpace',
-													width : '60px',
-													label : editor.lang.image.vSpace,
-													'default' : '',
-													onKeyUp : function()
-													{
-														updatePreview( this.getDialog() );
-													},
-													onChange : function()
-													{
-														commitInternally.call( this, 'advanced:txtdlgGenStyle' );
-													},
-													validate : CKEDITOR.dialog.validate.integer( editor.lang.image.validateVSpace ),
-													setup : function( type, element )
-													{
-														if ( type == IMAGE )
-														{
-															var value,
-																marginTopPx,
-																marginBottomPx,
-																marginTopStyle = element.getStyle( 'margin-top' ),
-																marginBottomStyle = element.getStyle( 'margin-bottom' );
+																			marginTopStyle = marginTopStyle && marginTopStyle.match(pxLengthRegex);
+																			marginBottomStyle = marginBottomStyle && marginBottomStyle.match(pxLengthRegex);
+																			marginTopPx = parseInt(marginTopStyle, 10);
+																			marginBottomPx = parseInt(marginBottomStyle, 10);
 
-															marginTopStyle = marginTopStyle && marginTopStyle.match( pxLengthRegex );
-															marginBottomStyle = marginBottomStyle && marginBottomStyle.match( pxLengthRegex );
-															marginTopPx = parseInt( marginTopStyle, 10 );
-															marginBottomPx = parseInt( marginBottomStyle, 10 );
+																			value = ( marginTopPx == marginBottomPx ) && marginTopPx;
+																			isNaN(parseInt(value, 10)) && ( value = element.getAttribute('vspace') );
+																			this.setValue(value);
+																		}
+																	},
+																	commit : function(type, element, internalCommit){
+																		var value = parseInt(this.getValue(), 10);
+																		if(type == IMAGE || type == PREVIEW){
+																			if(!isNaN(value)){
+																				element.setStyle('margin-top', CKEDITOR.tools.cssLength(value));
+																				element.setStyle('margin-bottom', CKEDITOR.tools.cssLength(value));
+																	...
 (truncated)
Tags: b_vladi, js, livejournal, vkurkin
Subscribe
  • Post a new comment

    Error

    Anonymous comments are disabled in this journal

    default userpic

    Your reply will be screened

    Your IP address will be recorded 

  • 0 comments