CssFiles don't work when RadEditor inside RadWindow

7 posts, 1 answers
  1. Dean
    Dean avatar
    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?
  2. Rumen
    Admin
    Rumen avatar
    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.
  3. Dean
    Dean avatar
    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
  4. Rumen
    Admin
    Rumen avatar
    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.
  5. Dean
    Dean avatar
    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>
  6. Answer
    Rumen
    Admin
    Rumen avatar
    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.
  7. Dean
    Dean avatar
    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>

Back to Top