This is a migrated thread and some comments may be shown as answers.

RadEditor not picking up styles from external stylesheet

2 Answers 252 Views

Editor

This is a migrated thread and some comments may be shown as answers.

Dale Palmer asked on 18 Nov 2008, 05:19 PM

I have a RadEditor in a customer user control, i'm sure i have all properties set correctly but can't seem to get the RadEditor to load up my styles. For some reason, it seems to load the parent page styles even with the EditorCssFile property set.

RadEditor User Control

    
            <%@ Control Language="C#" AutoEventWireup="true" CodeFile="RadEditor.ascx.cs" Inherits="Plugins.RadEditor" %> 
        
            <telerik:RadEditor  
        
                ID="txtContentEditor" 
        
                Runat="server" 
        
                ToolbarMode="Default" 
        
                ToolsFile="~/App_Data/RadEditor/EditorTools.xml" 
        
                Width="100%" 
        
                Height="400" 
        
                Skin="Default" 
        
                EnableEmbeddedScripts="true" 
        
                EnableEmbeddedBaseStylesheet="true" 
        
                EnableEmbeddedSkins="true" 
        
                NewLineBr="false" 
        
                ContentFilters="ConvertToXhtml">  
        
                <CssFiles> 
        
                    <telerik:EditorCssFile Value="/Skins/Plugins/EditorStyles.css" /> 
        
                </CssFiles> 
        
                <CssClasses> 
        
                    <telerik:EditorCssClass Name="header1" Value="h1" /> 
        
                </CssClasses> 
        
                <Paragraphs> 
        
                    <telerik:EditorParagraph Tag="<p>" Title="Normal" /> 
        
                    <telerik:EditorParagraph Tag="<p class='Title'>" Title="Title" /> 
        
                    <telerik:EditorParagraph Tag="<h1>" Title="Header 1" /> 
        
                    <telerik:EditorParagraph Tag="<h2>" Title="Header 2" /> 
        
                    <telerik:EditorParagraph Tag="<h3>" Title="Header 3" /> 
        
                    <telerik:EditorParagraph Tag="<h4>" Title="Header 4" /> 
        
                    <telerik:EditorParagraph Tag="<h5>" Title="Header 5" /> 
        
                </Paragraphs> 
        
                <ImageManager UploadPaths="~/Uploaded_Images/" ViewPaths="~/Uploaded_Images/" ImageEditorFileSuffix="*.gif,*.jpg,*.jpeg,*.png,*.img" SearchPatterns="*.gif,*.jpg,*.jpeg,*.png,*.img" MaxUploadFileSize="204800"  /> 
        
                <DocumentManager UploadPaths="~/Uploaded_Documents/" ViewPaths="~/Uploaded_Documents/" SearchPatterns="*.doc,*.txt,*.pdf,*.ppt,*.xls,*.rtf" MaxUploadFileSize="204800" /> 
        
            </telerik:RadEditor>

My Page with the user control attached.

    
            <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Content.aspx.cs" Inherits="EditorDialogs.Content" %> 
        
            <%@ Register TagPrefix="uc1" TagName="RadEditor" Src="~/Plugins/RadEditor.ascx" %><?xml version="1.0" encoding="utf-8"?>  
        
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
        
            <html xmlns="http://www.w3.org/1999/xhtml" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xml:lang="en">  
        
            <head> 
        
                <title>Content</title> 
        
                <link href="/Skins/Plugins/EditorDialogs.css" rel="stylesheet" type="text/css" /> 
        
            </head> 
        
            <body> 
        
                <form id="form1" runat="server">  
        
                <asp:ScriptManager runat="server" ID="defaultScriptManager" EnablePartialRendering="true" ScriptMode="Release">  
        
                    <CompositeScript ScriptMode="Release">  
        
                        <Scripts> 
        
                            <asp:ScriptReference Name="MicrosoftAjax.js" /> 
        
                            <asp:ScriptReference Name="MicrosoftAjaxWebForms.js" /> 
        
                        </Scripts> 
        
                    </CompositeScript> 
        
                </asp:ScriptManager> 
        
                <h1>Content Manager</h1> 
        
                <p>You are currently editing page <asp:Label runat="server" ID="lblPageTitle" CssClass="Blue" />.</p> 
        
                <telerik:RadAjaxPanel runat="server" ID="StaticPanelEditor" LoadingPanelID="LoadingPanel">  
        
                    <p runat="server" id="lblPageInfo" class="Success" visible="false" /> 
        
                    <syntasso:RadEditor runat="server" ID="txtContentEditor" /> 
        
                    <asp:Button runat="server" ID="btnPublish" CssClass="Button" Text="Publish" OnClick="btnPublish_OnClick" /> 
        
                </telerik:RadAjaxPanel> 
        
                </form> 
        
            </body> 
        
            </html>

EditorStyles.css

    
            html,body  
        
            {  
        
                font-family: Arial, Helvetica, Sans-Serif !important;  
        
            }  
        
            h1,h2,h3,h4,h5  
        
            {  
        
                font-family: Arial, Helvetica, Sans-Serif !important;  
        
                font-size: 21px !important;  
        
                font-weight: normal;  
        
                letter-spacing: 1px;  
        
                margin: 0 0 10px 0;  
        
                color: #00927b !important;  
        
            }  
        
            p  
        
            {  
        
                font-size: 14px;  
        
                color: #383a3a;  
        
                margin: 50px 0 !important;  
        
            }  
        
            p.Title  
        
            {  
        
                font-size: 14px;  
        
                font-weight: bold;  
        
                color: #e2007a;  
        
            }  
        
            ul {  
        
                font-size: 14px;  
        
                color: #383a3a;  
        
                letter-spacing: 0em;  
        
                text-indent: 25px;  
        
                margin-top: 8px;  
        
                margin-bottom: 5px;  
        
            }

2 Answers, 1 is accepted

answered on 20 Nov 2008, 05:51 AM

Hi Dale,

It is a good thing for the browser to store the CSS files in the cache. They are designed this way because CSS rarely changes, and so by caching those files the browser saves a round trip to the server to retrieve them with each request. By appending a query string to your CSS file with a timestamp on it you are essentially requiring that the CSS file be downloaded with each request, which will require an extra trip to the server every time, slowing your application.

If you simply want to clear out your cache so that the updated css file can be downloaded, you can hit CTRL-F5 in your browser. This will cause the browser to clear its cache and reload the page (and subsequently re-request all cached items, such as JavaScript and CSS files).

I hope this helps.

Regards,
Kevin Babcock