How to add CSS File to the Editor, From C#

[slowrider]

How is it possible to use a custom CSS-File for the RadEditor Content if the RadEditor ist instantiated in a CS Class File and not as a aspx-Control?

We defined a RadControl Object and tried to add our CSS-File by "radEditor.CssFiles.Add(new EditorCssFile(cssUrl));" But it doesn't work tough. It seems that the Method "CssFiles.Add(EditorCssFile file)" doesn't work in the same way as adding a external CSS File trough a aspx Property.

 

this is the sourcecode:

 

 

public class ITeamTextEditor : RadEditor {

 

        public ITeamTextEditor(Page page, String text) {

            ...

            this.EditModes = Telerik.Web.UI.EditModes.Design ^ Telerik.Web.UI.EditModes.Html;

            this.Content = text;

            ...

////doesn't work??////

            String cssUrl = "/EditorContentArea.css";

            *****this.CssFiles.Add(new EditorCssFile(cssUrl));*****

            ...

        }

 

The CSS-File doesn't show up in the Head-Tag of the I-Frame of the RadEditor Content. We tried out your example with a RadEditor in a aspx file and it worked. But if you use the RadEditor inside C#-code, it doesn't.

Best Regards
Rinaldo

[Rumen]

Hi Rinaldo,

You can set the CssFiles property via the codebehind using the following syntax:

RadEditor1.CssFiles.Add("~/teams/04711/template/css/EditorContentArea.css");

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

Sincerely yours,
Rumen
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[slowrider]

Thank you Rumen
This was not the error, but we found the problem now.
We have discovered that ToolsFile must be set before setting the CssFiles. Otherwise it will cancel the CssFiles.
Thank you
Rinaldo

 

this.CssFiles.Add(new EditorCssFile("/teams/RadEditor.css"));

 

 

this.ToolsFile = "/RadEditorTools-Simple.xml";

 

this.ToolsFile = "/RadEditorTools-Simple.xml";

this.CssFiles.Add(new EditorCssFile("/teams/RadEditor.css"));

 

 

 

 

[Ozan Akiman]

Hi All,

We were having the same issue in a different context. Our solution needs RadEditors to be added dynamically to the page where we set css files for the editors in the code behind. No matter what, the editors were not making use of the external css files. After seeing this post by coincidence, our problem is also solved. If you are to set external css files in dynamically loaded editors, make sure to load the toolsfile before you add any external css files.

It would help others if a note explaining this behavior is added to the documentation.

Regards,
Ozan Akiman

[Rumen]

Thank you for your suggestions, guys!

I will add a note in the documentation about this requirement when setting the CssFiles property.


Kind regards,
Rumen
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Eliza Sahoo]

If your application targets different user-groups, you may feel the need to customize the layout of the page to display group-specific visual interface. This can be achieved by using customized CSS files that are added dynamically.    You can add CSS files in to ASP.NET webpages dynamically. Let me show you how.

Add following HTML tag in the ASP.NET (.aspx) page in the header section. <link id="CSSFile" type="text/css" rel="Stylesheet" runat="server" />  In the code behind page you can then add the CSS file as follows by accessing the link ID CSSFile.Attributes.Add("href", "Dynamic.css") (Dynamic.css is the CSS file that has been added to the page.) Eliza

[Tom Fallwell]

Interestingly enough, I was having the same problem described here. I am using RadEditor in my project and setting an external css file to force a white background for the content area. I was having problems where it was working on some pages, but not on others.

After seeing this thread, I realized I was adding a Tools file to the editor where the pages worked, and I had forgot to add the tools file for the pages that did not work. What is odd is that if I do not add a tools file at all, the external cssfile property does not work at all. This seems rather odd behaviour so I thought I would add this to the thread.

UPDATE: Well, it seems I was loading the CssFile before the ToolsFile. I went through my code for all pages and that was the case, so that confirms the original solution presented here. You must load the ToolsFile first or it will overwrite your adding the CssFile. Can Telerik explain why this happens and perhaps it should be noted in their documentation to save future headaches. :)

[Rumen]

Hi Tom,

This information is already added to the RadEditor documentation inside the External CSS Files article:

 If you are to set external css files in dynamically loaded editors, make sure to load the Toolsfile before you add any external css files, e.g.

RadEditor1.ToolsFile = "~/RadEditorTools-Simple.xml";
RadEditor1.CssFiles.Add(new EditorCssFile("~/Css/RadEditor.css"));

Best wishes,
Rumen
the Telerik team

[Tom Fallwell]

Yep, sure is. My bad. Thanks. :)