Saving Page With Added Media File Attachment Strips Inline CSS from the Img Tag

kentico guy asked on October 2, 2020 23:09

I just noticed an issue in Kentico 12.0.15 where saving a generic single column page (or any other page afaik) causes an embedded <img> tag to lose its inline css. If I click on "source" in the page, I don't see any CSS in the img tag:

<img alt="" src="/getattachment/Testing/Test-Graphic-Save/WFHCat-(1).gif.aspx?lang=en-US">

However, if I inspect the page in firefox, I see this code, with the inline CSS (before I click save):

<img src="/getattachment/Testing/Test-Graphic-Save/WFHCat-(1).gif.aspx?lang=en-US" data-cke-saved-src="/getattachment/Testing/Test-Graphic-Save/WFHCat-(1).gif.aspx?lang=en-US" alt="" style="float: left; margin: 5px 10px;">

Is this supposed to be in the source of the page before I click save? If not, what might cause this issue?

What are some things that I should check? I assume the save action is controlled by an out of the box kentico assembly, so I'm about to run the app in local debug and see if I can find any exceptions. I'm just looking for background info, if anyone has any. Thanks!

Correct Answer

Brenden Kehren answered on October 4, 2020 17:13

The WYSIWYG editors is validating the css and "fixing" it for you. Check out the Kentico docs on how to configure it.

1 votesVote for this answer Unmark Correct answer

Recent Answers


Juraj Ondrus answered on October 5, 2020 06:11

Just a side note - I noticed in the attachment URL the extension is wrong: /WFHCat-(1).gif.aspx
This indicat5es that the Files friendly URL extension (not extensionS) setting is not set correctly in Settings -> URLs and SEO section. This setting accepts only one extension - the default .aspx or, if you want to support any file extension, leave this setting blank to avoid future issues.

0 votesVote for this answer Mark as a Correct answer

kentico guy answered on October 5, 2020 17:47 (last edited on October 5, 2020 18:33)

@Brendan Kehran I tried commenting out this code

EDIT: commenting out the below code DID work. The problem was that I hadn't cleared out my browser cache. If you have this issue in the future try comment out this code contained in CMS\CMSAdminControls\CKeditor\config.js

CKEDITOR.on('instanceReady', function (ev) {
ev.editor.dataProcessor.htmlFilter.addRules(
    {
        elements:
        {
            $: function (element) {
                // check for the tag name
                if (element.name === 'img') {
                    var style = element.attributes.style;

                    // remove style tag if it exists
                    if (style) {
                        delete element.attributes.style;
                    }
                }

                // return element without style attribute
                return element;
            }
        }
    });}); 

and it's still stripping out any inline css. How can I disable this feature and allow inline styles to be saved?

Also, the business does not use the inline styles; they add the styling by right clicking on the image and going to properties. Even when the styles are added in that way, the styling is not saving when "save" is clicked.

@Juraj Ondrus I removed the aspx from default attachment type in settings and I'm still having this issue

0 votesVote for this answer Mark as a Correct answer

Brenden Kehren answered on October 5, 2020 17:49

You need to clear your browser cache and such for that to take effect. The UI is pretty well cached and causes problems if you make changes without clearing your cache.

0 votesVote for this answer Mark as a Correct answer

kentico guy answered on October 5, 2020 17:58 (last edited on October 13, 2020 13:46)

@Brenden Kehren Eyyyyyy!!!! I think that worked! Thanks so much!

0 votesVote for this answer Mark as a Correct answer

   Please, sign in to be able to submit a new answer.