Editor / Adding CSS Files to Content Area

Adding CSS files to RadEditor's content area

By default, RadEditor copies the css classes available on the page where it resides and populates the "Apply Css Class" dropdown with these classes. However, the editor could be configured to load external CSS files instead. This scenario is very common for editors integrated in back-end administration areas, which have one set of CSS classes, while the content is being saved in a database and displayed on the public area, which has a different set of CSS classes.

Thanks to the CssFiles and telerik:EditorCssFile inner-tags , you can specify a list of CSS files, which you need the editor to use, e.g.

<telerik:RadEditor id="RadEditor1" runat="server">
<CssFiles>
<telerik:EditorCssFile Value="~/ExternalCssFile1.css" />
<telerik:EditorCssFile Value="~/ExternalCssFile2.css" />
</CssFiles>
</telerik:radeditor>

To set the CssFiles property via the codebehind use the following syntax:

C#
RadEditor1.CssFiles.Add("~/ExternalCssFiles/Styles1.css");
RadEditor1.CssFiles.Add("~/ExternalCssFiles/Styles2.css");

VB.NET
RadEditor1.CssFiles.Add("~/ExternalCssFiles/Styles1.css")
RadEditor1.CssFiles.Add("~/ExternalCssFiles/Styles2.css")

The CssFiles property could be also set via the ToolsFile.xml file:

<root>
....
<cssFiles>
<item name="~/ExternalCssFiles/Styles1.css" />
<item name="~/ExternalCssFiles/Styles2.css" />
</cssFiles>
...
</root>