WBCE CMS – Way Better Content Editing.
You are not logged in.
I remembered this being discussed and addressed - https://forum.wbce.org/viewtopic.php?pid=24091#p24091
Not sure if something changed/reverted with the CKEditor module since that 4.11.14 version. I know I have a site running Developer Edition Version: 4.16.1 , and it outputs the responsive friendly code.
The site in question:
WBCE Version: 1.5.4
PHP Version: 8.0.27
CKEditor Developer Edition Version: 4.20.0
With Developer Edition CKEditor selected, an added image source code shows:
<img alt="" src="https://www.mysite.com/media/100_3625.jpg" style="width: 800px; height: 602px;" />
and since the image height and width are set in pixels on the element, the image is not responsive.
When I switch the editor in Settings to regular CKEditor, the same image source shows:
<img alt="" height="602" src="https://www.mysite.com/media/100_3625.jpg" width="800" />
Then if I switch the editor back to Dev Edition, the code reverts to:
<img alt="" src="https://www.mysite.com/media/100_3625.jpg" style="width: 800px; height: 602px;" />
I compared the CKEditor and CKEditor Dev Edition config.js files and they are the same. So, I can only assume there have been changes in other file(s).
Here is the Dev Edition config.js from my site:
/**
* @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
* For licensing, see https://ckeditor.com/legal/ckeditor-oss-license
*/
CKEDITOR.editorConfig = function( config ) {
/* Protect PHP code tags (<?...?>) so CKEditor will not break them when switching from Source to WYSIWYG.
* Uncommenting this line doesn't mean the user will not be able to type PHP code in the source.
* This kind of prevention must be done in the server side, so just leave this line as is. */
config.protectedSource.push(/<\?[\s\S]*?\?>/g); // PHP Code
//disable ckes Advanced Content Filter (ACF) to avoid wblinks to be filtered?
config.allowedContent = true;
// Simplify the dialog windows.
config.removeDialogTabs = 'image:Link';
// Only Microsoft Word content formatting will be preserved.
config.forcePasteAsPlainText = 'allow-word';
};
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;
}
}
});
});
Last edited by losttrip (03.02.2023 06:11:47)
Offline
Can't confirm. On a fresh install the CKE Dev behaves exactly like the CKE and the image tag is generated as wanted.
Probably there's a customized wb_ckconfig.js somewhere which misses the filter rules to fix the image tag.
Thee are some possibilities where to find that file. See CKE readme for details. https://github.com/WBCE/CKEditor
Last edited by florian (02.02.2023 08:48:53)
Sorgen sind wie Nudeln: man macht sich meist zu viele.
Offline
losttrip
You're absolutely correct. I missed adding the image tag filter rules to my adaptation of the developer edition (example) wb_ckconfig.js file.
Perhaps consideration could be made for adding that code to the wb_ckconfig.example file in the developer edition, for future user reference.
Last edited by losttrip (03.02.2023 06:09:26)
Offline
florian