WBCE CMS Forum

WBCE CMS – Way Better Content Editing.

You are not logged in.

#26 20.04.2019 15:23:05

florian
Administrator

Re: Tipp: CKEditor Bilder responsiv (ohne Bildgrößen in den Styles)

Es gibt endlich die alle zufrieden stellende Lösung:
https://stackoverflow.com/questions/205 … -css-style

CKEDITOR.on('instanceReady', function (ev) {
ev.editor.dataProcessor.htmlFilter.addRules(
    {
        elements:
        {
            $: function (element) {
                // Output dimensions of images as width and height
                if (element.name == 'img') {
                    var style = element.attributes.style;

                    if (style) {
                        // Get the width from the style.
                        var match = /(?:^|\s)width\s*:\s*(\d+)px/i.exec(style),
                            width = match && match[1];

                        // Get the height from the style.
                        match = /(?:^|\s)height\s*:\s*(\d+)px/i.exec(style);
                        var height = match && match[1];

                        if (width) {
                            element.attributes.style = element.attributes.style.replace(/(?:^|\s)width\s*:\s*(\d+)px;?/i, '');
                            element.attributes.width = width;
                        }

                        if (height) {
                            element.attributes.style = element.attributes.style.replace(/(?:^|\s)height\s*:\s*(\d+)px;?/i, '');
                            element.attributes.height = height;
                        }
                    }
                }



                if (!element.attributes.style)
                    delete element.attributes.style;

                return element;
            }
        }
    });
});

Kann das bitte den bisherigen Code in der ckeditor/config.js ersetzen?

Offline

Liked by:

meetje, bodo

#27 20.04.2019 16:13:48

colinax
Administrator

Re: Tipp: CKEditor Bilder responsiv (ohne Bildgrößen in den Styles)

florian wrote:

Es gibt endlich die alle zufrieden stellende Lösung:
https://stackoverflow.com/questions/205 … -css-style

Kann das bitte den bisherigen Code in der ckeditor/config.js ersetzen?

Mal schauen wie es sich verhält, ist ja zum aktuellen Code nur eine kleine Änderung, primär bevorzuge ich aber die zwei Config-Settings, die Dasselbe machen.

Offline

#28 24.04.2019 11:05:05

bodo
Member

Re: Tipp: CKEditor Bilder responsiv (ohne Bildgrößen in den Styles)

Hallo, ich habe Florians Lösung getestet und klappt prima  thumb_up

Offline

Liked by:

florian

#29 02.05.2019 16:35:40

losttrip
Member

Re: Tipp: CKEditor Bilder responsiv (ohne Bildgrößen in den Styles)

florian wrote:

Es gibt endlich die alle zufrieden stellende Lösung:
https://stackoverflow.com/questions/205 … -css-styleKann das bitte den bisherigen Code in der ckeditor/config.js ersetzen?

I am interested.  Can you please explain what this change of code accomplishes?

colinax wrote:

Mal schauen wie es sich verhält, ist ja zum aktuellen Code nur eine kleine Änderung, primär bevorzuge ich aber die zwei Config-Settings, die Dasselbe machen.

I am also interested in knowing more about this "two config settings" solution and how it functions.

Thanks!

Offline

#30 02.05.2019 18:37:34

florian
Administrator

Re: Tipp: CKEditor Bilder responsiv (ohne Bildgrößen in den Styles)

With no configuration, CKE adds the width and height information of an image as style attributes:
<img src="example.png" style="height:400px; width:300px" alt="" />
So this usually breaks responsive designs, as the element style definitions overwrite element classes.
We therefor applied a change to the CKE which removes the width/style information. But by this, there was no possibility any longer to manually resize an image in the CKE, e.g. if you resized it by entering width and height in the image properties and/or pulled it with the mouse to the desired size, these information were discarded in the moment you clicked on the save button.
With the proposed solution, the unwanted style size definitions are replaced by the html width and height attributes:
<img src="example.png" height="400" width="300" alt="" />
This works properly in all browsers and does not break image rules defined in the CSS.

Offline

#31 12.05.2019 16:19:42

colinax
Administrator

Re: Tipp: CKEditor Bilder responsiv (ohne Bildgrößen in den Styles)

florian wrote:

Es gibt endlich die alle zufrieden stellende Lösung:
https://stackoverflow.com/questions/205 … -css-style

Kann das bitte den bisherigen Code in der ckeditor/config.js ersetzen?

In den gerade veröffentlichten WBCE CKEditor 4.11.4 Editionen, ist der Code drinnen.

Last edited by colinax (12.05.2019 22:58:54)

Offline

Liked by:

florian, meetje

Board footer

Powered by FluxBB

up