JasonWoof Got questions, comments, patches, etc.? Contact Jason Woofenden
vanilla ckeditor-3.1
[ckeditor.git] / _source / plugins / image / dialogs / image.js
index c65a8aa..9b127c9 100644 (file)
@@ -1,5 +1,5 @@
 /*\r
-Copyright (c) 2003-2009, CKSource - Frederico Knabben. All rights reserved.\r
+Copyright (c) 2003-2010, CKSource - Frederico Knabben. All rights reserved.\r
 For licensing, see LICENSE.html or http://ckeditor.com/license\r
 */\r
 \r
@@ -11,7 +11,8 @@ For licensing, see LICENSE.html or http://ckeditor.com/license
                PREVIEW = 4,\r
                CLEANUP = 8,\r
                regexGetSize = /^\s*(\d+)((px)|\%)?\s*$/i,\r
-               regexGetSizeOrEmpty = /(^\s*(\d+)((px)|\%)?\s*$)|^$/i;\r
+               regexGetSizeOrEmpty = /(^\s*(\d+)((px)|\%)?\s*$)|^$/i,\r
+               pxLengthRegex = /^\d+px$/;\r
 \r
        var onSizeChange = function()\r
        {\r
@@ -61,6 +62,55 @@ For licensing, see LICENSE.html or http://ckeditor.com/license
                return 0;\r
        };\r
 \r
+       // Custom commit dialog logic, where we're intended to give inline style\r
+       // field (txtdlgGenStyle) higher priority to avoid overwriting styles contribute\r
+       // by other fields.\r
+       function commitContent()\r
+       {\r
+               var args = arguments;\r
+               var inlineStyleField = this.getContentElement( 'advanced', 'txtdlgGenStyle' );\r
+               inlineStyleField && inlineStyleField.commit.apply( inlineStyleField, args );\r
+\r
+               this.foreach( function( widget )\r
+               {\r
+                       if ( widget.commit &&  widget.id != 'txtdlgGenStyle' )\r
+                               widget.commit.apply( widget, args );\r
+               });\r
+       }\r
+\r
+       // Avoid recursions.\r
+       var incommit;\r
+\r
+       // Synchronous field values to other impacted fields is required, e.g. border\r
+       // size change should alter inline-style text as well.\r
+       function commitInternally( targetFields )\r
+       {\r
+               if( incommit )\r
+                       return;\r
+\r
+               incommit = 1;\r
+\r
+               var dialog = this.getDialog(),\r
+                       element = dialog.imageElement;\r
+               if( element )\r
+               {\r
+                       // Commit this field and broadcast to target fields.\r
+                       this.commit( IMAGE, element );\r
+\r
+                       targetFields = [].concat( targetFields );\r
+                       var length = targetFields.length,\r
+                               field;\r
+                       for ( var i = 0; i < length; i++ )\r
+                       {\r
+                               field = dialog.getContentElement.apply( dialog, targetFields[ i ].split( ':' ) );\r
+                               // May cause recursion.\r
+                               field && field.setup( IMAGE, element );\r
+                       }\r
+               }\r
+\r
+               incommit = 0;\r
+       }\r
+\r
        var switchLockRatio = function( dialog, value )\r
        {\r
                var oImageOriginal = dialog.originalElement,\r
@@ -138,13 +188,15 @@ For licensing, see LICENSE.html or http://ckeditor.com/license
 \r
                if ( size )\r
                        value = checkDimension( size, value );\r
-               value = checkDimension( element.$.style[ dimension ], value );\r
+               value = checkDimension( element.getStyle( dimension ), value );\r
 \r
                this.setValue( value );\r
        };\r
 \r
        var imageDialog = function( editor, dialogType )\r
        {\r
+               var previewPreloader;\r
+\r
                var onImgLoadEvent = function()\r
                {\r
                        // Image is ready.\r
@@ -162,7 +214,8 @@ For licensing, see LICENSE.html or http://ckeditor.com/license
                                resetSize( this );\r
 \r
                        if ( this.firstLoad )\r
-                               switchLockRatio( this, 'check' );\r
+                               CKEDITOR.tools.setTimeout( function(){ switchLockRatio( this, 'check' ); }, 0, this );\r
+\r
                        this.firstLoad = false;\r
                        this.dontResetSize = false;\r
                };\r
@@ -203,16 +256,17 @@ For licensing, see LICENSE.html or http://ckeditor.com/license
                                this.firstLoad = true;\r
                                this.addLink = false;\r
 \r
-                               //Hide loader.\r
-                               CKEDITOR.document.getById( 'ImagePreviewLoader' ).setStyle( 'display', 'none' );\r
-                               // Preview\r
-                               this.preview = CKEDITOR.document.getById( 'previewImage' );\r
-\r
                                var editor = this.getParentEditor(),\r
                                        sel = this.getParentEditor().getSelection(),\r
                                        element = sel.getSelectedElement(),\r
                                        link = element && element.getAscendant( 'a' );\r
 \r
+                               //Hide loader.\r
+                               CKEDITOR.document.getById( 'ImagePreviewLoader' ).setStyle( 'display', 'none' );\r
+                               // Create the preview before setup the dialog contents.\r
+                               previewPreloader = new CKEDITOR.dom.element( 'img', editor.document );\r
+                               this.preview = CKEDITOR.document.getById( 'previewImage' );\r
+\r
                                // Copy of the image\r
                                this.originalElement = editor.document.createElement( 'img' );\r
                                this.originalElement.setAttribute( 'alt', '' );\r
@@ -242,15 +296,19 @@ For licensing, see LICENSE.html or http://ckeditor.com/license
                                                this.setupContent( LINK, link );\r
                                }\r
 \r
