WBCE CMS Forum

losttrip

Member

CKEditor - Developer Edition - Image size in pixels so not responsive

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)

florian

Administrator

Re: CKEditor - Developer Edition - Image size in pixels so not responsive

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.

losttrip

Member

Re: CKEditor - Developer Edition - Image size in pixels so not responsive

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)