X-Git-Url: https://jasonwoof.com/gitweb/?a=blobdiff_plain;f=_source%2Fplugins%2Fimage%2Fdialogs%2Fimage.js;h=992d700c061695f55b6b4af641ba6cd87c886ea6;hb=2f22c0c38f17e75be5541089076885442aaa2377;hp=233a291915f90ff84cbd334e61643130e217e7ef;hpb=ea7e3453c7b0f023b050aca6d9f83ab372860d91;p=ckeditor.git diff --git a/_source/plugins/image/dialogs/image.js b/_source/plugins/image/dialogs/image.js index 233a291..992d700 100644 --- a/_source/plugins/image/dialogs/image.js +++ b/_source/plugins/image/dialogs/image.js @@ -1,150 +1,222 @@ /* -Copyright (c) 2003-2009, CKSource - Frederico Knabben. All rights reserved. +Copyright (c) 2003-2012, CKSource - Frederico Knabben. All rights reserved. For licensing, see LICENSE.html or http://ckeditor.com/license */ (function() { - // Load image preview. - var IMAGE = 1, - LINK = 2, - PREVIEW = 4, - CLEANUP = 8, - regexGetSize = /^\s*(\d+)((px)|\%)?\s*$/i, - regexGetSizeOrEmpty = /(^\s*(\d+)((px)|\%)?\s*$)|^$/i; - - var onSizeChange = function() + var imageDialog = function( editor, dialogType ) { - 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. - value = aMatch[1]; - } + // Load image preview. + var IMAGE = 1, + LINK = 2, + PREVIEW = 4, + CLEANUP = 8, + regexGetSize = /^\s*(\d+)((px)|\%)?\s*$/i, + regexGetSizeOrEmpty = /(^\s*(\d+)((px)|\%)?\s*$)|^$/i, + pxLengthRegex = /^\d+px$/; - // Only if ratio is locked - if ( dialog.lockRatio ) + var onSizeChange = function() { - var oImageOriginal = dialog.originalElement; - if ( oImageOriginal.getCustomData( 'isReady' ) == 'true' ) + var value = this.getValue(), // This = input element. + dialog = this.getDialog(), + aMatch = value.match( regexGetSize ); // Check value + if ( aMatch ) { - if ( this.id == 'txtHeight' ) + if ( aMatch[2] == '%' ) // % is allowed - > unlock ratio. + switchLockRatio( dialog, false ); // Unlock. + value = aMatch[1]; + } + + // Only if ratio is locked + if ( dialog.lockRatio ) + { + var oImageOriginal = dialog.originalElement; + if ( oImageOriginal.getCustomData( 'isReady' ) == 'true' ) { - if ( value && value != '0' ) - value = Math.round( oImageOriginal.$.width * ( value / oImageOriginal.$.height ) ); - if ( !isNaN( value ) ) - dialog.setValueOf( 'info', 'txtWidth', value ); + 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.$.height * ( value / oImageOriginal.$.width ) ); + if ( !isNaN( value ) ) + dialog.setValueOf( 'info', 'txtHeight', value ); + } } - else //this.id = txtWidth. + } + updatePreview( dialog ); + }; + + var updatePreview = function( dialog ) + { + //Don't load before onShow. + if ( !dialog.originalElement || !dialog.preview ) + return 1; + + // Read attributes and update imagePreview; + 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() + { + var args = arguments; + 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 ); + }); + } + + // Avoid recursions. + var incommit; + + // 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 ) + return; + + incommit = 1; + + var dialog = this.getDialog(), + element = dialog.imageElement; + if ( element ) + { + // Commit this field and broadcast to target fields. + this.commit( IMAGE, element ); + + targetFields = [].concat( targetFields ); + var length = targetFields.length, + field; + for ( var i = 0; i < length; i++ ) { - if ( value && value != '0' ) - value = Math.round( oImageOriginal.$.height * ( value / oImageOriginal.$.width ) ); - if ( !isNaN( value ) ) - dialog.setValueOf( 'info', 'txtHeight', value ); + field = dialog.getContentElement.apply( dialog, targetFields[ i ].split( ':' ) ); + // May cause recursion. + field && field.setup( IMAGE, element ); } } + + incommit = 0; } - updatePreview( dialog ); - }; - var updatePreview = function( dialog ) - { - //Don't load before onShow. - if ( !dialog.originalElement || !dialog.preview ) - return 1; + var switchLockRatio = function( dialog, value ) + { + if ( !dialog.getContentElement( 'info', 'ratioLock' ) ) + return null; - // Read attributes and update imagePreview; - dialog.commitContent( PREVIEW, dialog.preview ); - return 0; - }; + var oImageOriginal = dialog.originalElement; - var switchLockRatio = function( dialog, value ) - { - var oImageOriginal = dialog.originalElement, - ratioButton = CKEDITOR.document.getById( 'btnLockSizes' ); + // Dialog may already closed. (#5505) + if( !oImageOriginal ) + return null; - if ( oImageOriginal.getCustomData( 'isReady' ) == 'true' ) - { - if ( value == 'check' ) // Check image ratio and original image ratio. + // Check image ratio and original image ratio, but respecting user's preference. + if ( value == 'check' ) { - 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 - - if ( !width && !height ) - dialog.lockRatio = true; - else if ( !isNaN( originalRatio ) && !isNaN( thisRatio ) ) + if ( !dialog.userlockRatio && oImageOriginal.getCustomData( 'isReady' ) == 'true' ) { - if ( Math.round( originalRatio ) == Math.round( thisRatio ) ) + 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 + + if ( !width && !height ) dialog.lockRatio = true; + else if ( !isNaN( originalRatio ) && !isNaN( thisRatio ) ) + { + if ( Math.round( originalRatio ) == Math.round( thisRatio ) ) + dialog.lockRatio = true; + } } } else if ( value != undefined ) dialog.lockRatio = value; else + { + dialog.userlockRatio = 1; dialog.lockRatio = !dialog.lockRatio; - } - else if ( value != 'check' ) // I can't lock ratio if ratio is unknown. - dialog.lockRatio = false; + } - 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' ); - return dialog.lockRatio; - }; + ratioButton.setAttribute( 'aria-checked', dialog.lockRatio ); - var resetSize = function( dialog ) - { - var oImageOriginal = dialog.originalElement; - if ( oImageOriginal.getCustomData( 'isReady' ) == 'true' ) - { - dialog.setValueOf( 'info', 'txtWidth', oImageOriginal.$.width ); - dialog.setValueOf( 'info', 'txtHeight', oImageOriginal.$.height ); - } - updatePreview( dialog ); - }; + // 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' ); + } - var setupDimension = function( type, element ) - { - if ( type != IMAGE ) - return; + return dialog.lockRatio; + }; - function checkDimension( size, defaultValue ) + var resetSize = function( dialog ) { - var aMatch = size.match( regexGetSize ); - if ( aMatch ) + var oImageOriginal = dialog.originalElement; + if ( oImageOriginal.getCustomData( 'isReady' ) == 'true' ) { - if ( aMatch[2] == '%' ) // % is allowed. + var widthField = dialog.getContentElement( 'info', 'txtWidth' ), + heightField = dialog.getContentElement( 'info', 'txtHeight' ); + widthField && widthField.setValue( oImageOriginal.$.width ); + heightField && heightField.setValue( oImageOriginal.$.height ); + } + updatePreview( dialog ); + }; + + var setupDimension = function( type, element ) + { + if ( type != IMAGE ) + return; + + function checkDimension( size, defaultValue ) + { + var aMatch = size.match( regexGetSize ); + if ( aMatch ) { - aMatch[1] += '%'; - switchLockRatio( dialog, false ); // Unlock ratio + if ( aMatch[2] == '%' ) // % is allowed. + { + aMatch[1] += '%'; + switchLockRatio( dialog, false ); // Unlock ratio + } + return aMatch[1]; } - return aMatch[1]; + return defaultValue; } - return defaultValue; - } - var dialog = this.getDialog(), - value = '', - dimension = (( this.id == 'txtWidth' )? 'width' : 'height' ), - size = element.getAttribute( dimension ); + var dialog = this.getDialog(), + value = '', + dimension = this.id == 'txtWidth' ? 'width' : 'height', + size = element.getAttribute( dimension ); - if ( size ) - value = checkDimension( size, value ); - value = checkDimension( element.$.style[ dimension ], value ); + if ( size ) + value = checkDimension( size, value ); + value = checkDimension( element.getStyle( dimension ), value ); - this.setValue( value ); - }; + this.setValue( value ); + }; + + var previewPreloader; - var imageDialog = function( editor, dialogType ) - { var onImgLoadEvent = function() { // Image is ready. @@ -155,14 +227,15 @@ For licensing, see LICENSE.html or http://ckeditor.com/license original.removeListener( 'abort', onImgLoadErrorEvent ); // Hide loader - CKEDITOR.document.getById( 'ImagePreviewLoader' ).setStyle( 'display', 'none' ); + CKEDITOR.document.getById( imagePreviewLoaderId ).setStyle( 'display', 'none' ); // New image -> new domensions if ( !this.dontResetSize ) resetSize( this ); if ( this.firstLoad ) - switchLockRatio( this, 'check' ); + CKEDITOR.tools.setTimeout( function(){ switchLockRatio( this, 'check' ); }, 0, this ); + this.firstLoad = false; this.dontResetSize = false; }; @@ -182,13 +255,24 @@ For licensing, see LICENSE.html or http://ckeditor.com/license this.preview.setAttribute( 'src', noimage ); // Hide loader - CKEDITOR.document.getById( 'ImagePreviewLoader' ).setStyle( 'display', 'none' ); + 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' ), + previewLinkId = numbering( 'previewLink' ), + previewImageId = numbering( 'previewImage' ); + return { - title : ( dialogType == 'image' ) ? editor.lang.image.title : editor.lang.image.titleButton, + title : editor.lang.image[ dialogType == 'image' ? 'title' : 'titleButton' ], minWidth : 420, - minHeight : 310, + minHeight : 360, onShow : function() { this.imageElement = false; @@ -199,20 +283,22 @@ For licensing, see LICENSE.html or http://ckeditor.com/license this.linkEditMode = false; this.lockRatio = true; + this.userlockRatio = 0; this.dontResetSize = false; this.firstLoad = true; this.addLink = false; - //Hide loader. - CKEDITOR.document.getById( 'ImagePreviewLoader' ).setStyle( 'display', 'none' ); - // Preview - this.preview = CKEDITOR.document.getById( 'previewImage' ); - var editor = this.getParentEditor(), - sel = this.getParentEditor().getSelection(), - element = sel.getSelectedElement(), + sel = editor.getSelection(), + element = sel && sel.getSelectedElement(), link = element && element.getAscendant( 'a' ); + //Hide loader. + 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 ); + // Copy of the image this.originalElement = editor.document.createElement( 'img' ); this.originalElement.setAttribute( 'alt', '' ); @@ -242,21 +328,34 @@ For licensing, see LICENSE.html or http://ckeditor.com/license this.setupContent( LINK, link ); } - if ( element && element.getName() == 'img' && !element.getAttribute( '_cke_protected_html' ) ) - this.imageEditMode = 'img'; - else if ( element && element.getName() == 'input' && element.getAttribute( 'type' ) && element.getAttribute( 'type' ) == 'image' ) - this.imageEditMode = 'input'; + 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 || this.imageElement ) + if ( this.imageEditMode ) { - if ( !this.imageElement ) - this.imageElement = element; + // 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 ); // Fill out all fields. this.setupContent( IMAGE, this.imageElement ); + } + else + this.imageElement = editor.document.createElement( 'img' ); - // Refresh LockRatio button - switchLockRatio ( this, true ); + // Refresh LockRatio button + 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' ); } }, onOk : function() @@ -289,6 +388,12 @@ For licensing, see LICENSE.html or http://ckeditor.com/license ); editor.insertElement( this.imageElement ); } + else + { + // Restore the original element before all commits. + this.imageElement = this.cleanImageElement; + delete this.cleanImageElement; + } } else // Create a new image. { @@ -311,6 +416,10 @@ For licensing, see LICENSE.html or http://ckeditor.com/license this.commitContent( IMAGE, this.imageElement ); this.commitContent( LINK, this.linkElement ); + // Remove empty style attribute. + if ( !this.imageElement.getAttribute( 'style' ) ) + this.imageElement.removeAttribute( 'style' ); + // Insert a new Image. if ( !this.imageEditMode ) { @@ -319,11 +428,11 @@ For licensing, see LICENSE.html or http://ckeditor.com/license //Insert a new Link. if ( !this.linkEditMode ) { - editor.insertElement(this.linkElement); - this.linkElement.append(this.imageElement, false); + editor.insertElement( this.linkElement ); + this.linkElement.append( this.imageElement, false ); } else //Link already exists, image not. - editor.insertElement(this.imageElement ); + editor.insertElement( this.imageElement ); } else editor.insertElement( this.imageElement ); @@ -349,8 +458,14 @@ For licensing, see LICENSE.html or http://ckeditor.com/license if ( dialogType != 'image' ) this.hidePage( 'Link' ); //Hide Link tab. var doc = this._.element.getDocument(); - this.addFocusable( doc.getById( 'btnResetSize' ), 5 ); - this.addFocusable( doc.getById( 'btnLockSizes' ), 5 ); + + if ( this.getContentElement( 'info', 'ratioLock' ) ) + { + this.addFocusable( doc.getById( btnResetSizeId ), 5 ); + this.addFocusable( doc.getById( btnLockSizesId ), 5 ); + } + + this.commitContent = commitContent; }, onHide : function() { @@ -365,6 +480,8 @@ For licensing, see LICENSE.html or http://ckeditor.com/license this.originalElement.remove(); this.originalElement = false; // Dialog is closed. } + + delete this.imageElement; }, contents : [ { @@ -379,10 +496,6 @@ For licensing, see LICENSE.html or http://ckeditor.com/license children : [ { - type : 'html', - html : '' + CKEDITOR.tools.htmlEncode( editor.lang.image.url ) + '' - }, - { type : 'hbox', widths : [ '280px', '110px' ], align : 'right', @@ -391,7 +504,8 @@ For licensing, see LICENSE.html or http://ckeditor.com/license { id : 'txtUrl', type : 'text', - label : '', + label : editor.lang.common.url, + required: true, onChange : function() { var dialog = this.getDialog(), @@ -403,9 +517,11 @@ For licensing, see LICENSE.html or http://ckeditor.com/license dialog = this.getDialog(); var original = dialog.originalElement; + dialog.preview.removeStyle( 'display' ); + original.setCustomData( 'isReady', 'false' ); // Show loader - var loader = CKEDITOR.document.getById( 'ImagePreviewLoader' ); + var loader = CKEDITOR.document.getById( imagePreviewLoaderId ); if ( loader ) loader.setStyle( 'display', '' ); @@ -413,46 +529,54 @@ For licensing, see LICENSE.html or http://ckeditor.com/license original.on( 'error', onImgLoadErrorEvent, dialog ); original.on( 'abort', onImgLoadErrorEvent, dialog ); original.setAttribute( 'src', newUrl ); - dialog.preview.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.getAttribute( '_cke_saved_src' ) || element.getAttribute( 'src' ); + var url = element.data( 'cke-saved-src' ) || element.getAttribute( 'src' ); var field = this; this.getDialog().dontResetSize = true; - // In IE7 the dialog is being rendered improperly when loading - // an image with a long URL. So we need to delay it a bit. (#4122) - setTimeout( function() - { - field.setValue( url ); // And call this.onChange() - field.focus(); - }, 0 ); + 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.setAttribute( '_cke_saved_src', decodeURI( this.getValue() ) ); - element.setAttribute( 'src', decodeURI( this.getValue() ) ); + 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, @@ -466,7 +590,7 @@ For licensing, see LICENSE.html or http://ckeditor.com/license id : 'txtAlt', type : 'text', label : editor.lang.image.alt, - accessKey : 'A', + accessKey : 'T', 'default' : '', onChange : function() { @@ -496,17 +620,16 @@ For licensing, see LICENSE.html or http://ckeditor.com/license }, { type : 'hbox', - widths : [ '140px', '240px' ], children : [ { + id : 'basic', type : 'vbox', - padding : 10, children : [ { type : 'hbox', - widths : [ '70%', '30%' ], + widths : [ '50%', '50%' ], children : [ { @@ -518,30 +641,35 @@ For licensing, see LICENSE.html or http://ckeditor.com/license type : 'text', width: '40px', id : 'txtWidth', - labelLayout : 'horizontal', - label : editor.lang.image.width, + label : editor.lang.common.width, onKeyUp : onSizeChange, - validate: function() + onChange : function() + { + commitInternally.call( this, 'advanced:txtdlgGenStyle' ); + }, + validate : function() { - var aMatch = this.getValue().match( regexGetSizeOrEmpty ); - if ( !aMatch ) - alert( editor.lang.common.validateNumberFailed ); - return !!aMatch; + 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 ) + commit : function( type, element, internalCommit ) { + var value = this.getValue(); if ( type == IMAGE ) { - var value = this.getValue(); if ( value ) - element.setAttribute( 'width', value ); - else if ( !value && this.isChanged() ) - element.removeAttribute( 'width' ); + element.setStyle( 'width', CKEDITOR.tools.cssLength( value ) ); + else + element.removeStyle( 'width' ); + + !internalCommit && element.removeAttribute( 'width' ); } else if ( type == PREVIEW ) { - value = this.getValue(); var aMatch = value.match( regexGetSize ); if ( !aMatch ) { @@ -550,11 +678,10 @@ For licensing, see LICENSE.html or http://ckeditor.com/license element.setStyle( 'width', oImageOriginal.$.width + 'px'); } else - element.setStyle( 'width', value + 'px'); + element.setStyle( 'width', CKEDITOR.tools.cssLength( value ) ); } else if ( type == CLEANUP ) { - element.setStyle( 'width', '0px' ); // If removeAttribute doesn't work. element.removeAttribute( 'width' ); element.removeStyle( 'width' ); } @@ -564,43 +691,47 @@ For licensing, see LICENSE.html or http://ckeditor.com/license type : 'text', id : 'txtHeight', width: '40px', - labelLayout : 'horizontal', - label : editor.lang.image.height, + label : editor.lang.common.height, onKeyUp : onSizeChange, - validate: function() + onChange : function() { - var aMatch = this.getValue().match( regexGetSizeOrEmpty ); - if ( !aMatch ) - alert( editor.lang.common.validateNumberFailed ); - return !!aMatch; + 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 ) + commit : function( type, element, internalCommit ) { + var value = this.getValue(); if ( type == IMAGE ) { - var value = this.getValue(); if ( value ) - element.setAttribute( 'height', value ); - else if ( !value && this.isChanged() ) - element.removeAttribute( 'height' ); + element.setStyle( 'height', CKEDITOR.tools.cssLength( value ) ); + else + element.removeStyle( 'height' ); + + !internalCommit && element.removeAttribute( 'height' ); } else if ( type == PREVIEW ) { - value = this.getValue(); var aMatch = value.match( regexGetSize ); if ( !aMatch ) { var oImageOriginal = this.getDialog().originalElement; if ( oImageOriginal.getCustomData( 'isReady' ) == 'true' ) - element.setStyle( 'height', oImageOriginal.$.height + 'px'); + element.setStyle( 'height', oImageOriginal.$.height + 'px' ); } else - element.setStyle( 'height', value + 'px'); + element.setStyle( 'height', CKEDITOR.tools.cssLength( value ) ); } else if ( type == CLEANUP ) { - element.setStyle( 'height', '0px' ); // If removeAttribute doesn't work. element.removeAttribute( 'height' ); element.removeStyle( 'height' ); } @@ -609,18 +740,20 @@ For licensing, see LICENSE.html or http://ckeditor.com/license ] }, { + id : 'ratioLock', type : 'html', - style : 'margin-top:10px;width:40px;height:40px;', + style : 'margin-top:30px;width:40px;height:40px;', onLoad : function() { // Activate Reset button - var resetButton = CKEDITOR.document.getById( 'btnResetSize' ), - ratioButton = CKEDITOR.document.getById( 'btnLockSizes' ); + var resetButton = CKEDITOR.document.getById( btnResetSizeId ), + ratioButton = CKEDITOR.document.getById( btnLockSizesId ); if ( resetButton ) { - resetButton.on( 'click', function() + resetButton.on( 'click', function( evt ) { resetSize( this ); + evt.data && evt.data.preventDefault(); }, this.getDialog() ); resetButton.on( 'mouseover', function() { @@ -634,7 +767,7 @@ For licensing, see LICENSE.html or http://ckeditor.com/license // Activate (Un)LockRatio button if ( ratioButton ) { - ratioButton.on( 'click', function() + ratioButton.on( 'click', function(evt) { var locked = switchLockRatio( this ), oImageOriginal = this.originalElement, @@ -649,6 +782,7 @@ For licensing, see LICENSE.html or http://ckeditor.com/license updatePreview( this ); } } + evt.data && evt.data.preventDefault(); }, this.getDialog() ); ratioButton.on( 'mouseover', function() { @@ -662,9 +796,9 @@ For licensing, see LICENSE.html or http://ckeditor.com/license }, html : '
'+
+ ''+
+ ' |