Telerik is a leading vendor of ASP.NET AJAX, ASP.NET MVC, Silverlight, WinForms and WPF controls and components, as well as .NET Reporting, .NET ORM , .NET CMS, Code Analysis, Mocking, Team Productivity and Automated Testing Tools. Building on its expertise in interface development and Microsoft technologies, Telerik helps customers build applications with unparalleled richness, responsiveness and interactivity. Telerik products help thousands of companies to be more productive and deliver reliable applications under budget and on time.
Version Q2 2011 released 07/12/2011
select

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>

Source Code

C# VB.NET
Show code in new window Demo isolation steps
  • <%@ Page Theme="Default" Language="vb" Debug="true" AutoEventWireup="true" CodeFile="DefaultVB.aspx.vb" Inherits="Telerik.Web.Examples.Editor.SettingContentAreaDefaults.DefaultVB" %>
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
    <%@ Register TagPrefix="qsf" TagName="Header" Src="~/Common/Header.ascx" %>
    <%@ Register TagPrefix="qsf" TagName="HeadTag" Src="~/Common/HeadTag.ascx" %>
    <%@ Register TagPrefix="qsf" TagName="Footer" Src="~/Common/Footer.ascx" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
        <qsf:headtag id="Headtag1" runat="server"/>
        <style type="text/css">
        .codeListings{overflow: scroll !important;}
        </style>
    </head>
    <body class="BODY">
        <form id="form1" runat="server">
                             
            <qsf:header id="Header1" runat="server" NavigationLanguage="VB"/>
         <telerik:RadScriptManager ID="ScriptManager1" runat="server" />
            
            <telerik:RadEditor id="RadEditor1" runat="server" EditModes="Design">
         <Content>
                     <h2 class="titleText">RadEditor for ASP.NET AJAX</h2>
            <p style="text-align: justify;"><span style="font-size: 19px; color: #4f6128;"><strong>RadEditor</strong></span><span style="color: #4f6128;"> </span>is not simply an HTML<a href="#HTMLDescription"><sup>1</sup></a> Editor. It is what Microsoft chose to use in <strong>MSDN</strong>, <strong>CodePlex</strong>, <strong>TechNet</strong>, <strong>MCMS</strong> and even as an alternative to the default editor in <a href="http://www.telerik.com/products/aspnet-ajax/sharepoint.aspx">SharePoint</a>. Whether you need a mere Textbox with Google-like spellchecker, or a Word-like content authoring environment, the result is the same: clean <strong>XHTML</strong> output, fast rendering, widest cross-browser support, and <a href="http://www.telerik.com/products/aspnet-ajax/editor.aspx">tons of features</a>: <br />
            <br />
            <img src="../../Img/editor.jpg" alt="product logo" style="margin-top: 25px; float: left; margin-right: 15px;" /></p>
            <ul style="width: 350px; float: left;">
                <li>
                <em>Out-of-the-box XHTML-enabled Output...</em>
                </li>
                <li>
                <em>Unmatched Loading Speed and Performance</em>
                </li>
                <li>
                <em>Microsoft Word-like Spell-checking</em>
                </li>
                <li>
                <em>Seven Ways for Pasting from Word</em>
                </li>
                <li>
                <em>Multilevel Undo/Redo with Action Trails</em>
                </li>
                <li>
                <em>Extended Functionality Through Integrated Controls</em>
                </li>
            </ul>
            <table width="500" style="margin: 0pt auto;clear:both;">
                <thead>
                    <tr>
                        <th style="background-color: #ebf1dd;">Browser/OS</th>
                        <th style="background-color: #ebf1dd;">Windows</th>
                        <th style="background-color: #ebf1dd;">Mac OS</th>
                        <th style="background-color: #ebf1dd;">Linux</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td align="center" style="text-align: left; vertical-align: middle;"><img src="../../Img/BrowserIcons/ie.gif" alt="ie" style="float: left;" />&nbsp; Internet Explorer</td>
                        <td valign="top" style="background-color: #f2f2f2;">6.0+</td>
                        <td valign="top" style="background-color: #e5e0ec;">- </td>
                        <td valign="top" style="background-color: #dbeef3;">- </td>
                    </tr>
                    <tr>
                        <td><img src="../../Img/BrowserIcons/ff.gif" alt="ff" style="float: left;" />&nbsp; Firefox</td>
                        <td style="background-color: #f2f2f2;">1.5+</td>
                        <td style="background-color: #e5e0ec;">1.5+</td>
                        <td style="background-color: #dbeef3;">1.5+</td>
                    </tr>
                    <tr>
                        <td><img src="../../Img/BrowserIcons/chrome.gif" alt="chrome" style="float: left;" />&nbsp; Google Chrome</td>
                        <td style="background-color: #f2f2f2;">0.2+</td>
                        <td style="background-color: #e5e0ec;">5.0+</td>
                        <td style="background-color: #dbeef3;">5.0+</td>
                    </tr>
                    <tr>
                        <td><img src="../../Img/BrowserIcons/opera.gif" alt="opera" style="float: left;" />&nbsp; Opera</td>
                        <td style="background-color: #f2f2f2;">9.0+</td>
                        <td style="background-color: #e5e0ec;">9.0+</td>
                        <td style="background-color: #dbeef3;">-</td>
                    </tr>
                    <tr>
                        <td><img src="../../Img/BrowserIcons/safari.gif" alt="safari" style="float: left;" />&nbsp; Safari</td>
                        <td style="background-color: #f2f2f2;">3.0+</td>
                        <td style="background-color: #e5e0ec;">3.0+</td>
                        <td style="background-color: #dbeef3;">-</td>
                    </tr>
                    <tr>
                        <td><img src="../../Img/BrowserIcons/netscape.gif" alt="chrome" style="float: left;" />&nbsp; Netscape</td>
                        <td style="background-color: #f2f2f2;">9.0+</td>
                        <td style="background-color: #e5e0ec;">9.0+</td>
                        <td style="background-color: #dbeef3;">9.0+</td>
                    </tr>
                </tbody>
            </table>
            <br />
            <p style="border-top: 1px solid #555;padding-top: 10px;">
            <sup><sup><a id="HTMLDescription">1.</a></sup>The computer language used to create world-wide-web pages which are read by browsers.</sup>
            </p>
         </Content>
                    <Modules>
                        <telerik:EditorModule Name="empty" />
                    </Modules>
            </telerik:RadEditor>
            
            <qsf:Footer runat="server" ID="Footer1" />
            
            
        </form>
    </body>
    </html>

Get more than expected!

 
 

Take your time to truly experience the power of RadControls for ASP.NET AJAX with a free 60-day trial backed up by Telerik’s unlimited dedicated support.

Download your RadControls for ASP.NET AJAX trial and jumpstart your development with the available Getting Started resources.

If you have any questions, do not hesitate to contact us at sales@telerik.com.

Copyright 2002-2024 © Telerik. All right reserved
Telerik Inc, 201 Jones Rd, Waltham, MA 02451