RadEditor not picking up styles from external stylesheet

3 posts, 0 answers
  1. Dale Palmer
    Dale Palmer avatar
    27 posts
    Member since:
    May 2008

    Posted 18 Nov 2008 Link to this post

    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">  
              
            <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-familyArialHelvetica, Sans-Serif !important;  
    }  
     
    h1,h2,h3,h4,h5  
    {  
        font-familyArialHelvetica, Sans-Serif !important;  
        font-size21px !important;  
        font-weightnormal;  
        letter-spacing1px;  
        margin: 0 0 10px 0;  
        color#00927b !important;  
    }  
     
    p  
    {  
        font-size14px;  
        color#383a3a;  
        margin50px 0 !important;  
    }  
     
    p.Title  
    {  
        font-size14px;  
        font-weightbold;  
        color#e2007a;  
    }  
     
    ul {  
        font-size14px;  
        color#383a3a;  
        letter-spacing: 0em;  
        text-indent25px;  
        margin-top8px;  
        margin-bottom5px;  
  2. Dale Palmer
    Dale Palmer avatar
    27 posts
    Member since:
    May 2008

    Posted 19 Nov 2008 Link to this post

    I fixed the problem. It was storing the css in the cache and calling it each time.

    I just used

    txtContentEditor.CssFiles.Add(new Telerik.Web.UI.EditorCssFile("~/Skins/Plugins/EditorStyles.css?t=" + DateTime.Now.Ticks.ToString()));
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Kevin Babcock
    Kevin Babcock avatar
    189 posts
    Member since:
    Mar 2007

    Posted 19 Nov 2008 Link to this post

    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
Back to Top