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

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]'; 

Answer 2

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;             }         }     }); });