How can I disable image resizing in CKEditor?

Question

Our site is responsive and when editors use the resizing handles after uploading an image into the editor, it puts in fixed width and height on the image. We don't want them resizing images at all, due to the responsive nature of the site. Is there a way to disable image resizing in the editor?

If I can write a simple Drupal custom module to get the job done, that would be preferable. I can't seem to find any clear instructions on modifying the CKEditor's configuration dynamically in Drupal, though.

Answer 1

According to How to disable the image resize handles ? this is supposedly solved with CKEDITOR.config.disableObjectResizing = true;.

But even when I change it directly (for testing purposes) in /core/assets/vendor/ckeditor/ckeditor.js

CKEDITOR.config.disableObjectResizing=!1 to

CKEDITOR.config.disableObjectResizing=!0
// OR
CKEDITOR.config.disableObjectResizing=1
// OR
CKEDITOR.config.disableObjectResizing=true

It doesn't make a difference, I can still resize.

---

So I guess you will have to solve this via CSS.

If you want them to still be responsive, you could do:

.some-div img { max-width: 100% !important; } 

OR

.some-div img { max-width: 400px !important; } 

Obviously, this would mean the size in the editor may not reflect the size on the page, but this will do at least in the meantime if you're not satisfied with this answer/approach.