Ckeditor - Prevent Adding Image Dimensions as a CSS Style

How to prevent CKEditor from adding inline height, width styles to img tags?

As the Disallowed Content documentation explains:

It is not possible to disallow content when the Advanced Content Filter is disabled by setting CKEDITOR.config.allowedContent to true.

If you want to proceed in this way ("allow everything, except inline width and height styles on images") check the How to Allow Everything Except... section.

However, a much better solution would be to just extend the automatic mode and disallow what you need as described in the Automatic mode but disallow certain tags/properties scenario.

CKEditor remove inline img style

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.

How to remove height setting for images in CKEditor 4

Please try below code:

var editor = CKEDITOR.replace( 'editor1', {
    disableObjectResizing : true
});
CKEDITOR.on( 'dialogDefinition', function( ev ) {
    var dialogName = ev.data.name;
    var dialogDefinition = ev.data.definition;
    var  editorO = ev.data.definition.dialog.getParentEditor();

    if ( dialogName == 'image' || dialogName == 'image2' ) {
        var infoTab = dialogDefinition.getContents( 'info' );

        if( dialogName == 'image' ){
            infoTab.remove('txtHeight');
            infoTab.remove('ratioLock');
        }
        else{
            infoTab.remove('height');
            infoTab.remove('lock');
        }
    }
});

You need to look for id's in dialog files:

https://github.com/ckeditor/ckeditor-dev/blob/major/plugins/image/dialogs/image.js#L694
https://github.com/ckeditor/ckeditor-dev/blob/major/plugins/image2/dialogs/image2.js#L478

Remove image height and width in CKeditor's image dialog

If you adjust the CKEditor settings so it uses attributes instead of inline styles for the images you won't have this problem, the image will show correctly all the time.

CKEditor image width and height as HTML attribute in stead of inline styling

Please see: https://docs.ckeditor.com/ckeditor4/docs/#!/guide/dev_acf-section-example%3A-disallow-inline-styles-and-use-attributes-instead. This link describes exactly what you are looking for.

Please note that for this to work Advanced Content Filter (ACF) needs to be enabled. If you are not familiar with it, please see:

http://docs.ckeditor.com/#!/guide/dev_acf
http://docs.ckeditor.com/#!/guide/dev_advanced_content_filter
http://docs.ckeditor.com/#!/guide/dev_disallowed_content
http://docs.ckeditor.com/#!/api/CKEDITOR.filter-method-addTransformations
http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-allowedContent
http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-extraAllowedContent

How to disable automatic style to img in ckeditor?

You could write a rule for your config that would remove the style tag on elements.

  var editorRulesObject = {
    elements: {
      img: function( el ) {
        if(el.attributes.style) {
          el.attributes.style = '';
        }
      }
    }
  };

  CKEDITOR.on('instanceReady', function( e ) {
    // Ensures that any non-styled text, or text input without any tags will be correctly styled.
    CKEDITOR.instances[e.editor.name].dataProcessor.dataFilter.addRules( editorRulesObject );
    CKEDITOR.instances[e.editor.name].dataProcessor.htmlFilter.addRules( editorRulesObject );
  });