WBCE CMS Forum

WBCE CMS – Way Better Content Editing.

Du bist nicht angemeldet.

#1 26.09.2016 13:47:07

florian
Administrator

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

Der CKEditor ergänzt standardmäßig die nativen Abmessungen eines eingefügten Bildes als Inline-Style, also so:

<img alt="" src="domain.tld/media/topics-pictures/1.jpg" style="width: 200px; height: 150px;" />

Das unterlässt er zwar, wenn man von Hand im Bild-Einfügen-Dialog die automatisch eingefügten Werte bei Breite und Höhe rauslöscht, aber auf Dauer ist das natürlich nervig, und wer denkt schon immer daran. Insbesondere Redakteure zerstören so ungewollt responsive Designs, bei denen sich die Bildgrößen z.B. nach dem zur Verfügung stehenden Platz richten.

Um dem CKE dieses Verhalten dauerhaft abzugewöhnen, genügt es, in der wb_ckconfig.js des verwendeten Templates ganz am Schluss (also nach dem schließenden }); des Blocks darüber) folgenden Code einzufügen:

CKEDITOR.on('instanceReady', function (ev) {
ev.editor.dataProcessor.htmlFilter.addRules(
    {
        elements:
        {
            $: function (element) {
                // Remove width and height style rules from images
                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, '');
                        }

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

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

                return element;
            }
        }
    });
});	

Schon werden Größenangaben _immer_ rausgekantet. Redakteure kommen so auch nicht mehr in die Versuchung, 3000x4000 Pixel große Bilder von Hand auf 300x400 runterzuskalieren.

(Quelle)


Code allein macht nicht glücklich. Jetzt spenden!

Offline

#2 30.03.2017 20:57:15

ronja
Mitglied

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

Hallo,

mir ist heute bei der Verwendung folgendes aufgefallen.
Ich füge ein Bild ein, möchte dies nicht in der Originalgröße ausgeben, editiere die Größe, hinterlege den Link zum original großem Bild (colorbox style).
Sobald ich mir den Quelltext ansehe bzw. auch beim Speichern verschwindet die editierte Größe des Bildes komplett.
Wenn ich den Editor umstelle funktioniert es einwandfrei.

LG Ronja

Offline

#3 31.03.2017 10:04:51

ronja
Mitglied

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

Sorry für Doppelpost, aber ich glaube mein Beitrag ist etwas unter gegangen ...
Kann mir bitte jemand damit helfen? Dankeschön!
_________________________________________


Hallo,

mir ist heute bei der Verwendung des Editors folgendes aufgefallen.
Ich füge ein Bild ein, möchte dies nicht in der Originalgröße ausgeben, editiere die Größe, hinterlege den Link zum original großem Bild (colorbox style).
Sobald ich mir den Quelltext ansehe bzw. auch beim Speichern verschwindet die editierte Größe des Bildes komplett.
Wenn ich den Editor umstelle funktioniert es einwandfrei.

LG Ronja

Offline

#4 31.03.2017 10:09:43

colinax
Developer

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

ronja schrieb:

Sobald ich mir den Quelltext ansehe bzw. auch beim Speichern verschwindet die editierte Größe des Bildes komplett.

Hi Ronja, das ist so gewollt, also ein Feature und kein Bug.

Diese Änderung ist schon seit CKE 4.5.11 vorhanden.

Das Verhalten lässt ich aber deaktivieren, wenn es sein muss.


LG Colinax

Offline

Liked by:

ronja

#5 31.03.2017 10:20:43

florian
Administrator

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

@Ronja
...Etwas ausführlicher: Wenn - wie in den vorherigen Versionen - absolute Pixelwerte für die Größe der Bilder eingefügt werden, führt dies bei responsive Webdesign zu Problemen. Auch ist es hinsichtlich Ladezeiten/Datenvolumen sinnvoll, die Bilder physikalisch in der Größe, in der sie verwendet werden sollen, vorzuhalten, anstatt sie im Browser zu verkleinern.

Du kannst aber CSS-Styles anlegen, z.B.

.previewimage100 {
	max-width:100px;
	height:auto;
}

.previewimage200 {
	max-width:200px;
	height:auto;
}

.previewimage300 {
	max-width:300px;
	height:auto;
}

und diese im Stylesheet Deines Templates sowie der editor.css des Templates hinterlegen.

De Bild weist Du dann die gewünschte Klasse zu, dann wird es verkleinert dargestellt.


Code allein macht nicht glücklich. Jetzt spenden!

Offline

Liked by:

ronja

#6 31.03.2017 10:32:01

ronja
Mitglied

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

Hallo Ihr zwei, danke.
Ich selbst würde das ja auch nie so machen, aber die Kunden möchten halt Ihre Bilder selber einpflegen und haben nur eine Bildgröße, die erst klein, dann mit colorbox vergrößert dargestellt werden kann. An dem Web ist leider nichts responsive und derzeit auch noch nicht erwünscht.

