CKEditor remove inline img style

4
votes

I am using a responsive image technique setting a max-width of 100% with CSS.

This isn't working for any images added through CKEditor, as an inline style is added.

In CSS I have added a style to override the width, which works, but height: auto doesn't, so the images is stretched.

I need to find a way to stop CKEditor from adding the inline style in the first place.

I am using CKEditor 4.x

Thank you

3
ckeditor

3 Answers

8
votes

Since version 4.1, CKEditor offers so called Content Transformations and already defines some of them. If you restrict in your config.allowedContent that you don't want to have width and height in <img> styles, then editor will automatically convert styles to attributes. For example:

CKEDITOR.replace( 'editor1', {
    allowedContent: 
        'img[!src,alt,width,height]{float};' + // Note no {width,height}
        'h1 h2 div'
} );

then:

<p><img alt="Saturn V carrying Apollo 11" class="left" src="assets/sample.jpg" style="height:250px; width:200px" /></p>

becomes in the output:

<p><img alt="Saturn V carrying Apollo 11" height="250" src="assets/sample.jpg" width="200" /></p>

and, as I guess, it completely solves your problem.

14
votes

A far better alternative to the accepted answer is to use disallowedContent (see docs), as opposed to allowedContent.

Using allowedContent requires you to create a rather large white-list for every possible tag or attribute; where as disallowedContent does not; allowing you to target the styles to ignore.

This can be done like so:

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

You can listen to instanceReady event and alter any element before saving, in your case the img tag

CKEDITOR.on('instanceReady', function (ev) {
    ev.editor.dataProcessor.htmlFilter.addRules(
    {
        elements:
        {
            $: function (element) {
                // check for the tag name
                if (element.name == 'img') {
                    var style = element.attributes.style;

                   // remove style tag if it exists
                    if (style) {
                        delete element.attributes.style;
                    }
                }

                // return element without style attribute
                return element;
            }
        }
    });
});