External CSS Files
In this help article you will learn how to import external CSS files into the content area of RadEditor using the CssFiles collection.
This approach is available only when ContentAreaMode is iframe. Using a content area rendered as a DIV element does not offer native capabilities to add external CSS files. You can find out how to decorate the DIV content area here—Decorating Div Content Area.
By default, RadEditor uses the CSS styles available in the current page. Using the CssFiles collection, it can be configured to load external CSS files instead.
If a CSS file is added via the CssFiles collection, any CSS rules or files that derive from the main page will no longer affect the stylization of the content area.
Using external CSS files is useful in scenarios where the editable content area is required to have design, formatting or stylization that is different from the main page.
Thanks to the CssFiles collection, you can add multiple CSS files to the RadEditor content area, as shown in the examples below.
Example 1: Adding external CSS files via markup.
<telerik:RadEditor RenderMode="Lightweight" runat="server" ID="RadEditor1">
<CssFiles>
<telerik:EditorCssFile Value="~/ExternalCssFiles/Styles1.css" />
<telerik:EditorCssFile Value="~/ExternalCssFiles/Styles2.css" />
</CssFiles>
</telerik:RadEditor>
Example 2: Adding external CSS files from the code behind.
RadEditor1.CssFiles.Add("~/ExternalCssFiles/Styles1.css");
RadEditor1.CssFiles.Add("~/ExternalCssFiles/Styles2.css");
RadEditor1.CssFiles.Add("~/ExternalCssFiles/Styles1.css")
RadEditor1.CssFiles.Add("~/ExternalCssFiles/Styles2.css")
If you want 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"));`
Example 3: Adding external CSS files via ToolsFile.xml file.
<root>
....
<cssFiles>
<item name="~/ExternalCssFiles/Styles1.css" />
<item name="~/ExternalCssFiles/Styles2.css" />
</cssFiles>
...
</root>
Example 4: Example of an external CSS file.
a.link
{
color: #0000ff;
font-weight: normal;
font-style: italic;
}
.img
{
border: none;
}
.text
{
background-color: Red;
font-size: 10px;
}
The CSS classes available in the external CSS files will populate the Apply Css Class dropdown. If you need to rearrange the items populated in the tool you need to use the CssClasses collection to add the ones that should be visible for the end-user.
If you only want to stop the page style inheritance, you do not need to have a special blank stylesheet. An empty value for the CssFile will have the same effect and will avoid the unnecessary request:
**ASP.NET** - - - <telerik:RadEditor RenderMode="Lightweight" ID="RadEditor1" runat="server"> <CssFiles> <telerik:EditorCssFile Value="" /> </CssFiles> <Content> <p>para</p> </Content> </telerik:RadEditor>