WBCE CMS – Way Better Content Editing.
Du bist nicht angemeldet.
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.
Code allein macht nicht glücklich. Jetzt spenden!
Offline
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
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
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
ronja
@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
ronja
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
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
ronja, meetje
Das Feature ist seit der Version 4.5.11 im CKE vorhanden.
Offline
Herzlichen Dank colinax!
Offline
colinax
Vielen Dank
Rock 'n' Roll - WBCE
Offline
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
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
Danke, das war's.
(Ich wolte nur helfen, sorry )
Offline
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
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
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
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
foxlake
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
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
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
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
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
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
@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
bodo
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
florian, meetje, colinax