Telerik Forums / UI for ASP.NET AJAX Forum / Editor /

CssFiles don't work when RadEditor inside RadWindow

Telerik UI for ASP.NET AJAX
Resources Buy Try

7 posts, 1 answers

Dean

73 posts

Member since:
Oct 2012

Posted 14 May 2012 Link to this post

I have the following RadEditor:

<telerik:RadEditor ID="RadEditor1" runat="server" EditModes="Design, Preview" Skin="Outlook" EnableResize="true">

    <CssFiles>

        <telerik:EditorCssFile Value="StyleSheet.css" />

    </CssFiles>

    <Content>

        Editor content 1

    </Content>

</telerik:RadEditor>

The css inside StyleSheet.css is applied to the content of the RadEditor as expected. However, when this RadEditor is placed inside a RadWindow the css doesn't work.

How can I get the css to work when the RadEditor is inside a RadWindow?
Rumen
Admin

14417 posts
Posted 17 May 2012 Link to this post

Hi,

I tried to reproduce the reported issue, but without success. For your convenience I have recorded a video demonstrating my test http://screencast.com/t/P3QcVzebxHzU and my project files.

Let me know if I am missing something.

All the best,
Rumen
the Telerik team

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.

CssFilesTest.zip
Dean

73 posts

Member since:
Oct 2012

Posted 17 May 2012 Link to this post

