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

Editor Apply Css Style dropdown being populated with editor skin styles.

10 Answers 274 Views

Editor

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

Nathan asked on 10 Feb 2009, 09:50 PM

I am using the editor in a radwindow that opens a page that has a Theme applied to it. When the editor loads, it loads the styles in the css files of the theme as well as the css styles in the webresource used to in the radEditor skin. This is not desired.

How can I make it so that it ONLY loads styles of style sheets that I specify? I have already tried putting the style sheets I want in the toolsfile, doing it programmatically, and putting it in the aspx file. All of those methods successfully add the styles fromt he stylesheets that I specify, but they do not override the other styles that the editor is adding.

Note: I noticed that the same issue exists on your demo page when you go to First Look > Default settings and switch tools file from "Default" to "Full set of Tools". You can see that it adds the styles from the page into the dropdown list.

Edit: I have discovered that since I am using the editor in a multipage and one of those pages has rad calendars on it, the editor is picking up THOSE styles and not the styles in the WebResources (which I noticed that the javascript weeds out). So, How do I make the rad calendar not render its styles on the page? The editor still picks up the styles in the theme though, so I still need to know how to prevent that.

10 Answers, 1 is accepted

answered on 13 Feb 2009, 02:55 PM

Hi Nathan,

By default, RadEditor copies the styles from the parent page where it resides and populates the Apply CSS Class dropdown with these classes.

The solution for your scenario is to set the CssFiles property to point to an external css file and manually specify the classes that you want to load in the editor and its Apply Class dropdown. By setting the CssFiles property you will prevent the editor to pick up the styles from the parent page, e.g.

<telerik:RadEditor ID="RadEditor1" Runat="server">
   <CssFiles>
       <telerik:EditorCssFile Value="~/EditorContentArea.css" />
   </CssFiles>
</telerik:RadEditor>

Best regards,
Rumen
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

answered on 21 Jul 2009, 07:17 AM

Hi guys,
I've tried this technique to get rid of the table layout styles from appearing in the CSS style drop downs however the editor always applies all the table layout styles even though it is in a different file.
The configuration I'm using is shown below, the TableEditorStyles.css has all the table layouts in it however I don't want the editor to use the layout styles when building the CSS Style dropdown.
Is there anyway I can explicitly tell the editor not to use the TableEditorStyles from the layouts and just use the ones I'm defining as the css file to use?

<telerik:RadEditor ID="RadEditor1" EditModes="Design,Html" Runat="server" TableLayoutCssFile="~/_includes/TableEditorStyles.css" ContentAreaCssFile = "~/_includes/styleSheetEditor.css"
DocumentManager-SearchPatterns="*.doc,*.txt,*.docx,*.xls,*.xlsx,*.pdf,*.zip"
ImageManager-SearchPatterns="*.jpg,*.gif" NewLineBr="false" >
<ContextMenus>
<telerik:EditorContextMenu TagName="*">
<telerik:EditorTool name="Cut" />
<telerik:EditorTool name="Copy" />
<telerik:EditorTool name="Paste" />
<telerik:EditorTool name="PastePlainText" />
</telerik:EditorContextMenu>
<telerik:EditorContextMenu TagName="IMG">
<telerik:EditorTool Name="ImageManager" />
</telerik:EditorContextMenu>
</ContextMenus>
<CssFiles>
<telerik:EditorCssFile Value="~/_includes/styleSheetEditor.css" />
</CssFiles>
<Content>
</Content>
<Languages>
<telerik:SpellCheckerLanguage Code="en-US" Title="English" />
</Languages>
</telerik:RadEditor>

answered on 23 Jul 2009, 10:00 AM

Hi Malcolm,

You can restrict the classes loaded in the Apply Class dropdown using the CssClasses collection of RadEditor, e.g.

    
            <telerik:RadEditor ID="RadEditor1" runat="server" ...> 
        
            .... 
        
                   <CssClasses> 
        
                            <telerik:EditorCssClass Name="My Class" Value=".className" /> 
        
                   </CssClasses> 
        
            ... 
        
            </telerik:RadEditor>

You can find more information in this help article: Css Styles.

All the best,
Rumen
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

answered on 07 Aug 2009, 08:33 AM

Yes I have done so however I'm still getting the full styles for the pages style sheet instead of the one I've asked the editor to use.
By the definition below the Telerik editor should be using styleSheetEditor.css only and the paragraph dropdown should be using the ones I've defined below, however, it is not. The editor is picking up every style in existence.
I've tried

taking out cssfiles and only using the paragraphs and cssclasses definitioins, still picks up all styles on page
I've tried to clear all the cssfiles, paragraphs and cssclasses collections in code, still picks up all styles on page
I've tried declaring in code the cssfiles and clearing them before hand, still picks up all styles on the page in the apply class drop down.

I'm out of ideas.

<CssFiles>
    <telerik:EditorCssFile Value="~/_includes/styleSheetEditor.css" />
</CssFiles>
<Paragraphs>
    <telerik:EditorParagraph Title="Clear Formatting" Tag="body" />
    <telerik:EditorParagraph Title="<h1 style='font-family: Arial;color:#1e2961;font-size:1.2em;'>Heading 1</h1>" Tag="<h1>" />
    <telerik:EditorParagraph Title="<h2 style='font-size:1em;font-weight: 800;text-transform: none;color: #1e2961;'>Heading 2</h2>" Tag="<h2>" />
    <telerik:EditorParagraph Title="<h3 style='font-size:1em;font-weight: 800;text-transform: normal;color: #000;'>Heading 3</h3>" Tag="<h3>" />
    <telerik:EditorParagraph Title="<h4 style='font-size:1em;font-weight: 800;text-transform: normal;color: #000;'>Heading 4</h4>" Tag="<h4>" />
</Paragraphs>
<CssClasses>
<telerik:EditorCssClass Name="Clear Class" Value="" />
<telerik:EditorCssClass Name="Table Header" Value=".tableHeader" />
<telerik:EditorCssClass Name="Row Even" Value=".tableRowEven" />
<telerik:EditorCssClass Name="Row Odd" Value=".tableRowOdd" />
</CssClasses>

Please help.
Cheers
Mal

answered on 11 Aug 2009, 02:36 PM

Hi Mal,

I tried to reproduce the problem on my side with the specified Telerik.Web.UI.dll version but without success. Could you please isolate the problem in a sample working project that demonstrates the problem and send it for examination using the attachment functionality of the support ticketing system? This will help us to see the problem and find what is causing it. After that we will be able to provide a solution or fix.

Please, also download Q2 2009 and see whether the problem still persists.

Best regards,
Rumen
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

answered on 02 Jan 2010, 11:51 PM

Andy.... I was stuggling with this and then figured it out.

I didnt actually need any CSS styles to be avail for my users, so i just wanted those lists to be blank. So what I did was created a blank file and called it stylesEditor.css and then on my code behind I added the following to set the CSS for all the drop lists...

Me.content_editor.ToolsFile = "EditorToolbar.xml"
Me.content_editor.CssFiles.Add("stylesEditor.css")
Me.content_editor.ContentAreaCssFile = "stylesEditor.css"
Me.content_editor.TableLayoutCssFile = "stylesEditor.css"

One thing to notice is that I am also using a custom toolbar file. And it appears that you have to load that first before you set the CSS files. I think when you set the toolsfile property it will reset all the CSS, so those CSS file properties have to be set after.

Hope this helps!