40

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">
3
  • @Funky Dude - Probably a XHTML Strict page Commented Feb 5, 2010 at 11:02
  • 5
    @Funky Dude - look at @Stephen's comment. We are using it for creating the content of e-mail newsletters. Therefore we can't use css. Sometimes outlook doesn't show images if you don't specify image dimensions.
    – Franek
    Commented Feb 5, 2010 at 16:00
  • 1
    Any acceptable answer so far ? Commented Sep 25, 2013 at 18:05

7 Answers 7

36

You can resolve the issue by inserting this code in config.js of your CKEditor

CKEDITOR.on('instanceReady', function (ev) {
ev.editor.dataProcessor.htmlFilter.addRules(
    {
        elements:
        {
            $: function (element) {
                // Output dimensions of images as width and height
                if (element.name == 'img') {
                    var style = element.attributes.style;

                    if (style) {
                        // Get the width from the style.
                        var match = /(?:^|\s)width\s*:\s*(\d+)px/i.exec(style),
                            width = match && match[1];

                        // Get the height from the style.
                        match = /(?:^|\s)height\s*:\s*(\d+)px/i.exec(style);
                        var height = match && match[1];

                        if (width) {
                            element.attributes.style = element.attributes.style.replace(/(?:^|\s)width\s*:\s*(\d+)px;?/i, '');
                            element.attributes.width = width;
                        }

                        if (height) {
                            element.attributes.style = element.attributes.style.replace(/(?:^|\s)height\s*:\s*(\d+)px;?/i, '');
                            element.attributes.height = height;
                        }
                    }
                }



                if (!element.attributes.style)
                    delete element.attributes.style;

                return element;
            }
        }
    });
});
8
  • 2
    This worked for me. The patch linked in one of the other answers is hard-coded for a single instance, and I often have multiple instances on a page. As a bonus it worked when placed in my custom JS config file, meaning I could leave the ckeditor libs untouched, which makes upgrades easier.
    – Synchro
    Commented Jul 31, 2011 at 20:02
  • 1
    It didn't work for me, which version of CKEditor is supported? I am using 3.6.3
    – Nir
    Commented Jun 26, 2013 at 6:03
  • 2
    This does not work for me using CKEditor 4.1.2 in IE 9 :( Worked fine in Chrome though.
    – mlunoe
    Commented Jul 29, 2013 at 14:29
  • 1
    Using version:"4.1.1",revision:"5a2a7e3, this patch seems to work fine, cross-browser. Commented Sep 25, 2013 at 18:37
  • 2
    Thanks for this! I did the ol' copy-and-tweak on this to add handling for a float, to convert it into an align attribute. This allows me to get around some XSS filtering in Drupal that strips out any style attribute on images. Commented Dec 27, 2013 at 19:20
33

There is one more way to do this (much simpler), by using Disallowed Content introduced in CKEditor 4.4.0:

CKEDITOR.replace( 'editor1', {
    disallowedContent : 'img{width,height}'
} );

or in config.js:

config.disallowedContent = 'img{width,height}';

This rule will disallow inline styles (width and height) for img element, CKEditor will use attributes instead.

If for some reason, you will notice that the width/height input elements in the Image dialog window are now gone, set the following as well:

config.extraAllowedContent = 'img[width,height]';
7
  • This worked for me while @Marco solution didin't. I use 4.4.5
    – Gab
    Commented Oct 19, 2014 at 21:35
  • 1
    If you want to allow all content, and convert the styles to attributes, then you can do this: 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}'; link Commented Jul 29, 2015 at 0:10
  • This works best in the newest version. I had to combine it with Marco Cortellinos answer to enable the resizing using the handles in the editor.
    – ColmanJ
    Commented Feb 14, 2017 at 8:21
  • 1
    How this is working on version 4.4.5? I couldn't get it work.
    – ibubi
    Commented Feb 27, 2017 at 7:23
  • 1
    It did not work for me either. My version is 4.6.1. Please advise. Commented Nov 28, 2017 at 3:45
4

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.

1
  • You can get that file under the _source folder of the zip with the rest of CKEditor.
    – AlfonsoML
    Commented Apr 9, 2010 at 15:00
3

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.

2
  • Spot on. You can edit the plugin, it should be quite straightforward. But why would you want to do that?
    – Pekka
    Commented Jan 12, 2010 at 21:06
  • 6
    One reason for not wanting style attributes on your images is with responsive designs, they don't scale with the design, and to overcome this problem, you have to add !important rules to your stylesheet which isn't idea.
    – Tyssen
    Commented Feb 7, 2012 at 0:04
1

When you save your form, do this

var CKEDITOR   = window.parent.CKEDITOR;   
        for ( var i in CKEDITOR.instances ){
           var currentInstance = i;
           break;
        }
        var oEditor = CKEDITOR.instances[currentInstance];
        oEditor.dataProcessor.htmlFilter.addRules({
            elements :{
                img : function( element ){
                    if(!element.attributes.width){
                        if(element.attributes.style){
                            var styling = element.attributes.style
                            var findwidth = new RegExp("\[width: \]\s*(((?!\[width: \]|\[px\]).)+)\s*\[px\]")
                            var sWidth = findwidth.exec(styling)
                            sWidth = sWidth[1]
                            if(sWidth) element.attributes.width = sWidth;
                        }
                        // var reg=/width: \s*([0-9]+)\s*px/i;
                        // var res=styling.match(reg);


                    }
                   if(!element.attributes.height){
                        if(element.attributes.style){
                            var styling = element.attributes.style
                            var findheight = new RegExp("\[height: \]\s*(((?!\[height: \]|\[px\]).)+)\s*\[px\]")
                            var sHeight = findheight.exec(styling)
                            sHeight = sHeight[1]
                            if(sHeight) element.attributes.width = sHeight;
                        }
                    }

                }

    }
1

Similar to Cedric Dugas' solution, there is a patch to a ticket for CKEditor here that helped me a lot solving this problem :

http://dev.ckeditor.com/attachment/ticket/5024/5024_6.patch

I used it but trimmed the code a little bit so that just images are processed by the filter. This solution works when the image gets inserted but also when it is resized with the handles in the editor.

Hope it helps

-1

For ckeditor version 4.1 you can use the following:

CKEDITOR.replace(textareaId,{
    allowedContent: true,
});

Be careful with this as it seems to remove all html validation.

1
  • 3
    This answer has nothing to do with the original question. Commented Jun 26, 2014 at 7:41

Not the answer you're looking for? Browse other questions tagged or ask your own question.