By default RadEditor for ASP.NET AJAX uses the CSS classes available in the current page. However, it can 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 other content is being saved in a database and displayed in the public
area which has a different set of CSS classes.
Thanks to the CssFiles property, you can specify a string array as the list of CSS files, which you need the editor to use. e.g.
| ASPX/ASCX |
 Copy Code |
|
<telerik:radeditor runat="server" ID="RadEditor1">
<CssFiles>
<telerik:EditorCssFile Value="~/ExternalCssFiles/Styles1.css,~/ExternalCssFiles/Styles2.css" />
</CssFiles>
</telerik:radeditor>
|
| C# |
Copy Code |
|
RadEditor1.CssFiles.Add("~/ExternalCssFiles/Styles1.css");
RadEditor1.CssFiles.Add("~/ExternalCssFiles/Styles2.css");
|
| VB.NET |
Copy Code |
|
RadEditor1.CssFiles.Add("~/ExternalCssFiles/Styles1.css")
RadEditor1.CssFiles.Add("~/ExternalCssFiles/Styles2.css")
|
| ToolsFile.xml |
Copy Code |
|
<root>
....
<cssFiles>
<item name="~/ExternalCssFiles/Styles1.css" />
<item name="~/ExternalCssFiles/Styles2.css" />
</cssFiles>
...
</root>
|
| Styles1.css |
Copy Code |
|
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 would like you you can easily modify this set of external classes in the
dropdown and display only a few classes using the Add method of CssClasses Collection:
| C# |
Copy Code |
|
RadEditor1.CssClasses.Add("Links class ", "a.link");
RadEditor1.CssClasses.Add("Images class ", ".img");
|
| VB.NET |
Copy Code |
|
RadEditor1.CssClasses.Add("Links class ", "a.link")
RadEditor1.CssClasses.Add("Images class ", ".img")
|
You can also populate the CSS class dropdown using the ToolsFile, as shown in the example below:
| ToolsFile.xml |
Copy Code |
|
<classes>
<class name="Links class" value="a.link"
/>
<class name="Images class" value=".img"
/>
</classes>
|