Ahh, thank you for that. Indeed there is something missing. The stylesheet in my example (I should have posted it's contents, sorry) has just this:

body { color: blue; }

So I was expecting the text in my RadEditor to be blue as soon as it loaded - before having to apply a style using the RadEditor's menu.

Let me know if this helps with reproducing the issue.

Cheers
Dean
Rumen
Admin

14417 posts

Posted 19 May 2012 Link to this post

Hi,

I set the body class and it was applied in the content area of RadEditor as shown in the following video: http://screencast.com/t/ZsMpDMYY. Am I missing something?

Greetings,
Rumen
the Telerik team

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Dean

73 posts

Member since:
Oct 2012

Posted 20 May 2012 Link to this post

Thanks Rumen. Moving my javascript from the <head></head> of the page to after the RadWindow fixes the issue. I don't really understand why this makes a difference - would you be able to provide an explanation?

My code that doesn't work:

<head runat="server">

    <title></title>

    <script type="text/javascript">

        function OnClientShow(sender, args) {

            // Fix the size problem in IE.

            var editorParent = $get('editorWrapper');

            editorParent.style.display = '';

            // Fixes the problem with the content area in FF and Safari

            //The content template is an INaming container, so the editor should be found by using FindControl

            var editor = $find('<%# RadWindow1.ContentContainer.FindControl("RadEditor1").ClientID %>');



            //Uncomment following line to get the fix working

            editor.onParentNodeChanged();



            var style = editor.get_contentArea().style;

            style.backgroundImage = "none";

            style.backgroundColor = "white";

        }

    </script>

</head>

<body>

    <form id="form1" runat="server">

     <telerik:RadScriptManager ID="RadScriptManager1" runat="server">

    </telerik:RadScriptManager>

    <div>

        <telerik:RadWindow ID="RadWindow1" runat="server" VisibleOnPageLoad="true" OnClientShow="OnClientShow">

            <ContentTemplate>



                        <div id="editorWrapper" style="padding:5px;display:none;">

                            <telerik:RadEditor ID="RadEditor1" runat="server" EditModes="Design, Preview" Skin="Outlook" EnableResize="true">

                                <CssFiles>

                                    <telerik:EditorCssFile Value="StyleSheet.css" />

                                </CssFiles>

                                <Content>

                                    Editor content 1

                                </Content>

                            </telerik:RadEditor>

                        </div>



            </ContentTemplate>

        </telerik:RadWindow>

    </div>

    </form>

</body>

</html>

Moving the javascript fixes the issue as you can see here:

<head runat="server">

    <title></title>

</head>

<body>

    <form id="form1" runat="server">

     <telerik:RadScriptManager ID="RadScriptManager1" runat="server">

    </telerik:RadScriptManager>

    <div>

        <telerik:RadWindow ID="RadWindow1" runat="server" VisibleOnPageLoad="true" OnClientShow="OnClientShow">

            <ContentTemplate>



                        <div id="editorWrapper" style="padding:5px;display:none;">

                            <telerik:RadEditor ID="RadEditor1" runat="server" EditModes="Design, Preview" Skin="Outlook" EnableResize="true">

                                <CssFiles>

                                    <telerik:EditorCssFile Value="StyleSheet.css" />

                                </CssFiles>

                                <Content>

                                    Editor content 1

                                </Content>

                            </telerik:RadEditor>

                        </div>



            </ContentTemplate>

        </telerik:RadWindow>

        <script type="text/javascript">

            function OnClientShow(sender, args) {

                // Fix the size problem in IE.

                var editorParent = $get('editorWrapper');

                editorParent.style.display = '';

                // Fixes the problem with the content area in FF and Safari

                //The content template is an INaming container, so the editor should be found by using FindControl

                var editor = $find('<%# RadWindow1.ContentContainer.FindControl("RadEditor1").ClientID %>');

                //Uncomment following line to get the fix working

                editor.onParentNodeChanged();

                var style = editor.get_contentArea().style;

                style.backgroundImage = "none";

                style.backgroundColor = "white";

            }

    </script>

    </div>

    </form>

</body>
Answer
Rumen
Admin

14417 posts

Posted 21 May 2012 Link to this post

Hello,

Thank you for the code sample.

The CssFiles does not work, because the onParentNodeChaged method recreated the iframe content area of RadEditor which overwrite the <link> tag pointing to the CSS file specified by the CssFile property. That is why it is recommended to programmatically set the content area styles, e.g.

var style = editor.get_contentArea().style;

style.backgroundImage = "none";

style.backgroundColor = "white";
style.color = "blue";

Kind regards,
Rumen
the Telerik team

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Dean

73 posts

Member since:
Oct 2012

Posted 21 May 2012 Link to this post

OK, so moving my JavaScript below the RadWindow merely stopped it from working - I can see with Firefox Firebug that the ClientID in the following snippet is blank which meant it couldn't find the editor and execute onParentNodeChanged.

$find('<%# RadWindow1.ContentContainer.FindControl("RadEditor1").ClientID %>');

Could this be looked at to be fixed in a future release so that the CssFiles are not lost when onParentNodeChanged is called? Because in practice the css files I need to use with the RadEditor are quite large and it's not practical to programmatically set all the style properties like you've demonstrated.

In the meantime I've come up with the following work around so that css file links are added after onParentNodeChanged is called. It could be further enhanced so that it gets the list of CssFiles from the RadEditor before calling onParentNodeChanged and then re-adds them afterwards. At the moment you have to manually add the list of css files yourself. I hope this helps someone:

<head runat="server">

    <title></title>

    <script src="http://code.jquery.com/jquery-1.7.2.min.js" type="text/javascript"></script>

    <script type="text/javascript">

        function OnClientShow(sender, args) {

            // Fix the size problem in IE.

            var editorParent = $get('editorWrapper');

            editorParent.style.display = '';

            // Fixes the problem with the content area in FF and Safari

            //The content template is an INaming container, so the editor should be found by using FindControl

            var editor = $find('<%# RadWindow1.ContentContainer.FindControl("RadEditor1").ClientID %>');

            //Uncomment following line to get the fix working

            editor.onParentNodeChanged();

            var style = editor.get_contentArea().style;

            style.backgroundImage = "none";

            style.backgroundColor = "white";

            //Add the css files after they've been removed by onParentNodeChanged

            $(editor.get_document()).ready(function () {

                setTimeout("AddCssFiles('" + editor.get_id() + "')", 1000);

            });

        }

        function AddCssFiles(editorId) {

            var editor = $find(editorId);



            var temphead = $(editor.get_document()).find('head');

            var head = temphead[0];

            var $head = temphead.eq(0);

            //remove other css files - get's rid of inherited css files

            $head.find('link').remove();

            var cssLink = document.createElement("link");

            cssLink.type = "text/css";

            cssLink.rel = "stylesheet";

            cssLink.href = "StyleSheet.css";

            head.appendChild(cssLink);

        }

    </script>

</head>

<body>

    <form id="form1" runat="server">

     <telerik:RadScriptManager ID="RadScriptManager1" runat="server">

    </telerik:RadScriptManager>

    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">

    </telerik:RadAjaxManager>

    <div>

        <telerik:RadWindow ID="RadWindow1" runat="server" VisibleOnPageLoad="true" OnClientShow="OnClientShow">

            <ContentTemplate>

                <div id="editorWrapper" style="display:none;">

                    <telerik:RadEditor ID="RadEditor1" runat="server" EditModes="Design, Preview" Skin="Outlook" EnableResize="true">

                        <CssFiles>

                            <telerik:EditorCssFile Value="StyleSheet.css" />

                        </CssFiles>

                        <Content>

                            Editor content 1

                        </Content>

                    </telerik:RadEditor>

                </div>

            </ContentTemplate>

        </telerik:RadWindow>

    </div>

    </form>

</body>

CssFiles don't work when RadEditor inside RadWindow

Dean

Rumen

Dean

Rumen

Dean

Rumen

Dean