Ich würde das Verhalten deshalb für diesen Kunden gern abschalten, wenn das möglich ist.

LG Ronja

Offline

#7 31.03.2017 10:40:00

colinax
Developer

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

Um das Verhalten zu deaktivieren, gehe über FTP in das Verzeichnis module/ckeditor/ckeditor/ da gibt es eine Datei namens config.js öffne diese und suche nach folgenden Code und lösche diesen einfach:

CKEDITOR.on('instanceReady', function (ev) {
ev.editor.dataProcessor.htmlFilter.addRules( {
        elements: {
            $: function (element) {
                // Remove width and height style rules from images
                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, ''); }
                        if (height) { element.attributes.style = element.attributes.style.replace(/(?:^|\s)height\s*:\s*(\d+)px;?/i, ''); }
                    }
                }
                if (!element.attributes.style)
                    delete element.attributes.style;
                return element;
            }
        }
    });
});	

Wenn du die Developer Edition verwendest gibt es neben  module/ckeditor_dev/ckeditor/ noch eine zweite Datei unter module/ckeditor_dev/wb_config/ namens wb_config.js wo ebenfalls der oben stehende Code gelöscht werden muss.

Beitrag geändert von colinax (31.03.2017 10:41:39)

Offline

Liked by:

ronja, meetje

#8 31.03.2017 12:23:59

colinax
Developer

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

Das Feature ist seit der Version 4.5.11 im CKE vorhanden.

Offline

#9 31.03.2017 20:07:02

ronja
Mitglied

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

Herzlichen Dank colinax!

Offline

Liked by:

colinax

#10 17.05.2017 12:57:03

andy2k
Mitglied

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

Vielen Dank smile


Rock 'n' Roll - WBCE

Offline

#11 13.06.2017 12:04:10

meetje
Mitglied

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

This doesn't work in Chrome / Vivaldi
Herzlichen Dank,  in Chrome oder Vivaldi geht's nicht.

Jemand eine Lösung? Responsive geht so kaum. Ich weiss vom CSS aber das ist zu rigide. In WebsiteBaker  gehts schon.

You are not allowed to post links yet. Please post without links, an administrator will enable this function for you. This is just to avoid spam postings

Offline

#12 13.06.2017 12:32:06

florian
Administrator

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

Hast Du den Cache geleert? Chrome lädt sonst weiterhin die JavaScript-Dateien mit dem eigentlich gelöschten Code.

Du kannst jetzt auch Links setzen, aber ob und was bei WebsiteBaker funktioniert, ist hier irrelevant.

Beitrag geändert von florian (13.06.2017 12:32:26)


Code allein macht nicht glücklich. Jetzt spenden!

Offline

#13 13.06.2017 12:51:27

meetje
Mitglied

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

Danke, das war's.
(Ich wolte nur helfen, sorry  ops )

Offline

#14 13.06.2017 14:43:51

florian
Administrator

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

Kein Ding. Das war nicht so böse gemeint, wie es klang bzw. sich las.

Irgendwie ist dieses Thema ein Dauerbrenner. Ist es perspektivisch denkbar, das irgendwie anders und auch updatesicher zu lösen? Eventuell über eine zusätzliche Auswahl bei den Grundeinstellungen? Da wird ja immer noch die komplett sinnfreie WYSIWYG-Stil-Einstellung mitgeschleift, das könnte doch evtl. durch eine Auswahl CKEDitor-Bildgrößen-Option ersetzt werden? (Ja, ich weiß, das ist inkonsistent, falls es mal andere WYSIWYG-Editoren als Module geben sollte)


Code allein macht nicht glücklich. Jetzt spenden!

Offline

#15 02.08.2017 20:02:20

foxlake
Mitglied

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

Hello Colinax,

Do you have a method (code) to do the following with the configJS  from ckeditor ?

- Remove only the height
- Leave the 'locker' open / empty
- Leave the width

That will be nice,   the  AUTO  in the responsive template will keep the width/height relation
So with only the width as setting in the 'html' insert we can resize images when we want. (on a big screen / sometimes needed)

Thank you in advance.
Greetings, Niek

Offline

#16 04.08.2017 12:29:54

colinax
Developer

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

Hello Niek,
If I have understood you correctly, is what you want so not possible.

The reason why we remove the height and width from the images is that we want to have responsive images so that they work properly in responsive templates. Without this code, the embedded via the editor pictures are not responsive

For me it sounds as if your template is not responsive or has problems with the adaptability.


Can you tell me your website so I can look at it?

LG Colinax

Offline

#17 16.09.2017 08:57:10

maier-tech
Mitglied

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

Hallo zusammen,

warum ist das gewollt, dass man ein Bild nicht skalieren kann. Das macht manchmal durchaus Sinn, ein Bild nicjt in der Originalgröße anzuzeigen. Und wenn das im Frontend schon möglich ist, dann sollte man das nicht einfach über irgendein Skript verschwinden lassen.

Viele Grüße,

Klaus

Offline

Liked by:

