CK editor disable width & height

Question

I ran into an irritating feature of using ckeditor.

When you upload an image, in between your text content or wherever, ckeditor automatically fills in the width and height input fields as a default, which causes an html tag with width and height set in the style attribute:

<img alt="" src="/uploads/ckeditor/pictures/196/content_David_Leo006.jpg" style="width: 2000px; height: 669px;">

But if you delete the values in the input fields and then submit, the width and height is not set:

<img alt="" src="/uploads/ckeditor/pictures/196/content_David_Leo006.jpg">

Now like any normal, bright healthy web developer from the 21st century, I have a responsive design that takes care of these things, so I want the tags to always be generated like the latter. How can I hide and disable the input fields for width/height altogether?

CK editor's documentation is horribly chaotic

Answer 1

I did something similar with Tables. I didn't want the end user putting in silly values as we were forcing responsive styling and width.

Maybe this code will help you:

CKEDITOR.on( 'dialogDefinition', function( ev )
{
  var dialogName = ev.data.name;
  var dialogDefinition = ev.data.definition;


  if (dialogName == 'table') {

     // Get the advanced tab reference
     var infoTab2 = dialogDefinition.getContents('advanced');

     //Set the default

     // Remove the 'Advanced' tab completely
     dialogDefinition.removeContents('advanced');


     // Get the properties tab reference
     var infoTab = dialogDefinition.getContents('info');

     // Remove unnecessary bits from this tab
     infoTab.remove('txtBorder');
     infoTab.remove('cmbAlign');
     infoTab.remove('txtWidth');
     infoTab.remove('txtHeight');
     infoTab.remove('txtCellSpace');
     infoTab.remove('txtCellPad');
     infoTab.remove('txtCaption');
     infoTab.remove('txtSummary');
  }
});