CODEWITHSUNDEEP
htmlcssresponsive-designckeditorwysiwyg
Marco Prins
Marco Prins

Reputation: 7419

CK editor disable width & height

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

Upvotes: 4

Views: 4051

Answers (2)

Gus
Gus

Reputation: 16017

CKEditor 4.5 now has a image_prefillDimensions config, which can be set to false to disable this auto-filling feature. See: http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-image_prefillDimensions

Upvotes: 3

Jamie Barker
Jamie Barker

Reputation: 8246

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

Upvotes: 5

Related Questions