CODEWITHSUNDEEP
jqueryckeditor
Chris Mann
Chris Mann

Reputation: 77

CKEditor - Image Too Wide for Editor Box

I've managed to configure CKEditor and CKFinder to work together in an in-house CMS and I'm coming to the closing stages.

One UI issue I'm having, however, concerns images in the editor WYSIWYG box.

My editor box is roughly 1000px wide, but some images are 1400px wide. They are obviously too big for the editor box and bring in a horizontal scrollbar.

I don't want to set a width on the actual image as this will change the final HTML code, so what are my options for reducing the size of the image ONLY when it's displayed in the CKEditor window?

Upvotes: 1

Views: 1159

Answers (1)

Wizard
Wizard

Reputation: 3151

You can use CSS for this. CKEditor uses class cke_editable for the contents, so put the following line in config.js as the last line, after the definition of CKEDITOR.editorConfig

CKEDITOR.addCss('.cke_editable img { max-width: 100% !important; height: auto !important; }');

Upvotes: 3

Related Questions