CKEDITOR doesn't save/parse width/height in attributes and styles simultaneously

Question

This piece of code won't save in source mode

<img src="/images/test.jpg" height="300" width="450" style="width: 350px; height: auto;" />

When I put this in source mode and click back to wysiwyg mode, CKEditor strips height/width attributes . This is what I see then

<img src="/images/test.jpg" style="width: 350px; height: auto;" />

But I need it to save both styles and attrubutes (style height/width and attributes height/width).

I tried using this config below, but it doesn't work

config.allowedContent = 'img{*}[*](*)'

I also tried

 config.allowedContent = true;

and it did work, but my config.disallowedContent do not work then. I believe the editor ignores styles and/or attributes (whichever goes first?) while HTML code parcing.

Answer 1

I finally found the answer for my question. Here is the code in /ckeditor.js in which I commented one line

contentTransformations: [
    // ["img{width}: sizeToStyle", "img[width]: sizeToAttribute"],
    ["img{float}: alignmentToStyle", "img[align]: alignmentToAttribute"]
]

Also in another file I added the following code:

evt.editor.dataProcessor.htmlFilter.addRules( {
elements: {
    $: function( element ) {
        if (element.name == 'img') {
            if (element.attributes.style) {
                var match = /(?:^|\s)width\s*:\s*((\d+)(pt|in|px)|auto|initial|inherit)/i.exec(element.attributes.style),
                    width = match && (match[2] || match[1]);

                if(width && !element.attributes.width) {
                    element.attributes.width = width;
                    element.attributes.style = element.attributes.style.replace(/(width\s*:\s*(\d+(pt|in|px)|auto|initial|inherit))/i, "");
                }

                match = /(?:^|\s)height\s*:\s*((\d+)(pt|in|px)|auto)/i.exec(element.attributes.style);
                var height = match && (match[2] || match[1]);

                if(height && !element.attributes.height) {
                    element.attributes.height = height;
                    element.attributes.style = element.attributes.style.replace(/(height\s*:\s*(\d+(pt|in|px)|auto|initial|inherit))/i, "");
                }
            }
        }
        return element;
    }
}

});