Thread:Extension talk:WYSIWYG/Images height and width not respected/reply

I tested this too, and it seems to work like you told abowe. When you for the first time insert pictures on page in wysiwyg mode, width and hight attributes are stored with picture elements, because if you double click different images, parameters are there and they have proper value. If you then save the page and re-enter the wysiwyg edit mode and switch to wikitext mode, wikitext mode has also hight and width parameters too but for some reason values are not set properly back into image elements in wysiwyg mode. Width and height values were not restored into boxes of dialog image.js either, when image was double clicked (FireFox v26.0).

Example of width and hight values in different modes (wikitext/wysiwyg):

Problem lies partly in image.js with "id: 'imgWidth'" block in "setup:" trigger. It tries to take value from 'style' attribute, which does not exist or does not have proper value or something like that.

In addition to attribute _fck_mw_filename of wysiyg mode, width and height values may also be stored in 'style' or 'height' attributes because in file ckeditor/plugins/mediawiki/plugin.js width and height values are extracted from these variables in certain order.

Below you can see how I have modified image.js. For dialog image.js, height and width are now extracted in same princible as in mediawiki/plugin.js. This only helped to get values into boxes of image.js dialog, it did not solve the problem with "height" and "width" attributes for images on screen so images had still wrong size on screen (in edit mode of wysiwyg). To fix this I had to modify file CKeditorLinker.php. I am not 100% sure if this is a valid solution, because in MW view mode of page, images have right width and height...but perhaps that mode has nothing to do with wysiwyg edit mode perhaps elements are recreated when wysiwyg mode is launched so my fix may be right.

There were some other issues too which I have changed in code below. Again, please remember that I am not expert on this field so there may still be some issues left in code, but at least in my environment code below works pretty much ok.

These have been added in WYSIWYG/plugin.js:

WYSIWYG/CKeditorLinker.php (modify at line ~126..)

WYSIWYG/CKeditorLinker.php (add after line ~146...)

