WBCE CMS – Way Better Content Editing.
Du bist nicht angemeldet.
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!
Offline
meetje, bodo
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?
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
Hallo, ich habe Florians Lösung getestet und klappt prima
Offline
florian
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!
Online
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!
Offline
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?
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)
Offline
florian, meetje