radEditor.Content duplicates the content on Google Chrome when style @import url is used

Progress® Telerik® UI for ASP.NET AJAX Feedback Portal

Create an account Log In

Back to Feed

Request a Feature Report a Bug

Completed

Last Updated: 31 Jan 2022 09:55 by ADMIN

Release R1 2022 SP1

Bhaskar

Created on: 22 Nov 2019 00:44

Category: Editor

Type: Bug Report

radEditor.Content duplicates the content on Google Chrome when style @import url is used

On Google Chrome, the following assingment ends up displaying the body of the html twice within the editor:

radEditor.Content="<HTML><HEAD><STYLE>@import url(./CSS/CI.css);</STYLE></HEAD><BODY><H3>OUTPUT LAYOUT</H3><P>First Name:</P><P>Kerry</P></BODY></HTML>"

The resulting html becomes:
"<html><head><link href="/WebResource.axd?d=IgLlf5SIEZ-4m-Qr1qYVOGbMUL9-osMaMQXxs1c-ODIbmiiieGrgJ2ZuegoRNaCpJJ5zKojqJuk_FD7Cb69kb713UUGq1dCMsrFtihWFgnKkbYnlqQv7Lo2rUoUhmXHopZnTw7Cs3STs4GHdRuMnVHVdYHhRrcdV8Dgdv-U213Y1&t=637050242483188892" type="text/css" id="RADEDITORSTYLESHEET0" rel="stylesheet"></head><body><h3>OUTPUT LAYOUT</h3><p>First Name:</p><p>Kerry</p><h3>OUTPUT LAYOUT</h3><p>First Name:</p><p>Kerry</p></body></html>"

The issue is the "@import url(./CSS/CI.css);" within the Style tag, if the @import url, is removed, then it works as expected.

Works as expected on IE11.

If you add 2 <style> tags, the second one is displayed twice within the editor:

radEditor.Content = "<HTML><HEAD></HEAD><BODY><H3>OUTPUT LAYOUT</H3><P>First Name:</P><P>Kerry</P><style>@import url(\"./CSS/CI.css\");</style><style>@import url(\"./CSS/CI2.css\");</style></BODY></HTML>";

2 comments

ADMIN

Rumen

Posted on: 28 Jan 2022 16:58

I have good news that the problem will be resolved in the upcoming R1 2022 SP1 release.

Please use the code below to resolve the problem in the earlier versions:

        <script>
            Telerik.Web.UI.Editor.MozillaKeepStylesString.prototype.getDesignContent = function (content) {
                    //save link tags position (the ones that are not in the head)
                    var self = this;
                    var _saveElement = function (match, group1, group2, offset, string) {
                        var stringToLowerCase = string.toLowerCase();
                        var closingHeadIndex = stringToLowerCase.indexOf("</head>", offset);
                        if (closingHeadIndex != -1 && stringToLowerCase.indexOf("<body", closingHeadIndex) != -1) {
                            //seems to be in the head, ignore it
                            return match;
                        }
                        else {
                            self.markerCounter++;
                            var markerId = "RadEditorStyleKeeper" + self.markerCounter;
                            var newMatch = "<div id='" + markerId + "' style='display:none;'>&nbsp;</div><" + group1 + " reoriginalpositionmarker='" + markerId + "'" + group2;
                            return newMatch;
                        }
                    };
                    var cssRegExp = new RegExp("<(link|style)([^>]*>)", "gi");
                    var newContent = content.replace(cssRegExp, _saveElement);
                    return newContent;
                }
        </script>

        <telerik:RadEditor RenderMode="Lightweight" ID="RadEditor1" runat="server">
            <Modules>
                <telerik:EditorModule Visible="false" />
            </Modules>
            <Content>
           <HTML><HEAD><STYLE>@import url(./CSS/CI.css);</STYLE></HEAD><BODY><H3>OUTPUT LAYOUT</H3><P>First Name:</P><P>Kerry</P></BODY></HTML>
            </Content>
        </telerik:RadEditor>

On a side note, the problem does not happen when the head and body tags are lowercased.

ADMIN

Rumen

Posted on: 28 Nov 2019 10:40

Hi there,

Thank you for reporting both problems for the duplicated style and scripts tags! Your feedback is much appreciated and your Telerik points updated.

The temporary workarounds is to place the styles and script tags in the body tag and preferable before the closing body tag.

It is also good to place all the @imports in a single <style> tag.

Regards,
Rumen
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.