dialogs/image.js: '										}									]                               }

]                       },                        {                            id: 'imgCaption', type: 'text', label: editor.lang.mwplugin.caption, style: 'border: 1px;', onChange : function {								//updatePreview( this.getDialog ); },							setup : function( type, element ) { if ( type == IMAGE ) this.setValue( element.getAttribute( 'alt' ) ); },							commit : function( type, element ) { if ( type == IMAGE ) { if ( this.getValue || this.isChanged ) { element.setAttribute( 'alt', this.getValue ); }								}								else if ( type == PREVIEW ) element.setAttribute( 'alt', this.getValue ); else if ( type == CLEANUP ) element.removeAttribute( 'alt' ); }

},                       {                            type: 'hbox', children: [                                   {                                        id: 'imgSpecialType', type: 'select', label: editor.lang.mwplugin.imgType, items: [ [ editor.lang.common.notSet, ' ' ],                   //07.01.14 RL                                            [ editor.lang.mwplugin.imgTypeThumb,    'Thumbnail' ], //07.01.14 RL                                            [ editor.lang.mwplugin.imgTypeFrame,    'Frame' ],     //07.01.14 RL											[ editor.lang.mwplugin.imgTypeFrameless,'Frameless' ], //07.01.14 RL                                            [ editor.lang.mwplugin.imgTypeBorder,   'Border' ]     //07.01.14 RL                                        ], setup : function( type, element ) { var imgType = element.getAttribute( '_fck_mw_type') || '', typeName = { thumb     : 'Thumbnail', frame     : 'Frame', frameless : 'Frameless',                      //07.01.14 RL                                                    border     : 'Border' }                                           if ( type == IMAGE && imgType ) this.setValue( typeName[imgType] ); },                                       commit : function( type, element ) { if ( type == IMAGE ) { if ( this.getValue || this.isChanged ) { switch (this.getValue) { case 'Thumbnail': element.setAttribute('_fck_mw_type', 'thumb'); element.removeClass('fck_mw_border'); element.addClass('fck_mw_frame'); break; case 'Frame' : element.setAttribute('_fck_mw_type', 'frame'); element.removeClass('fck_mw_border'); element.addClass('fck_mw_frame'); break; case 'Frameless' :                        //07.01.14 RL-> element.setAttribute('_fck_mw_type', 'frameless'); element.removeClass('fck_mw_border'); element.removeClass('fck_mw_frame'); break;                                //07.01.14 RL<- case 'Border' : element.setAttribute('_fck_mw_type', 'border'); element.removeClass('fck_mw_frame'); element.addClass('fck_mw_border'); break; default: element.setAttribute('_fck_mw_type', ''); element.removeClass('fck_mw_border'); element.addClass('fck_mw_frame'); }                                               }                                            }                                            else if ( type == CLEANUP ) element.setAttribute('_fck_mw_type', ''); }                                   },                                    {                                        id: 'imgAlign', type: 'select', //07.01.14 RL label: editor.lang.image.align, label: editor.lang.common.align,       //07.01.14 RL                                        items: [ /*07.01.14 RL->**** [ ' ' ],                                           [ editor.lang.image.alignRight, 'Right' ], [ editor.lang.image.alignLeft, 'Left' ], [ editor.lang.mwplugin.alignCenter, 'Center' ] ****/											[ editor.lang.common.notSet,    ' '      ], [ editor.lang.common.alignRight, 'Right' ], [ editor.lang.common.alignLeft, 'Left'   ], [ editor.lang.common.alignCenter,'Center' ] /*07.01.14 RL<-*/ ],                                       setup : function( type, element ) { //var className = element.getAttribute( 'class') || ,           //07.01.14 RL                                              //  align = className.replace(/fck_mw_(right|left|center)/, '$1'); //07.01.14 RL											var align = element.getAttribute( '_fck_mw_location') || ;       //07.01.14 RL											if ( type == IMAGE && align ) this.setValue( align.FirstToUpper ); },                                       commit : function( type, element ) { if ( type == IMAGE ) { if ( this.getValue || this.isChanged ) { var newVal = this.getValue.toLowerCase.Trim, classes = [ 'right', 'left', 'center' ]; if ( newVal ) { for (var i = 0; i < classes.length; i++ ) { if ( newVal == classes[i] ) element.addClass('fck_mw_' + classes[i]); else element.removeClass('fck_mw_' + classes[i]); }                                                       element.setAttribute('_fck_mw_location', newVal); }                                                   else { element.setAttribute('_fck_mw_location', 'none'); element.removeClass('fck_mw_left'); element.removeClass('fck_mw_center'); element.addClass('fck_mw_right'); }                                               }                                            }                                        }                                    },                                    {                                        id: 'imgWidth', type: 'text', //label: editor.lang.image.width,  //07.01.14 RL                                        label: editor.lang.common.width,    //07.01.14 RL                                        size: '4', setup : function( type, element ) { var imgWidth = element.getAttribute( '_fck_mw_width') || '',         //10.01.14 RL imgStyle = element.getAttribute( 'style') || '', match = /(?:^|\s)width\s*:\s*(\d+)/i.exec( imgStyle ), imgStyleWidth = match && match[1] || 0; imgRealWidth	= ( element.getAttribute( 'width' ) ||  ) + ; //10.01.14 RL											if ( imgStyleWidth.length > 0 )										 //10.01.14 RL-> imgWidth = imgStyleWidth; else if ( imgWidth.length > 0 && imgRealWidth.length > 0 ) imgWidth = imgRealWidth;										 //10.01.14 RL<- if ( type == IMAGE && imgWidth )   //10.01.14 RL Was imgStyleWidth this.setValue( imgWidth );		//10.01.14 RL Was imgStyleWidth },                                       commit : function( type, element, internalCommit ) { var value = this.getValue; if ( type == IMAGE ) {												if ( value ) element.setStyle( 'width', CKEDITOR.tools.cssLength( value ) ); else if ( !value && this.isChanged ) element.removeStyle( 'width' ); !internalCommit && element.removeAttribute( 'width' ); }											else if ( type == PREVIEW ) {												var aMatch = value.match( regexGetSize ); if ( !aMatch ) {													var oImageOriginal = this.getDialog.originalElement; if ( oImageOriginal.getCustomData( 'isReady' ) == 'true' ) element.setStyle( 'width', oImageOriginal.$.width + 'px'); }												else element.setStyle( 'width', CKEDITOR.tools.cssLength( value ) ); }											else if ( type == CLEANUP ) {												element.removeAttribute( 'width' ); element.removeStyle( 'width' ); }										}

},                                   {                                        id: 'imgHeight', type: 'text', //label: editor.lang.image.height,  //07.01.14 RL                                        label: editor.lang.common.height,    //07.01.14 RL                                        size: '4', setup : function( type, element ) { var imgHeight = element.getAttribute( '_fck_mw_height') || ,			//10.01.14 RL												imgStyle = element.getAttribute( 'style') || , match = /(?:^|\s)height\s*:\s*(\d+)/i.exec( imgStyle ), imgStyleHeight = match && match[1] || 0 imgRealHeight	= ( element.getAttribute( 'height' ) ||  ) + ; //10.01.14 RL

if ( imgStyleHeight.length > 0 )										//10.01.14 RL-> imgHeight = imgStyleHeight; else if ( imgHeight.length > 0 && imgRealHeight.length > 0 ) imgHeight = imgRealHeight;											//10.01.14 RL<- if ( type == IMAGE && imgHeight )	//10.01.14 RL Was imgStyleHight this.setValue( imgHeight ); 	//10.01.14 RL Was imgStyleHight },										commit : function( type, element, internalCommit ) {											var value = this.getValue; if ( type == IMAGE ) {												if ( value ) element.setStyle( 'height', CKEDITOR.tools.cssLength( value ) ); else if ( !value && this.isChanged ) element.removeStyle( 'height' );

if ( !internalCommit && type == IMAGE ) element.removeAttribute( 'height' ); }											else if ( type == PREVIEW ) {												var aMatch = value.match( regexGetSize ); if ( !aMatch ) {													var oImageOriginal = this.getDialog.originalElement; if ( oImageOriginal.getCustomData( 'isReady' ) == 'true' ) element.setStyle( 'height', oImageOriginal.$.height + 'px' ); }												else element.setStyle( 'height', CKEDITOR.tools.cssLength( value ) ); }											else if ( type == CLEANUP ) {												element.removeAttribute( 'height' ); element.removeStyle( 'height' ); }										}

},                                   {                                        type: 'html', width: '100%', html: '' }                               ]                        }                    ]                }            ],

