WBCE CMS Forum

florian

Administrator

Re: [Erledigt] CKEditor Bilder 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?

---

Code allein macht nicht glücklich. Jetzt spenden!

colinax

Developer

Re: [Erledigt] CKEditor Bilder ohne Bildgrößen in den Styles

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.

bodo

Mitglied

Re: [Erledigt] CKEditor Bilder ohne Bildgrößen in den Styles

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

losttrip

Mitglied

Re: [Erledigt] CKEditor Bilder ohne Bildgrößen in den Styles

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?

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!

florian

Administrator

Re: [Erledigt] CKEditor Bilder 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.

---

Code allein macht nicht glücklich. Jetzt spenden!

colinax

Developer

Re: [Erledigt] CKEditor Bilder ohne Bildgrößen in den Styles

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.

Beitrag geändert von colinax (12.05.2019 23:58:54)