-                               if ( element && element.getName() == 'img' && !element.getAttribute( '_cke_protected_html' ) )\r
-                                       this.imageEditMode = 'img';\r
-                               else if ( element && element.getName() == 'input' && element.getAttribute( 'type' ) && element.getAttribute( 'type' ) == 'image' )\r
-                                       this.imageEditMode = 'input';\r
+                               if ( element && element.getName() == 'img' && !element.getAttribute( '_cke_realelement' )\r
+                                       || element && element.getName() == 'input' && element.getAttribute( 'type' ) == 'image' )\r
+                               {\r
+                                       this.imageEditMode = element.getName();\r
+                                       this.imageElement = element;\r
+                               }\r
 \r
-                               if ( this.imageEditMode || this.imageElement )\r
+                               if ( this.imageEditMode )\r
                                {\r
-                                       if ( !this.imageElement )\r
-                                               this.imageElement = element;\r
+                                       // Use the original element as a buffer from  since we don't want\r
+                                       // temporary changes to be committed, e.g. if the dialog is canceled.\r
+                                       this.cleanImageElement = this.imageElement;\r
+                                       this.imageElement = this.cleanImageElement.clone( true, true );\r
 \r
                                        // Fill out all fields.\r
                                        this.setupContent( IMAGE, this.imageElement );\r
@@ -258,6 +316,8 @@ For licensing, see LICENSE.html or http://ckeditor.com/license
                                        // Refresh LockRatio button\r
                                        switchLockRatio ( this, true );\r
                                }\r
+                               else\r
+                                       this.imageElement =  editor.document.createElement( 'img' );\r
 \r
                                // Dont show preview if no URL given.\r
                                if ( !CKEDITOR.tools.trim( this.getValueOf( 'info', 'txtUrl' ) ) )\r
@@ -296,6 +356,12 @@ For licensing, see LICENSE.html or http://ckeditor.com/license
                                                );\r
                                                editor.insertElement( this.imageElement );\r
                                        }\r
+                                       else\r
+                                       {\r
+                                               // Restore the original element before all commits.\r
+                                               this.imageElement = this.cleanImageElement;\r
+                                               delete this.cleanImageElement;\r
+                                       }\r
                                }\r
                                else    // Create a new image.\r
                                {\r
@@ -318,6 +384,10 @@ For licensing, see LICENSE.html or http://ckeditor.com/license
                                this.commitContent( IMAGE, this.imageElement );\r
                                this.commitContent( LINK, this.linkElement );\r
 \r
+                               // Remove empty style attribute.\r
+                               if( !this.imageElement.getAttribute( 'style' ) )\r
+                                       this.imageElement.removeAttribute( 'style' );\r
+\r
                                // Insert a new Image.\r
                                if ( !this.imageEditMode )\r
                                {\r
@@ -358,6 +428,8 @@ For licensing, see LICENSE.html or http://ckeditor.com/license
                                var doc = this._.element.getDocument();\r
                                this.addFocusable( doc.getById( 'btnResetSize' ), 5 );\r
                                this.addFocusable( doc.getById( 'btnLockSizes' ), 5 );\r
+\r
+                               this.commitContent = commitContent;\r
                        },\r
                        onHide : function()\r
                        {\r
@@ -372,6 +444,8 @@ For licensing, see LICENSE.html or http://ckeditor.com/license
                                        this.originalElement.remove();\r
                                        this.originalElement = false;           // Dialog is closed.\r
                                }\r
+\r
+                               delete this.imageElement;\r
                        },\r
                        contents : [\r
                                {\r
@@ -422,8 +496,10 @@ For licensing, see LICENSE.html or http://ckeditor.com/license
                                                                                                        original.on( 'error', onImgLoadErrorEvent, dialog );\r
                                                                                                        original.on( 'abort', onImgLoadErrorEvent, dialog );\r
                                                                                                        original.setAttribute( 'src', newUrl );\r
-                                                                                                       dialog.preview.setAttribute( 'src', newUrl );\r
 \r
+                                                                                                       // Query the preloader to figure out the url impacted by based href.\r
+                                                                                                       previewPreloader.setAttribute( 'src', newUrl );\r
+                                                                                                       dialog.preview.setAttribute( 'src', previewPreloader.$.src );\r
                                                                                                        updatePreview( dialog );\r
                                                                                                }\r
                                                                                                // Dont show preview if no URL given.\r
@@ -442,15 +518,10 @@ For licensing, see LICENSE.html or http://ckeditor.com/license
 \r
                                                                                                        this.getDialog().dontResetSize = true;\r
 \r
-                                                                                                       // In IE7 the dialog is being rendered improperly when loading\r
-                                                                                                       // an image with a long URL. So we need to delay it a bit. (#4122)\r
-                                                                                                       setTimeout( function()\r
-                                                                                                               {\r
-                                                                                                                       field.setValue( url );          // And call this.onChange()\r
-                                                                                                                       // Manually set the initial value.(#4191)\r
-                                                                                                                       field.setInitValue();\r
-                                                                                                                       field.focus();\r
-                                                                                                               }, 0 );\r
+                                                                                                       field.setValue( url );          // And call this.onChange()\r
+                                                                                                       // Manually set the initial value.(#4191)\r
+                                                                                                       field.setInitValue();\r
+                                                                                                       field.focus();\r
                                                                                                }\r
                                                                                        },\r
                                                                                        commit : function( type, element )\r