foxlake

#18 16.09.2017 09:29:17

florian
Administrator

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

Hallo Klaus,

bitte lies Dir diesen Thread durch, dort findest Du sowohl Antworten auf Deine Frage als auch Hinweise, wie Du das vorherige Verhalten wieder herstellen kannst.


Code allein macht nicht glücklich. Jetzt spenden!

Offline

#19 11.03.2019 17:35:33

bodo
Mitglied

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

Hallo, muss nochmal dieses alte Thema aufgreifen, da es bei mir nicht geht. Weder mit dem Löschen der Einträge in der config, noch mit Einträgen über die css. Ich greife jedesmal auf den alten FCK Editor zurück um die Bilder anzupassen. Jetzt in der neuesten Version WBCE 1.3.3 und PHP 7.2 haut das nicht mehr hin. Es kommt die Fehlermeldung: The server didn't reply with a proper XML data. Please check your configuration.

Ich habe die aktuelle Version des CKEditor Standard und CKEditor-Developer. Ich verstehe es ohnehin nicht, warum das jetzt so geregelt ist. Für das responsive Design regel ich die Größe grundsätzlich über CSS.

Hoffe auf Hilfe, denn so wie es jetzt ist, müssen die Bilder vorher auf die jeweilige Größe gebracht werden und da sind die meisten Redakteure überfordert. Responsive muß automatisiert gehen und in der Desktopansicht über den Editor einstellbar sein.

Vielen Dank vorab
LG
Bodo

Offline

#20 11.03.2019 17:41:05

florian
Administrator

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

Was genau geht jetzt nicht und was möchtest Du erreichen (was ist das gewünschte Verhalten)? Ich verstehe Deinen Post noch nicht so richtig.


Code allein macht nicht glücklich. Jetzt spenden!

Offline

#21 11.03.2019 17:43:42

colinax
Developer

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

Nur damit ich es verstehe wo/in welchem Editor geht was nicht ?

Wenn bei dir die Template CSS die Bilder regelt warum willst du dann im CKE die Bildergröße regeln, weise den Bildern wie gewöhnt die entsprechende CSS Klasse zu und es passt.

Und wie immer mein Standardsatz: Der CKEditor ist ein TEXT-Editor, die Darstellung im BE hat nichts mit der Darstellung auf der Webseite zu tun.

Offline

#22 11.03.2019 18:17:03

bodo
Mitglied

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

Ich habe jetzt aktuell den CKEditor-Developer. Ich benutze z.B. die Vorlage IMAGE FLOATING TITLE aus dem Editor. Ich möchte nun das jeweilige Bild in der Größe nachträglich anpassen. Sagen wir mal original liegt das Bild in einer Breite von 600px vor. Es müßte aber 450px sein, damit Bild mit Text harmonisch aussieht. Ich könnte jetzt das Bild offline auf die Größe bringen und dann wieder hochladen. Bisher habe ich mit dem  FCKEditor gearbeitet und dawurde die Größe übernommen. Warum das jetzt nicht mehr geht hatte ich geschrieben.

Wenn ich jetzt das Ganze mit dem CKEditor-Developer mache, wird die Größe zunächst übernommen aber nicht gespeichert. Das was hier im Forum dazu steht habe ich alles schon durchgeführt, es geht kein speichern.

Ich hoffe, dass ich es verständlicher gemacht habe.

LG
Bodo

Offline

#23 11.03.2019 18:33:31

meetje
Mitglied

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

Für mich läuft der reguläre CKeckeditor in WBCE 1.3.3 mit PHP 7.2.15 gut. Natürlich mit der Modifikation wie im Beitrag vom 31-03-17 10.40.00 beschrieben. Vielleicht hilft das ein wenig?
Hans

Offline

#24 11.03.2019 18:33:53

florian
Administrator

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

@bodo
Hast Du das beachtet

Wenn du die Developer Edition verwendest gibt es neben  module/ckeditor_dev/ckeditor/ noch eine zweite Datei unter module/ckeditor_dev/wb_config/ namens wb_config.js wo ebenfalls der oben stehende Code gelöscht werden muss.

und das

Hast Du den Cache geleert? Chrome lädt sonst weiterhin die JavaScript-Dateien mit dem eigentlich gelöschten Code.

(Gilt natürlich auch für Firefox, IE usw)

Beitrag geändert von florian (11.03.2019 18:34:08)


Code allein macht nicht glücklich. Jetzt spenden!

Offline

Liked by:

bodo

#25 11.03.2019 19:06:44

bodo
Mitglied

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

Ja, habe ich gelöscht. Bei Firefox und Chrome. Nichts passiert. Habe jetzt den Rechner neu gestartet und da auf einmal geht es bei beiden Browsern. Ich danke Euch für Eure Hilfe. Jetzt alles prima. Fazit, manchmal reicht Browser Cache leeren allein nicht aus.

Danke.
LG Bodo

Offline

Liked by:

florian, meetje, colinax

Fußzeile des Forums

up