CKEditor removes img inline style

Question

I use a responsive image method that sets a maximum width of 100% using CSS.

This does not work for any images added through CKEditor as the inline style is added.

In CSS, I added a style to override the width, which works, but height: auto does not, so the images are stretched.

I need to find a way to stop CKEditor from adding an inline style first.

I am using CKEditor 4.x

thanks

Answer 1

Starting with version 4.1, CKEditor offers the so-called Content Transformations and already defines some of them. If you restrict in config.allowedContent that you do not want to have width and height styles in <img> , then the editor will automatically convert the styles to attributes. For instance:

 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 output:

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

and, I believe, it completely solves your problem.

Answer 2

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

Using allowedContent requires creating a fairly large whitelist for all possible tags or attributes; where there is no disallowedContent ; letting you target styles to ignore.

This can be done like this:

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