@@ -539,6 +610,10 @@ For licensing, see LICENSE.html or http://ckeditor.com/license
                                                                                                                        labelLayout : 'horizontal',\r
                                                                                                                        label : editor.lang.image.width,\r
                                                                                                                        onKeyUp : onSizeChange,\r
+                                                                                                                       onChange : function()\r
+                                                                                                                       {\r
+                                                                                                                               commitInternally.call( this, 'advanced:txtdlgGenStyle' );\r
+                                                                                                                       },\r
                                                                                                                        validate: function()\r
                                                                                                                        {\r
                                                                                                                                var aMatch  =  this.getValue().match( regexGetSizeOrEmpty );\r
@@ -547,19 +622,20 @@ For licensing, see LICENSE.html or http://ckeditor.com/license
                                                                                                                                return !!aMatch;\r
                                                                                                                        },\r
                                                                                                                        setup : setupDimension,\r
-                                                                                                                       commit : function( type, element )\r
+                                                                                                                       commit : function( type, element, internalCommit )\r
                                                                                                                        {\r
+                                                                                                                               var value = this.getValue();\r
                                                                                                                                if ( type == IMAGE )\r
                                                                                                                                {\r
-                                                                                                                                       var value = this.getValue();\r
                                                                                                                                        if ( value )\r
-                                                                                                                                               element.setAttribute( 'width', value );\r
-                                                                                                                                       else if ( !value && this.isChanged() )\r
-                                                                                                                                               element.removeAttribute( 'width' );\r
+                                                                                                                                               element.setStyle( 'width', CKEDITOR.tools.cssLength( value ) );\r
+                                                                                                                                       else if ( !value && this.isChanged( ) )\r
+                                                                                                                                               element.removeStyle( 'width' );\r
+\r
+                                                                                                                                       !internalCommit && element.removeAttribute( 'width' );\r
                                                                                                                                }\r
                                                                                                                                else if ( type == PREVIEW )\r
                                                                                                                                {\r
-                                                                                                                                       value = this.getValue();\r
                                                                                                                                        var aMatch = value.match( regexGetSize );\r
                                                                                                                                        if ( !aMatch )\r
                                                                                                                                        {\r
@@ -572,7 +648,6 @@ For licensing, see LICENSE.html or http://ckeditor.com/license
                                                                                                                                }\r
                                                                                                                                else if ( type == CLEANUP )\r
                                                                                                                                {\r
-                                                                                                                                       element.setStyle( 'width', '0px' );     // If removeAttribute doesn't work.\r
                                                                                                                                        element.removeAttribute( 'width' );\r
                                                                                                                                        element.removeStyle( 'width' );\r
                                                                                                                                }\r
@@ -585,6 +660,10 @@ For licensing, see LICENSE.html or http://ckeditor.com/license
                                                                                                                        labelLayout : 'horizontal',\r
                                                                                                                        label : editor.lang.image.height,\r
                                                                                                                        onKeyUp : onSizeChange,\r
+                                                                                                                       onChange : function()\r
+                                                                                                                       {\r
+                                                                                                                               commitInternally.call( this, 'advanced:txtdlgGenStyle' );\r
+                                                                                                                       },\r
                                                                                                                        validate: function()\r
                                                                                                                        {\r
                                                                                                                                var aMatch = this.getValue().match( regexGetSizeOrEmpty );\r
@@ -593,32 +672,33 @@ For licensing, see LICENSE.html or http://ckeditor.com/license
                                                                                                                                return !!aMatch;\r
                                                                                                                        },\r
                                                                                                                        setup : setupDimension,\r
-                                                                                                                       commit : function( type, element )\r
+                                                                                                                       commit : function( type, element, internalCommit )\r
                                                                                                                        {\r
+                                                                                                                               var value = this.getValue();\r
                                                                                                                                if ( type == IMAGE )\r
                                                                                                                                {\r
-                                                                                                                                       var value = this.getValue();\r
                                                                                                                                        if ( value )\r
-                                                                                                                                               element.setAttribute( 'height', value );\r
-                                                                                                                                       else if ( !value && this.isChanged() )\r
+                                                                                                                                               element.setStyle( 'height', CKEDITOR.tools.cssLength( value ) );\r
+                                                                                                                                       else if ( !value && this.isChanged( ) )\r
+                                                                                                                                               element.removeStyle( 'height' );\r
+\r
+                                                                                                                                       if( !internalCommit && type == IMAGE )\r
                                                                                                                                                element.removeAttribute( 'height' );\r
                                                                                                                                }\r
                                                                                                                                else if ( type == PREVIEW )\r
                                                                                                                                {\r
-                                                                                                                                       value = this.getValue();\r
                                                                                                                                        var aMatch = value.match( regexGetSize );\r
                                                                                                                                        if ( !aMatch )\r
                                                                                                                                        {\r
                                                                                                                                                var oImageOriginal = this.getDialog().originalElement;\r
                                                                                                                                                if ( oImageOriginal.getCustomData( 'isReady' ) == 'true' )\r
-                                                                                                                                                       element.setStyle( 'height',  oImageOriginal.$.height + 'px');\r
+                                                                                                                                                       element.setStyle( 'height', oImageOriginal.$.height + 'px' );\r
                                                                                                                                        }\r
                                                                                                                                        else\r
-                                                                                                                                               element.setStyle( 'height', value + 'px');\r
+                                                                                                                                               element.setStyle( 'height', value + 'px' );\r
                                                                                                                                }\r
                                                                                                                                else if ( type == CLEANUP )\r
                                                                                                                                {\r
-                                                                                                                                       element.setStyle( 'height', '0px' );    // If removeAttribute doesn't work.\r
                                                                                                                                        element.removeAttribute( 'height' );\r
                                                                                                                                        element.removeStyle( 'height' );\r
                                                                                                                                }\r
@@ -703,6 +783,10 @@ For licensing, see LICENSE.html or http://ckeditor.com/license
                                                                                                        {\r
                                                                                                                updatePreview( this.getDialog() );\r
                                                                                                        },\r
+                                                                                                       onChange : function()\r
+                                                                                                       {\r
+                                                                                                               commitInternally.call( this, 'advanced:txtdlgGenStyle' );\r
+                                                                                                       },\r
                                                                                                        validate: function()\r
                                                                                                        {\r
                                                                                                                var func = CKEDITOR.dialog.validate.integer( editor.lang.common.validateNumberFailed );\r
@@ -711,26 +795,43 @@ For licensing, see LICENSE.html or http://ckeditor.com/license
                                                                                                        setup : function( type, element )\r
                                                                                                        {\r
                                                                                                                if ( type == IMAGE )\r
-                                                                                                                       this.setValue( element.getAttribute( 'border' ) );\r
-                                                                                                       },\r
-                                                                                                       commit : function( type, element )\r
-                                                                                                       {\r
-                                                                                                               if ( type == IMAGE )\r
                                                                                                                {\r
-                                                                                                                       if ( this.getValue() || this.isChanged() )\r
-                                                                                                                               element.setAttribute( 'border', this.getValue() );\r
+                                                                                                                       var value,\r
+                                                                                                                               borderStyle = element.getStyle( 'border-width' );\r
+\r
+                                                                                                                       borderStyle = borderStyle && borderStyle.match( /^(\d+px)(?: \1 \1 \1)?$/ );\r
+                                                                                                                       value = borderStyle && parseInt( borderStyle[ 1 ], 10 );\r
+                                                                                                                       !value && ( value = element.getAttribute( 'border' ) );\r
+\r
+                                                                                                                       this.setValue( value );\r
                                                                                                                }\r
-                                                                                                               else if ( type == PREVIEW )\r
+                                                                                                       },\r
+                                                                                                       commit : function( type, element, internalCommit )\r
+                                                                                                       {\r
+                                                                                                               var value = parseInt( this.getValue(), 10 );\r
+                                                                                                               if ( type == IMAGE || type == PREVIEW )\r
                                                                                                                {\r
-                                                                                                                       var value = parseInt( this.getValue(), 10 );\r
-                                                                                                                       value = isNaN( value ) ? 0 : value;\r
-                                                                                                                       element.setAttribute( 'border', value );\r
-                                                                                                                       element.setStyle( 'border', value + 'px solid black' );\r
+                                                                                                                       if ( value )\r
+                                                                                                                       {\r
+                                                                                                                               element.setStyle( 'border-width', CKEDITOR.tools.cssLength( value ) );\r
+                                                                                                                               element.setStyle( 'border-style', 'solid' );\r
+                                                                                                                       }\r
+                                                                                                                       else if ( !value && this.isChanged() )\r
+                                                                                                                       {\r
+                                                                                                                               element.removeStyle( 'border-width' );\r
+                                                                                                                               element.removeStyle( 'border-style' );\r
+                                                                                                                               element.removeStyle( 'border-color' );\r
+                                                                                                                       }\r
+\r
+                                                                                                                       if( !internalCommit && type == IMAGE )\r
+                                                                                                                               element.removeAttribute( 'border' );\r
                                                                                                                }\r
                                                                                                                else if ( type == CLEANUP )\r
                                                                                                                {\r
                                                                                                                        element.removeAttribute( 'border' );\r
-                                                                                                                       element.removeStyle( 'border' );\r
+                                                                                                                       element.removeStyle( 'border-width' );\r
+                                                                                                                       element.removeStyle( 'border-style' );\r
+                                                                                                                       element.removeStyle( 'border-color' );\r
                                                                                                                }\r
                                                                                                        }\r
                                                                                                },\r
@@ -745,6 +846,10 @@ For licensing, see LICENSE.html or http://ckeditor.com/license
                                                                                                        {\r
                                                                                                                updatePreview( this.getDialog() );\r
                                                                                                        },\r
+                                                                                                       onChange : function()\r
+                                                                                                       {\r
+                                                                                                               commitInternally.call( this, 'advanced:txtdlgGenStyle' );\r
+                                                                                                       },\r
                                                                                                        validate: function()\r
                                                                                                        {\r
                                                                                                                var func = CKEDITOR.dialog.validate.integer( editor.lang.common.validateNumberFailed );\r
@@ -754,25 +859,41 @@ For licensing, see LICENSE.html or http://ckeditor.com/license
                                                                                                        {\r
                                                                                                                if ( type == IMAGE )\r
                                                                                                                {\r
-                                                                                                                       var value = element.getAttribute( 'hspace' );\r
-                                                                                                                       if ( value != -1 )                              // In IE empty = -1.\r
-                                                                                                                               this.setValue( value );\r
+                                                                                                                       var value,\r
+                                                                                                                               marginLeftPx,\r
+                                                                                                                               marginRightPx,\r
+                                                                                                                               marginLeftStyle = element.getStyle( 'margin-left' ),\r
+                                                                                                                               marginRightStyle = element.getStyle( 'margin-right' );\r
+\r
+                                                                                                                       marginLeftStyle = marginLeftStyle && marginLeftStyle.match( pxLengthRegex );\r
+                                                                                                                       marginRightStyle = marginRightStyle && marginRightStyle.match( pxLengthRegex );\r
+                                                                                                                       marginLeftPx = parseInt( marginLeftStyle, 10 );\r
+                                                                                                                       marginRightPx = parseInt( marginRightStyle, 10 );\r
+\r
+                                                                                                                       value = ( marginLeftPx == marginRightPx ) && marginLeftPx;\r
+                                                                                                                       !value && ( value = element.getAttribute( 'hspace' ) );\r
+\r
+                                                                                                                       this.setValue( value );\r
                                                                                                                }\r
                                                                                                        },\r
-                                                                                                       commit : function( type, element )\r
+                                                                                                       commit : function( type, element, internalCommit )\r
                                                                                                        {\r
-                                                                                                               if ( type == IMAGE )\r
+                                                                                                               var value = parseInt( this.getValue(), 10 );\r
+                                                                                                               if ( type == IMAGE || type == PREVIEW )\r
                                                                                                                {\r
-                                                                                                                       if ( this.getValue() || this.isChanged() )\r
-                                                                                                                               element.setAttribute( 'hspace', this.getValue() );\r
-                                                                                                               }\r
-                                                                                                               else if ( type == PREVIEW )\r
-                                                                                                               {\r
-                                                                                                                       var value = parseInt( this.getValue(), 10 );\r
-                                                                                                                       value = isNaN( value ) ? 0 : value;\r
-                                                                                                                       element.setAttribute( 'hspace', value );\r
-                                                                                                                       element.setStyle( 'margin-left', value + 'px' );\r
-                                                                                                                       element.setStyle( 'margin-right', value + 'px' );\r
+                                                                                                                       if ( value )\r
+                                                                                                                       {\r
+                                                                                                                               element.setStyle( 'margin-left', CKEDITOR.tools.cssLength( value ) );\r
+                                                                                                                               element.setStyle( 'margin-right', CKEDITOR.tools.cssLength( value ) );\r
+                                                                                                                       }\r
+                                                                                                                       else if ( !value && this.isChanged( ) )\r
+                                                                                                                       {\r
+                                                                                                                               element.removeStyle( 'margin-left' );\r
+                                                                                                                               element.removeStyle( 'margin-right' );\r
+                                                                                                                       }\r
+\r
+                                                                                                                       if( !internalCommit && type == IMAGE )\r
+                                                                                                                               element.removeAttribute( 'hspace' );\r
                                                                                                                }\r
                                                                                                                else if ( type == CLEANUP )\r
                                                                                                                {\r
@@ -793,6 +914,10 @@ For licensing, see LICENSE.html or http://ckeditor.com/license
                                                                                                        {\r
                                                                                                                updatePreview( this.getDialog() );\r
                                                                                                        },\r
+                                                                                                       onChange : function()\r
+                                                                                                       {\r
+                                                                                                               commitInternally.call( this, 'advanced:txtdlgGenStyle' );\r
+                                                                                                       },\r
                                                                                                        validate: function()\r
                                                                                                        {\r
                                                                                                                var func = CKEDITOR.dialog.validate.integer( editor.lang.common.validateNumberFailed );\r
@@ -801,22 +926,41 @@ For licensing, see LICENSE.html or http://ckeditor.com/license
                                                                                                        setup : function( type, element )\r
                                                                                                        {\r
                                                                                                                if ( type == IMAGE )\r
-                                                                                                                       this.setValue( element.getAttribute( 'vspace' ) );\r
-                                                                                                       },\r
-                                                                                                       commit : function( type, element )\r
-                                                                                                       {\r
-                                                                                                               if ( type == IMAGE )\r
                                                                                                                {\r
-                                                                                                                       if ( this.getValue() || this.isChanged() )\r
-                                                                                                                               element.setAttribute( 'vspace', this.getValue() );\r
+                                                                                                                       var value,\r
+                                                                                                                               marginTopPx,\r
+                                                                                                                               marginBottomPx,\r
+                                                                                                                               marginTopStyle = element.getStyle( 'margin-top' ),\r
+                                                                                                                               marginBottomStyle = element.getStyle( 'margin-bottom' );\r
+\r
+                                                                                                                       marginTopStyle = marginTopStyle && marginTopStyle.match( pxLengthRegex );\r
+                                                                                                                       marginBottomStyle = marginBottomStyle && marginBottomStyle.match( pxLengthRegex );\r
+                                                                                                                       marginTopPx = parseInt( marginTopStyle, 10 );\r
+                                                                                                                       marginBottomPx = parseInt( marginBottomStyle, 10 );\r
+\r
+                                                                                                                       value = ( marginTopPx == marginBottomPx ) && marginTopPx;\r
+                                                                                                                       !value && ( value = element.getAttribute( 'vspace' ) );\r
+                                                                                                                       this.setValue( value );\r
                                                                                                                }\r
-                                                                                                               else if ( type == PREVIEW )\r
+                                                                                                       },\r
+                                                                                                       commit : function( type, element, internalCommit )\r
+                                                                                                       {\r
+                                                                                                               var value = parseInt( this.getValue(), 10 );\r
+                                                                                                               if ( type == IMAGE || type == PREVIEW )\r
                                                                                                                {\r
-                                                                                                                       var value = parseInt( this.getValue(), 10 );\r
-                                                                                                                       value = isNaN( value ) ? 0 : value;\r
-                                                                                                                       element.setAttribute( 'vspace', this.getValue() );\r
-                                                                                                                       element.setStyle( 'margin-top', value + 'px' );\r
-                                                                                                                       element.setStyle( 'margin-bottom', value + 'px' );\r
+                                                                                                                       if ( value )\r
+                                                                                                                       {\r
+                                                                                                                               element.setStyle( 'margin-top', CKEDITOR.tools.cssLength( value ) );\r
+                                                                                                                               element.setStyle( 'margin-bottom', CKEDITOR.tools.cssLength( value ) );\r
+                                                                                                                       }\r
+                                                                                                                       else if ( !value && this.isChanged( ) )\r
+                                                                                                                       {\r
+                                                                                                                               element.removeStyle( 'margin-top' );\r
+                                                                                                                               element.removeStyle( 'margin-bottom' );\r
+                                                                                                                       }\r
+\r
+                                                                                                                       if( !internalCommit && type == IMAGE )\r
+                                                                                                                               element.removeAttribute( 'vspace' );\r
                                                                                                                }\r
                                                                                                                else if ( type == CLEANUP )\r
                                                                                                                {\r
@@ -838,53 +982,65 @@ For licensing, see LICENSE.html or http://ckeditor.com/license
                                                                                                        [\r
                                                                                                                [ editor.lang.common.notSet , ''],\r
                                                                                                                [ editor.lang.image.alignLeft , 'left'],\r
-                                                                                                               [ editor.lang.image.alignAbsBottom , 'absBottom'],\r
-                                                                                                               [ editor.lang.image.alignAbsMiddle , 'absMiddle'],\r
-                                                                                                               [ editor.lang.image.alignBaseline , 'baseline'],\r
-                                                                                                               [ editor.lang.image.alignBottom , 'bottom'],\r
-                                                                                                               [ editor.lang.image.alignMiddle , 'middle'],\r
-                                                                                                               [ editor.lang.image.alignRight , 'right'],\r
-                                                                                                               [ editor.lang.image.alignTextTop , 'textTop'],\r
-                                                                                                               [ editor.lang.image.alignTop , 'top']\r
+                                                                                                               [ editor.lang.image.alignRight , 'right']\r
+                                                                                                               // Backward compatible with v2 on setup when specified as attribute value,\r
+                                                                                                               // while these values are no more available as select options.\r
+                                                                                                               //      [ editor.lang.image.alignAbsBottom , 'absBottom'],\r
+                                                                                                               //      [ editor.lang.image.alignAbsMiddle , 'absMiddle'],\r
+                                                                                                               //  [ editor.lang.image.alignBaseline , 'baseline'],\r
+                                                                                                               //  [ editor.lang.image.alignTextTop , 'text-top'],\r
+                                                                                                               //  [ editor.lang.image.alignBottom , 'bottom'],\r
+                                                                                                               //  [ editor.lang.image.alignMiddle , 'middle'],\r
+                                                                                                               //  [ editor.lang.image.alignTop , 'top']\r
                                                                                                        ],\r
                                                                                                        onChange : function()\r
                                                                                                        {\r
                                                                                                                updatePreview( this.getDialog() );\r
+                                                                                                               commitInternally.call( this, 'advanced:txtdlgGenStyle' );\r
                                                                                                        },\r
                                                                                                        setup : function( type, element )\r
                                                                                                        {\r
                                                                                                                if ( type == IMAGE )\r
-                                                                                                                       this.setValue( element.getAttribute( 'align' ) );\r
+                                                                                                               {\r
+                                                                                                                       var value = element.getStyle( 'float' );\r
+                                                                                                                       switch( value )\r
+                                                                                                                       {\r
+                                                                                                                               // Ignore those unrelated values.\r
+                                                                                                                               case 'inherit':\r
+                                                                                                                               case 'none':\r
+                                                                                                                                       value = '';\r
+                                                                                                                       }\r
+\r
+                                                                                                                       !value && ( value = ( element.getAttribute( 'align' ) || '' ).toLowerCase() );\r
+                                                                                                                       this.setValue( value );\r
+                                                                                                               }\r
                                                                                                        },\r
-                                                                                                       commit : function( type, element )\r
+                                                                                                       commit : function( type, element, internalCommit )\r
                                                                                                        {\r
                                                                                                                var value = this.getValue();\r
-                                                                                                               if ( type == IMAGE )\r
-                                                                                                               {\r
-                                                                                                                       if ( value || this.isChanged() )\r
-                                                                                                                               element.setAttribute( 'align', value );\r
-                                                                                                               }\r
-                                                                                                               else if ( type == PREVIEW )\r
+                                                                                                               if ( type == IMAGE || type == PREVIEW )\r
                                                                                                                {\r
-                                                                                                                       element.setAttribute( 'align', this.getValue() );\r
-\r
-                                                                                                                       if ( value == 'absMiddle' || value == 'middle' )\r
-                                                                                                                               element.setStyle( 'vertical-align', 'middle' );\r
-                                                                                                                       else if ( value == 'top' || value == 'textTop' )\r
-                                                                                                                               element.setStyle( 'vertical-align', 'top' );\r
-                                                                                                                       else\r
-                                                                                                                               element.removeStyle( 'vertical-align' );\r
-\r
-                                                                                                                       if ( value == 'right' || value == 'left' )\r
-                                                                                                                               element.setStyle( 'styleFloat', value );\r
-                                                                                                                       else\r
-                                                                                                                               element.removeStyle( 'styleFloat' );\r
+                                                                                                                       if ( value )\r
+                                                                                                                               element.setStyle( 'float', value );\r
+                                                                                                                       else if ( !value && this.isChanged( ) )\r
+                                                                                                                               element.removeStyle( 'float' );\r
 \r
+                                                                                                                       if( !internalCommit && type == IMAGE )\r
+                                                                                                                       {\r
+                                                                                                                               value = ( element.getAttribute( 'align' ) || '' ).toLowerCase();\r
+                                                                                                                               switch( value )\r
+                                                                                                                               {\r
+                                                                                                                                       // we should remove it only if it matches "left" or "right",\r
+                                                                                                                                       // otherwise leave it intact.\r
+                                                                                                                                       case 'left':\r
+                                                                                                                                       case 'right':\r
+                                                                                                                                               element.removeAttribute( 'align' );\r
+                                                                                                                               }\r
+                                                                                                                       }\r
                                                                                                                }\r
                                                                                                                else if ( type == CLEANUP )\r
-                                                                                                               {\r
-                                                                                                                       element.removeAttribute( 'align' );\r
-                                                                                                               }\r
+                                                                                                                       element.removeStyle( 'float' );\r
+\r
                                                                                                        }\r
                                                                                                }\r
                                                                                        ]\r
@@ -903,7 +1059,7 @@ For licensing, see LICENSE.html or http://ckeditor.com/license
                                                                                        '<div id="ImagePreviewLoader" style="display:none"><div class="loading">&nbsp;</div></div>'+\r
                                                                                        '<div id="ImagePreviewBox">'+\r
                                                                                        '<a href="javascript:void(0)" target="_blank" onclick="return false;" id="previewLink">'+\r
-                                                                                       '<img id="previewImage" src="" alt="" /></a>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. '+\r
+                                                                                       '<img id="previewImage" alt="" /></a>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. '+\r
                                                                                        'Maecenas feugiat consequat diam. Maecenas metus. Vivamus diam purus, cursus a, commodo non, facilisis vitae, '+\r
                                                                                        'nulla. Aenean dictum lacinia tortor. Nunc iaculis, nibh non iaculis aliquam, orci felis euismod neque, sed ornare massa mauris sed velit. Nulla pretium mi et risus. Fusce mi pede, tempor id, cursus ac, ullamcorper nec, enim. Sed tortor. Curabitur molestie. Duis velit augue, condimentum at, ultrices a, luctus ut, orci. Donec pellentesque egestas eros. Integer cursus, augue in cursus faucibus, eros pede bibendum sem, in tempus tellus justo quis ligula. Etiam eget tortor. Vestibulum rutrum, est ut placerat elementum, lectus nisl aliquam velit, tempor aliquam eros nunc nonummy metus. In eros metus, gravida a, gravida sed, lobortis id, turpis. Ut ultrices, ipsum at venenatis fringilla, sem nulla lacinia tellus, eget aliquet turpis mauris non enim. Nam turpis. Suspendisse lacinia. Curabitur ac tortor ut ipsum egestas elementum. Nunc imperdiet gravida mauris.' +\r
                                                                                        '</div>'+'</div>'\r
@@ -1188,40 +1344,20 @@ For licensing, see LICENSE.html or http://ckeditor.com/license
                                                                        };\r
                                                                }\r
                                                        },\r
+                                                       onChange : function ()\r
+                                                       {\r
+                                                               commitInternally.call( this,\r
+                                                                       [ 'info:cmbFloat', 'info:cmbAlign',\r
+                                                                         'info:txtVSpace', 'info:txtHSpace',\r
+                                                                         'info:txtBorder',\r
+                                                                         'info:txtWidth', 'info:txtHeight' ] );\r
+                                                               updatePreview( this );\r
+                                                       },\r
                                                        commit : function( type, element )\r
                                                        {\r
                                                                if ( type == IMAGE && ( this.getValue() || this.isChanged() ) )\r
                                                                {\r
                                                                        element.setAttribute( 'style', this.getValue() );\r
-\r
-                                                                       // Set STYLE dimensions.\r
-                                                                       var height = element.getAttribute( 'height' ),\r
-                                                                               width = element.getAttribute( 'width' );\r
-\r
-                                                                       if ( this.attributesInStyle && this.attributesInStyle.height )\r
-                                                                       {\r
-                                                                               if ( height )\r
-                                                                               {\r
-                                                                                       if ( height.match( regexGetSize )[2] == '%' )                   // % is allowed\r
-                                                                                               element.setStyle( 'height', height + '%' );\r
-                                                                                       else\r
-                                                                                               element.setStyle( 'height', height + 'px' );\r
-                                                                               }\r
-                                                                               else\r
-                                                                                       element.removeStyle( 'height' );\r
-                                                                       }\r
-                                                                       if ( this.attributesInStyle && this.attributesInStyle.width )\r
-                                                                       {\r
-                                                                               if ( width )\r
-                                                                               {\r
-                                                                                       if ( width.match( regexGetSize )[2] == '%' )                    // % is allowed\r
-                                                                                               element.setStyle( 'width', width + '%' );\r
-                                                                                       else\r
-                                                                                               element.setStyle( 'width', width + 'px' );\r
-                                                                               }\r
-                                                                               else\r
-                                                                                       element.removeStyle( 'width' );\r
-                                                                       }\r
                                                                }\r
                                                        }\r
                                                }\r