Editor

Controls

Rate this demo

Thank you for your post!
Submit a support ticket
If you have an active license or trial, you have access to dedicated support from Telerik’s developers. Response time is 24h for active licenses and 72h for trials, Mon-Fri.
Post in the forums
If you don’t have access to support or would like to help other people by sharing your problem, reach out to our active community in the forums.

Editor - Adding CSS Files to Content Area

RadEditor - HTML WYSIWYG Editor. MS Word-like content editing experience thanks to a rich set of formatting tools, dropdowns, dialogs, system modules and built-in spell-check.
RadEditor's components - toolbar, content area, modes and modules
   
Toolbar's wrapper  
Content area wrapper
RadEditor's bottom area: Design, Html and Preview modes, Statistics module and resize handle.
It contains RadEditor's Modes/views (HTML, Design and Preview), Statistics and Resizer
Editor Mode buttonsStatistics moduleEditor resizer
 
 
RadEditor's Modules - special tools used to provide extra information such as Tag Inspector, Real Time HTML Viewer, Tag Properties and other.
   


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>

 
C# VB
Show code in new window Demo isolation steps
<%@ Page Theme="Default" Language="C#" Debug="true" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs"Inherits="Telerik.Web.Examples.Editor.SettingContentAreaDefaults.DefaultCS"  %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!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>
    <title>CSS classes to content area of HTML Editor for ASP.NET AJAX | RadEditor Demo</title>
     <style type="text/css">
          .codeListings {
               overflow: scroll !important;
          }
          .qsf-demo-container {
                max-width: 100% !important;
          }
          .RadEditor.MetroTouch,
          .RadEditor.BlackMetroTouch {
               width: 1100px !important;
          }
          .RadEditor.Silk,
          .RadEditor.Glow {
               width: 850px !important;
          }
     </style>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="QsfSkinManager" runat="server" ShowChooser="true" />
    <telerik:RadFormDecorator ID="QsfFromDecorator" runat="server" DecoratedControls="All" EnableRoundedCorners="false" />
     <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>
               </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"></telerik:EditorModule>
          </Modules>
     </telerik:RadEditor>
    </form>
</body>
</html>