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

RadEditor not picking up styles from external stylesheet

2 Answers 173 Views
Editor
This is a migrated thread and some comments may be shown as answers.
Dale Palmer
Top achievements
Rank 1
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">  
          
        <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 Answers, 1 is accepted

Sort by
0
Dale Palmer
Top achievements
Rank 1
answered on 19 Nov 2008, 11:15 AM
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()));
0
Kevin Babcock
Top achievements
Rank 1
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
Tags
Editor
Asked by
Dale Palmer
Top achievements
Rank 1
Answers by
Dale Palmer
Top achievements
Rank 1
Kevin Babcock
Top achievements
Rank 1
Share this question
or