CKEDITOR - prevent adding image dimensions as a css style

Question

How to prevent CKEDITOR from adding image dimensions as a style?

Instead of this:

<img src="image.jpg" style="height:100px; width:100px;">

I want this

<img src="image.jpg" height="100px" width="100px">

Answer 1

I do not believe you can do it without altering the image plugin file of the CKEDITOR..

If you search their bug tracking site, you will see that they try to 'avoid XHTML deprecated attributes' in favor of styling. ( Avoid deprecated image attributes )

The place to look if you want to do it yourself (by altering the source files) is this file : plugins_image_dialogs_image.js You will see in there that they specifically remove the attribute and add the style equivalent.

Answer 2

I want to use CKEditor to create an email newsletter, the inline styling is ignored in outlook.

Surely a plug or a configuration option exists to allow the compatibility with depreciated HTML 4.0 attributes.

Answer 3

I have the same problem as you Stephan, especially i decided to use CKEeditor to create newsletter system and Outlook ignores totaly an image style attribute, did you found some solution?

Answer 4

same here, this sucks

Answer 5

Hey, I figured it out! So I created an account here just to post this for you all. I'm not using it for an Outlook newsletter but it should still work for that because it adds on the height and width attributes to the img tags.

If we ever happen to want to do this again here is exactly how I did it.

First I found some fully formatted and commented source files:

http://dev.fckeditor.net/browser/CKEditor/tags/3.2/_source/plugins/image/dialogs/image.js

So I retrieved the source of plugins/image/dialogs/image.js:

svn co http://svn.fckeditor.net/CKEditor/tags/3.2/_source/plugins/image/dialogs

If you have line numbers on each line because you didn't download it and just copied it you can remove them by running this command (from Linux terminal):

cut -c 5- image.js > image2.js

Or just click the Original Format link near the bottom of the page at the 1st link above.

Now we have a clean source file ready to edit.

The original packed version was 19k in the one I had. The unpacked source code was 45k. But it should only load when someone is editing something anyway and shouldn't be a problem. If it is then just repack it.

The version I have might be different from the one you have so I will show you which lines I am modifying and then what I did to them.

Replace lines 636-641:

if ( value )
    element.setStyle( 'width', CKEDITOR.tools.cssLength( value ) );
else if ( !value && this.isChanged( ) )
    element.removeStyle( 'width' );

!internalCommit && element.removeAttribute( 'width' );

with:

if ( value ) {
    element.setStyle( 'width', CKEDITOR.tools.cssLength( value ) );
    element.setAttribute( 'width', value );
} else if ( !value && this.isChanged( ) ) {
    element.removeStyle( 'width' );
    element.removeAttribute( 'width' );
}

//!internalCommit && element.removeAttribute( 'width' );

Replace line 653 (657 after above edits):

element.setStyle( 'width', value + 'px');

with:

element.setStyle( 'width', value + 'px');
element.setAttribute( 'width', value );

Replace lines 686-692 (691-697 after above edits):

if ( value )
    element.setStyle( 'height', CKEDITOR.tools.cssLength( value ) );
else if ( !value && this.isChanged( ) )
    element.removeStyle( 'height' );

if ( !internalCommit && type == IMAGE )
    element.removeAttribute( 'height' );

with:

if ( value ) {
    element.setStyle( 'height', CKEDITOR.tools.cssLength( value ) );
    element.setAttribute( 'height', value );
} else if ( !value && this.isChanged( ) ) {
    element.removeStyle( 'height' );
    element.removeAttribute( 'height' );
}

//if ( !internalCommit && type == IMAGE )
//  element.removeAttribute( 'height' );

Replace line 704 (712 after above edits):

element.setStyle( 'height', value + 'px' );

with:

element.setStyle( 'height', value + 'px' );
element.setAttribute( 'height', value );

The only catch is that it doesn't work when you drag the control points to resize it. I couldn't figure out that part. After dragging the control points to resize it just open the Image Properties and click OK and it will add the width and height attributes in again.