Search code examples
ckeditor

CKEditor remove inline img style

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

Solution

  • 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.