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

I tested this too, and like you said it seems to work like that. 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 click the image, parameters are there. If you then save the page and re-enter the wysiwyg edit mode and switch to wikitext mode, wikitext mode has hight and width parameters but for some reason they are not set properly into picture elements in wysiwyg mode. Also appearance of pictures match the missing value of parameters (= pictures have wrong size in wysiwyg edit mode).

Values are there in both modes:

I think I have fixed similar kind of problem with id: 'imgAlign' //var className = element.getAttribute( 'class') || '',           //07.01.14 //align = className.replace(/fck_mw_(right|left|center)/, '$1');  //07.01.14 var align = element.getAttribute( '_fck_mw_location') || '';      //07.01.14

I think problem f.ex with width lies in "id: 'imgWidth'" block in "setup:" trigger. It tries to take value from 'style' attribute, I think it should take value from _fck_mw_width (and with hight from _fck_mw_height).

Btw... is there a better way to exchange these codes, because I think it may be annoying for readers to have them placed here :) anyway, here you can see how I have modified image.js, there were some other issues too with I have changed but it still has the same problem as what you have described abowe:

'										}									]                               }

]                       },                        {                            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 imgStyle = element.getAttribute( 'style') || '', match = /(?:^|\s)width\s*:\s*(\d+)/i.exec( imgStyle ), imgStyleWidth = match && match[1] || 0; if ( type == IMAGE && imgStyleWidth ) this.setValue( 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 imgStyle = element.getAttribute( 'style') || '', match = /(?:^|\s)height\s*:\s*(\d+)/i.exec( imgStyle ), imgStyleWidth = match && match[1] || 0; if ( type == IMAGE && imgStyleWidth ) this.setValue( imgStyleWidth ); },										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; }

} } } );