onOk : function {

if (this.imageEditMode && this.imageEditMode == "img" ) { this.imageElement = this.cleanImageElement; delete this.cleanImageElement; }               else { this.imageElement = editor.document.createElement( 'img' ); }               // Set attributes. this.commitContent( IMAGE, this.imageElement ); // Change the image element into a link when it's an external URL if ( this.imageElement.getAttribute('href') ) { var link = editor.document.createElement( 'a' ); link.setAttribute('href', this.imageElement.getAttribute('href')); var text = this.imageElement.getAttribute('alt') || this.imageElement.getAttribute('href'); link.setText( text ); this.imageElement = link; }               else { // set some default classes for alignment and border if this is not defined var attrClass = this.imageElement.getAttribute('class'); if ( !( attrClass && attrClass.match(/fck_mw_(frame|frameless|border)/) ) ) //07.01.14 Added frameless this.imageElement.addClass('fck_mw_border'); if ( !( attrClass && attrClass.match(/fck_mw_(left|right|center)/) ) ) this.imageElement.addClass('fck_mw_right'); }               // Remove empty style attribute. if ( !this.imageElement.getAttribute( 'style' ) ) this.imageElement.removeAttribute( 'style' );

// Insert a new Image. if ( !this.imageEditMode ) {					editor.insertElement( this.imageElement ); }           },

onShow : function {               this.imageEditMode = false; this.dontResetSize = false; // clear old selection list from a previous call var	e = this.getContentElement( 'info', 'imgList' ); e.items = []; var div = document.getElementById(e.domId), select = div.getElementsByTagName('select')[0]; while ( select.options.length > 0 ) select.remove( 0 ); // and set correct label for image list e = this.getContentElement( 'info', 'imgList' ), label = document.getElementById(e.domId).getElementsByTagName('label')[0]; var editor = this.getParentEditor, message = editor.lang.mwplugin.searchLabel.replace(/%s/, editor.lang.mwplugin.startTyping); e.html = message; label.innerHTML = message;

var selection = editor.getSelection, element = selection.getSelectedElement;

//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', '' ); this.originalElement.setCustomData( 'isReady', 'false' );

if ( element && element.getName == 'img' && !element.getAttribute( 'data-cke-realelement' )					|| element && element.getName == 'input' && element.getAttribute( 'type' ) == 'image' ) {					this.imageEditMode = element.getName; this.imageElement = element; SrcInWiki = element.getAttribute( 'src' ); }               else { OnUrlChange( this ); }

if ( this.imageEditMode ) {					// Use the original element as a buffer from since we don't want // temporary changes to be committed, e.g. if the dialog is canceled. this.cleanImageElement = this.imageElement; this.imageElement = this.cleanImageElement.clone( true, true );

// Fill out all fields. this.setupContent( IMAGE, this.imageElement );

}				else this.imageElement = editor.document.createElement( 'img' );

// Dont show preview if no URL given. if ( !CKEDITOR.tools.trim( this.getValueOf( 'info', 'imgFilename' ) ) ) {					this.preview.removeAttribute( 'src' ); this.preview.setStyle( 'display', 'none' ); }

},			onHide : function {				if ( this.preview ) this.commitContent( CLEANUP, this.preview );

if ( this.originalElement ) {					this.originalElement.removeListener( 'load', onImgLoadEvent ); this.originalElement.removeListener( 'error', onImgLoadErrorEvent ); this.originalElement.removeListener( 'abort', onImgLoadErrorEvent ); this.originalElement.remove; this.originalElement = false;		// Dialog is closed. }

delete this.imageElement; }

} } } );