CODEWITHSUNDEEP
javascriptckeditortext-editor
Lovelock
Lovelock

Reputation: 8105

CKEditor - Only allow image to be 100% width when previewing

When using CKEditor and inserting an image in the editor, the image is displayed at its real size.

So if my CKeditor is 500px wide, and the image is 800, the image is displayed at 800 wide and therefor there is a scroll bar in the CKeditor.

Is there a way to make the inserted image only show in the editor as the width of the editor itself?

Thanks!

Upvotes: 3

Views: 3944

Answers (1)

Martin Alexándrovič
Martin Alexándrovič

Reputation: 91

There are two possible solutions to this:

A) change the image widget, that it generates an image tag with a specific class, eg. "imagePointer" and then, in the widget, add the responding css, like:

CKEDITOR.plugins.add( 'image', {
    onLoad: function( editor ) {
        CKEDITOR.addCss(
            '.imagePointer {max-width:100%;}')
    }
}

B) in the contents.css file simply add the rule for the image tag:

img {max-width:100%}

Upvotes: 1

Related Questions