CKEditor ACF image width and height - ckeditor

Question

I am trying to force CKEditor to set image width and height as attributes not styles. According to docs i need to set in CKEditor config allowedContent = img[!src,alt,width,height] but when i do this CKEditor mode changes from automatic to custom and filters all other html tags.
How to change allowedContent only this specific case?
As i understand correctly each plugin registers its own allowedContent, so i changed in image plugin following line allowed = 'img[alt,!src] to allowed = 'img[alt,!src, width, height] but it does not work

Answer 1

ACF lacks one thing - #feature event. There's currently no convenient way to alter allowedContent of a feature being registered.
In your case, you will be able to use a temporary solution I described on CKEditor forum.
Your previous attempt to alter image's allowedContent wasn't successful most likely because you haven't fully replaced it. This is a code from image plugin:
var allowed = 'img[alt,!src]{border-style,border-width,float,height,margin,margin-bottom,margin-left,margin-right,margin-top,width}',
required = 'img[alt,src]';
if ( CKEDITOR.dialog.isTabEnabled( editor, pluginName, 'advanced' ) )
allowed = 'img[alt,dir,id,lang,longdesc,!src,title]{*}(*)';
So if you have changed just the first occurrence, then the second overrides it.

Answer 2

Many thanks Rainmar for help. It seems that dialog is removing the attributes. I managed to fix that changing commit function for width and height in image/dialogs/image.js file.
The old function looked like this (for width only):
commit: function( type, element, internalCommit ) {
var value = this.getValue();
if ( type == IMAGE ) {
if ( value )
element.setStyle( 'width', CKEDITOR.tools.cssLength( value ) );
else
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' );
}
}
And change it to this:
commit: function( type, element, internalCommit ) {
var value = this.getValue();
if ( type == IMAGE ) {
if ( value ) {
element.setAttribute('width', value + 'px');
element.setStyle( 'width', CKEDITOR.tools.cssLength( value ) );
}else {
element.removeAttribute('width');
element.removeStyle( 'width' );
}
!internalCommit && element.removeStyle( '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' );
}
}

Answer 3

This is now super simple:
config.allowedContent = {
$1: {
// Use the ability to specify elements as an object.
elements: CKEDITOR.dtd,
attributes: true,
styles: true,
classes: true
}
};
config.disallowedContent = 'img{width,height}';
Which will alow everything, and convert inline image width/height to attributes.
http://docs.ckeditor.com/#!/guide/dev_acf-section-example%3A-disallow-inline-styles-and-use-attributes-instead