Add custom css classes to RadEditor for Content Block

Posted by Community Admin on 03-Aug-2018 21:58

Add custom css classes to RadEditor for Content Block

All Replies

Posted by Community Admin on 01-Dec-2010 00:00

Hi,

I would like to add some custom css styles to the RadEditor for the Content Block control in Sitefinity 4 RC.  
I have read these post:
www.sitefinity.com/.../content-block-custom-css-etc.aspx
www.sitefinity.com/.../radeditor.aspx

explaining that ContentBlock control has a public property - LayoutTemplatePath which you can use to map an external template and change some of the properties that HtmlField control expose. HtmlField wraps RadEditor control that ContentBlock uses.

I have created a template and I put this in the template:

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="RadContentEditor.ascx.cs" Inherits="Custom_ContentEditor_RadContentEditor" %>
<%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI.Fields" Assembly="Telerik.Sitefinity" %>
 
<sf:HtmlField ID="htmlEditor"
    runat="server"
    Width="99%"
    Height="370px"
    DisplayMode="Write"
    EditorToolsConfiguration="Custom"
    EditorConfigurations="~/ToolsFile.xml">
 </sf:HtmlField>

In the Sitefinity backend, in my pages, I set the LayoutTemplatePath to my custom template and I get this error:

"A required control was not found in the template for "~/Custom/ContentEditor/RadContentEditor.ascx".
The control must be assignable form type "System.Web.UI.ITextControl" and must have ID "contentHtml".


How do I customize the RadEditor for the Content Block?

Thank You,

Posted by Community Admin on 03-Dec-2010 00:00

Hi carlag,

To make some changes to the RadEditor control that is wrapped by ContentBlock control you have to create

1. CustomClass that inherits from ConentBlock - here you have to override LayoutTemplateName property and set it to your custom template

Inside the template you must have the code below

<%@ Control Language="C#" %>
 
<asp:Literal ID="contentHtml" runat="server"></asp:Literal>

2. Create a custom class that inherits from GenericContentDesigner and again override its LayoutTemplateName property where you set the path to the control template

Inside the template you must have the code below

<%@ Control Language="C#" %>

<%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI" TagPrefix="sf" %>

<%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI.Fields" TagPrefix="sf" %>

 

<sf:ResourceLinks id="resourcesLinks" runat="server">
 
    <sf:ResourceFile Name="Styles/Window.css" />
 
</sf:ResourceLinks>
 
  
 
<sf:FormManager ID="formManager" runat="server" />
 
<div style="width: 660px; overflow: hidden;">
 
    <sf:HtmlField
 
        ID="htmlEditor"
 
        runat="server"
 
        Width="99%"
 
        Height="370px"
 
        EditorContentFilters="DefaultFilters"
 
        EditorStripFormattingOptions="MSWord,Css,Font,Span,ConvertWordLists"
 
        DisplayMode="Write">
 
    </sf:HtmlField>
 
</div>
 
<script type="text/javascript">
 
    $("body").addClass("sfContentBlockDesigner");
 
</script>

3. Set attribute [ControlDesinger(typeof(YourCustomGenericContentDesigner)] to your custom ContentBlock class

[ControlDesigner(typeof(ContentBlockDesignerCustom))]
 
public class ContentBlockCustom : ContentBlock
 


3. Inside the custom content block control you have created you can access the RadEditor through HtmlField wrapper which has a  property Editor which gives you access to the RadEditor control

All the best,
Ivan Dimitrov
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

Posted by Community Admin on 07-Dec-2010 00:00

hi,

i put my layouttemplate according to attachment picture-layout.png. but i did not get option for adding custom css class in paragraph style in content editor(<sf:HtmlField).
 

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="GenericContentDesigner.ascx.cs" Inherits="controls_MyConetBlock_GenericContentDesigner" %>
<%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI" TagPrefix="sf" %>
<%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI.Fields" TagPrefix="sf" %>
  
<sf:ResourceLinks id="resourcesLinks" runat="server">
   
    <sf:ResourceFile Name="~/App_Data/Sitefinity/WebsiteTemplates/YourTemplate/App_Themes/YourTheme/Black Yellow/EditorStyleCss/editor_styles.css" />
   
</sf:ResourceLinks>
   
    
   
<sf:FormManager ID="formManager" runat="server" />
   
<div style="width: 660px; overflow: hidden;">
   
    <sf:HtmlField
   
        ID="htmlEditor"
   
        runat="server"
   
        Width="99%"
   
        Height="370px"
   
        EditorContentFilters="DefaultFilters"
   
        EditorStripFormattingOptions="MSWord,Css,Font,Span,ConvertWordLists"
   
        DisplayMode="Write">
   
    </sf:HtmlField>
   
</div>
   
<script type="text/javascript">
  
    $("body").addClass("sfContentBlockDesigner");
   
</script>



i want to do according to editor.png attachment picture.please see editor.png

 


 


Posted by Community Admin on 07-Dec-2010 00:00

Hi humayoo,

You can access the RadEditor control from the server side by using Editor public property and set your paragraphs.

htmlEditor.Editor.Paragraphs

All the best,
Ivan Dimitrov
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

Posted by Community Admin on 07-Dec-2010 00:00

HI,

i tried as you sad, but still it is not working.please guide me. this is my code below.

htmlEditor.Editor.CssFiles.Add("~/App_Data/Sitefinity/WebsiteTemplates/YourTemplate/App_Themes/YourTheme/Black Yellow/EditorStyleCss/editor_styles.css");
       //htmlEditor.Editor.ToolsFile = "~/App_Data/Sitefinity/Configuration/EditorToolsFile.xml";
       //htmlEditor.Editor.Paragraphs.Add(new Telerik.Web.UI.EditorParagraph("titleGrey",".titleGrey"));
       htmlEditor.Editor.CssClasses.Add("TitleGrey", ".titleGrey");
       htmlEditor.Editor.DataBind();

Posted by Community Admin on 07-Dec-2010 00:00

Hi humayoo,

You have to subscribe for PreRender of HtmlField control and add the paragraphs

void htmlEditor_PreRender(object sender, EventArgs e)
       
           htmlEditor.Editor.Paragraphs.Add("<h1>Heading 1<h1>", "<h1>");
           htmlEditor.Editor.Paragraphs.Add("<h2 style='font-family: Trebuchet MS;'>GGGGGGGGGGGGGG<h2>", "<h2 style='font-family: Trebuchet MS;'>");
           htmlEditor.Editor.Paragraphs.Add("<h3 class='serif'>TTTTTTTTTTTTTTTTTT<h3>", "<h3 class='serif'>");
       
 
       protected override void OnPreRender(EventArgs e)
       
           htmlEditor.PreRender += new EventHandler(htmlEditor_PreRender);
        
       


Best wishes,
Ivan Dimitrov
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

Posted by Community Admin on 08-Dec-2010 00:00

HI,

i did as you said but i want to use class from  external css file and EditorToolsFile.xml file. now my problem is that when it is loading xml file correclty but other tools disappear. second things is that class from external css file not applied. i am sending editor.png attachment problem and xml file.

void htmlEditor_PreRender(object sender, EventArgs e)
       

 htmlEditor.Editor.ToolsFile = "~/App_Data/Sitefinity/Configuration/EditorToolsFile.xml";
     
       htmlEditor.Editor.DataBind();
    
 
 
protected override void OnPreRender(EventArgs e)
    htmlEditor.PreRender += new EventHandler(htmlEditor_PreRender);


xml file






<
root>
  <modules>
    <module name="RadEditorStatistics" dockingZone="Bottom" enabled="true" visible="true" dockable="true" />
    <module name="RadEditorDomInspector" dockingZone="Module" enabled="true" visible="true" dockable="true" />
    <module name="RadEditorNodeInspector" dockingZone="Module" enabled="true" visible="true" dockable="true" />
    <module name="RadEditorHtmlInspector" dockingZone="Module" enabled="true" visible="true" dockable="true" />
    <module name="RadEditorXhtmlValidator" dockingZone="Module" enabled="true" visible="true" dockable="true" />
  </modules>
  <tools dockable="false">
    <tool name="Bold" shortcut="CTRL+B"/>
    <tool name="Italic" shortcut="CTRL+I"/>
    <tool name="Underline" shortcut="CTRL+U"/>
    <tool name="StrikeThrough" enabled="false" />
    <tool name="JustifyLeft" />
    <tool name="JustifyCenter" />
    <tool name="JustifyRight" />
    <tool name="JustifyFull" />
    <tool name="JustifyNone" />
    <tool name="Indent" />
    <tool name="Outdent" />
    <tool name="InsertOrderedList" />
    <tool name="InsertUnorderedList" />
    <tool separator="true"/>
  </tools>
  <tools name="MainToolbar" dockable="false">
    <tool name="AjaxSpellCheck" shortcut="F7" />
    <tool name="FindAndReplace" shortcut="CTRL+F" />
    <tool separator="true" />
    <tool name="Cut" shortcut="CTRL+X" />
    <tool name="Copy" shortcut="CTRL+C" />
    <tool name="Paste" shortcut="CTRL+V" />
    <tool name="PasteFromWord" />
    <tool name="PasteFromWordNoFontsNoSizes" />
    <tool name="PastePlainText" />
    <tool name="PasteAsHtml" />
    <tool separator="true"/>
    <tool name="Undo" shortcut="CTRL+Z"/>
    <tool name="Redo" shortcut="CTRL+Y"/>
    <tool separator="true"/>
  </tools>
  <tools name="InsertToolbar" dockable="false">
    <tool name="ImageManager" shortcut="CTRL+G"/>
    <tool name="ImageMapDialog" />
    <tool name="AbsolutePosition" />
    <tool separator="true" />
    <tool name="FlashManager" />
    <tool name="MediaManager" />
    <tool name="DocumentManager" />
    <tool name="TemplateManager" />
    <tool name="LinkManager" shortcut="CTRL+K"/>
    <tool name="Unlink" shortcut="CTRL+SHIFT+K"/>
  </tools>
  <tools dockable="false">
    <tool name="ConvertToLower" />
    <tool name="ConvertToUpper" />
    <tool separator="true" />
    <tool name="InsertTable" />
    <tool name="InsertSnippet" />
    <tool name="InsertFormElement" />
    <tool name="InsertSymbol" />
  </tools>
  <tools name="DropdownToolbar" dockable="false">
    <tool name="ForeColor" />
    <tool name="BackColor" />
    <tool separator="true" />
    <tool name="FontName" />
    <tool name="FontSize" />
    <tool name="ApplyClass" />
    <tool name="InsertCustomLink" />
    <tool name="FormatBlock" />
    <tool name="FormatStripper" />
  </tools>
  <tools name="DialogToolbar">
    <tool name="Print" shortcut="CTRL+P"/>
    <tool name="Superscript" />
    <tool name="Subscript" />
    <tool name="InsertParagraph" />
    <tool name="InsertHorizontalRule" />
    <tool name="InsertDate" />
    <tool name="InsertTime" />
    <tool separator="true"/>
    <tool name="AboutDialog" />
    <tool name="Help" shortcut="F1"/>
  </tools>
  <tools name="EnhancedEditToolbar" dockable="true">
    <tool name="ToggleScreenMode" shortcut="F11"/>
    <tool name="ToggleTableBorder" />
    <tool name="Zoom" />
    <tool name="ModuleManager" />
    <tool name="ToggleDocking" />
    <tool name="RepeatLastCommand" shortcut="F4"/>
  </tools>
  <tools>
    <tool name="StyleBuilder" text="Style Builder" />
    <tool name="XhtmlValidator" text="Xhtml Validator Dialog" />
    <tool name="TrackChangesDialog" text="Track Changes Dialog" />
    <tool name="FormatCodeBlock" text="Format Code Block Dialog" />
  </tools>
  <tools>
    <tool name="SetImageProperties" />
    <tool separator="true"/>
    <tool name="TableWizard" />
    <tool name="PageProperties" />
  </tools>
  <links>
    <link name="telerik" href="http://www.telerik.com">
      <link name="Products" href="http://www.telerik.com/products">
        <link name="r.a.d.controls suite" href="http://www.telerik.com/radcontrols" />
        <link name="r.a.d.navigation suite" href="http://www.telerik.com/radnavigation" />
        <link name="r.a.d.editor" href="http://www.telerik.com/radeditor" />
        <link name="r.a.d.designer" href="http://www.telerik.com/raddesigner" />
        <link name="r.a.d.spell" href="http://www.telerik.com/radspell" />
        <link name="r.a.d.chart" href="http://www.telerik.com/radchart" />
        <link name="r.a.d.menu" href="http://www.telerik.com/radmenu" />
        <link name="r.a.d.treeview" href="http://www.telerik.com/radtreeview" />
        <link name="r.a.d.panelbar" href="http://www.telerik.com/radpanelbar" />
        <link name="r.a.d.rotator" href="http://www.telerik.com/radrotator" />
        <link name="r.a.d.tabstrip" href="http://www.telerik.com/radtabstrip" tooltip="Tooltip" />
      </link>
      <link name="Purchase" href="http://www.telerik.com/purchase" />
      <link name="Support" href="http://www.telerik.com/support" />
      <link name="Client.Net" href="http://www.telerik.com/clientnet" />
    </link>
    <link name="Microsoft">
      <link name="Main Site" href="http://www.microsoft.com" />
      <link name="MSDN Online" href="http://msdn.microsoft.com" />
      <link name="Windows Update" href="http://windowsupdate.microsoft.com" />
    </link>
    <link name="Search Engines">
      <link name="Google" href="http://www.google.com" />
      <link name="Yahoo" href="http://www.yahoo.com" />
      <link name="AltaVista" href="http://www.altavista.com" />
    </link>
  </links>
  <snippets>
    <snippet name="Order Confirmation">
      <![CDATA[
                    <div style="width:300px;border:2px outset #D8D2BD;padding:34px;font-family:Arial, Verdana; font-size:11px;background-color:#F1EFE6;">
                    Dear ____________________,<br />
                    Thank you for inquiring about ____________. Your request will be processed in 48 hours and shipped at the address you have provided.
                    <br /><br />
                        <b>Please, contact us if you have any problems.</b>
                    </div>
                ]]>
    </snippet>
    <snippet name="Email Signature">
      <![CDATA[
                    <div style="margin-top:30px;width:80%;border-top:1px dotted gray;padding-top:4px;font-family:Arial, Verdana; font-size:11px;">
                    <b>John Wigham</b><br />
                    Senior Web Developer<br />
                        <a href="#">john@mysite.com</a>
                        <br />
                            <br />
                                <i>Disclaimer: The contents of this e-mail are privileged and confidential and intended for the addressees at the specified e-mail addresses only.</i>
                    </div>
                ]]>
    </snippet>
    <snippet name="Problem Report Feedback">
      <![CDATA[
                    <div style="width:300px;border:2px outset #D8D2BD;padding:34px;font-family:Arial, Verdana; font-size:11px;background-color:#F1EFE6;">
                    Hi ____________________,<br />
                    Thank you for reporting this issue. We have verified the problem and it is logged in our system. We will notify you once we have a solution.
                    <br /><br />
                        <b>Please, contact us if you have any problems.</b>
                    </div>
                ]]>
    </snippet>
  </snippets>
  <symbols></symbols>
  <fontNames>   </fontNames>
  <fontSizes>
  </fontSizes>
  <realFontSizes>
    <item value="11px"></item>
    <item value="12px"></item>
    <item value="13px"></item>
    <item value="14px"></item>
    <item value="18px"></item>
    <item value="22px"></item>
  </realFontSizes>
  <colors></colors>
  <paragraphs></paragraphs>
  <classes>
    <class name="Add CssClasses collection here:" value=".attention" />
    <class name="EditorToolsFile.xml" value=".read" />
  </classes>
  <dialogParameters></dialogParameters>
  <languages></languages>
  <contextMenus>
  </contextMenus>
</root>
<!-- ==============================================================================================
The ToolsFile must have a valid structure as shown below
All attributes and their values are case sensitive!
<root>
  <modules>
    <module />
    <module/>
  </modules>
  <tools>
    <tool />
    <tool />
     ...
  </tools>
    ...
  <colors>
    <color/>
    <color/>
  </colors>
</root>
 
<tool> element valid attributes:
  
name (required): Bold Italic Underline StrikeThrough Superscript Subscript
JustifyLeft JustifyCenter JustifyRight JustifyFull InsertOrderedList InsertUnorderedList
Outdent Indent Cut Copy Paste PasteFromWord
PastePlainText PasteAsHtml Print Undo Redo ImageManager
AbsolutePosition LinkManager Unlink InsertBoldHorizontalRule InsertTable ToggleTableBorder
FormatBlock ApplyClass FontName  FontSize InsertCustomLink Custom
InsertSymbol BackColor ForeColor FlashManager MediaManager SpellCheck
FormatStripper InsertParagraph InsertSnippet Help FindAndReplace DocumentManager
PasteFromWordNoFontsNoSizes InsertFormElement InsertDate InsertTime TemplateManager ToggleScreenMode
Zoom ModuleManager ToggleDocking RepeatLastCommand AboutDialog 
  
title
(not required):
 Some hint string for this tool.
  
shortcut
(not required):
 The key combination for the specific tool. Examples:
    <tool name="TemplateManager" shortcut="Ctrl+Shift+Alt+N"/>
    <tool name="LinkManager" shortcut="Ctrl+L" />
 
 
<separator> element
true/false Indicates whether a separator should appear at current position.
 
<tools> element valid attributes:
name (required): This string will identify the toolbar.
enabled (not required): true/false (Indicates whether the tool will be available on the client or not)
visible (not required):
 true/false (Indicates whether the tool should appear in the toolbar or not. This toolbar will be available client-side - the property defines only the visibility of the tool.)
dockable (not required):
 true/false (Indicates whether you will be able to drag&drop the toolbar to the docking zones)
 
<module> element valid attributes:
(module elements should appear as child elements of an element "modules")
name (required):
 The friendly name of the module. When in floating mode the name will appear in the tool's titlebar.
dockable (not required):
 (Indicates whether you will be able to drag&drop the tool to the docking zones)
enabled (not required):
 (Indicates whether the module will be available on the client or not)
visible (not required):
 (Indicates whether the module should appear in the toolbar or not. This module will be available client-side - the property defines only the visibility of the module. )
 
<link> element valid attributes:
(link elements should appear as child elements of an element "links")
name (required):
 Link/Category Name/Alias
href (not required):
 URL of the link/category
target (not required):
 The target window of the link
tooltip (not required):
 The tooltip for the link
  
<symbol> element valid attributes:
(symbol elements should appear as child elements of an element "symbols")
value (required):
 The symbol to be displayed
 
<font> element valid attributes:
(font elements should appear as child elements of a tool element with "name" attribute set to "fontNames")
name (required):
 Font Name
  
<class> element valid attributes:
(class elements should appear as child elements of an element "classes")
name (required):
 Class Alias
value (required):
 Class Name
 
<paragraph> element valid attributes:
(paragraph elements should appear as child elements of an element "paragraphs")
  
name (required):
 Paragraph Alias
value (required):
 Paragraph Name
 
<color> element valid attributes:
(color elements should appear as child elements of an element "colors")
value (not required):
 Hex value of the color
 
<snippet> element valid attributes:
(snippet elements should appear as child elements of an element "snippets")
name (required):
 Snippet Alias
  
<language> element valid attributes:
(language elements should appear as child elements of an element "Languages")
code (required):
 Language code
title (required):
 Language Title
  
The contextMenus tag in the Tools file allows you to change the default or specify custom context menus for different HTML elements.
<contextMenu > element valid attributes:
(contextMenu elements should appear as child elements of an element "contextMenus")
forElement (required):
 The HTML element that will call this menu.
enabled (required):
 Defines if this context menu is switched.
 
The example below shows how to attach custom context menus for <A> and <P> elements.
 
<contextMenus>
   <contextMenu forElement="A" enabled="false">
   </contextMenu>
   <contextMenu forElement="P">
       <tool name="JustifyLeft" />
       <tool name="JustifyCenter" />
       <tool name="JustifyRight" />
       <tool name="JustifyFull" />
   </contextMenu>
</contextMenus>            
=============================================================================================== -->

Posted by Community Admin on 08-Dec-2010 00:00

Hello humayoo,

The toolbar is not initialized. We need some time to research the issue and logged a bug for this. The bug ID is 101510

Kind regards,
Ivan Dimitrov
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

Posted by Community Admin on 08-Dec-2010 00:00

Hi,

I got the Apply Class drop down to appear in the RadEditor for the Content Block using a custom ToolsFile.xml file and the technique outlined in this forum.  However, none of my custom css styles are appearing in the Apply Class drop down.  I have done the following shown below to customize the RadEditor options.

In the App_Code directory of my sitefinity web application project I have two class files.

CustomClass.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Telerik.Sitefinity.Modules.GenericContent.Web.UI;
using Telerik.Sitefinity.Web.UI.ControlDesign;
 
/// <summary>
/// Summary description for CustomClass
/// </summary>
///
[ControlDesigner(typeof(CustomGenericContentDesigner))]
public class ContentBlockCustom : ContentBlock
    protected override string LayoutTemplateName
    
        get
        
            return "/Custom/ContentEditor/RadContentEditor.ascx";
        
    

CustomGenericContentDesigner.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Telerik.Sitefinity.Web.UI.ControlDesign;
using Telerik.Sitefinity.Modules.GenericContent.Web.UI;
 
/// <summary>
/// Summary description for CustomGenericContentDesigner
/// </summary>
public class CustomGenericContentDesigner : ContentBlockDesigner
    protected override string LayoutTemplateName
    
        get
        
            return "~/Custom/ContentEditor/RadContentEditor.ascx";
        
    
 
    protected override void InitializeControls(Telerik.Sitefinity.Web.UI.GenericContainer container)
    
        throw new NotImplementedException();
    

RadContentEditor.ascx HTML markup
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="RadContentEditor.ascx.cs" Inherits="Custom_ContentEditor_RadContentEditor" %>
<%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI" TagPrefix="sf" %>
<%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI.Fields" TagPrefix="sf" %>
 
<sf:ResourceLinks id="resourcesLinks" runat="server"
    <sf:ResourceFile Name="App_Data/Sitefinity/WebsiteTemplates/UnboundTemplate/App_Themes/Unbound/CSS/EditorStyles/Styles.css" />  
</sf:ResourceLinks>
    
<asp:Literal ID="contentHtml" runat="server"></asp:Literal>
 
<sf:FormManager ID="formManager" runat="server" />
  
<div style="width: 660px; overflow: hidden;">
  
 <sf:HtmlField ID="htmlEditor"
        runat="server"
        Width="99%"
        Height="370px"
        EditorContentFilters="DefaultFilters"
        EditorStripFormattingOptions="MSWord,Css,Font,Span,ConvertWordLists"
        DisplayMode="Write">
  </sf:HtmlField>
  
</div>
  
<script type="text/javascript">
    $("body").addClass("sfContentBlockDesigner");
</script>

RadContentEditor.ascx codebehind
public partial class Custom_ContentEditor_RadContentEditor : System.Web.UI.UserControl
    protected void Page_Load(object sender, EventArgs e)
    
 
    protected void htmlEditor_PreRender(object sender, EventArgs e)
    
        htmlEditor.Editor.ToolsFile = "~/Custom/ContentEditor/ToolsFile.xml";
        //htmlEditor.Editor.CssFiles.Add("~/App_Data/Sitefinity/WebsiteTemplates/UnboundTemplate/App_Themes/Unbound/CSS/EditorStyles/Styles.css");
        //htmlEditor.Editor.CssFiles.Add(new EditorCssFile("~/App_Data/Sitefinity/WebsiteTemplates/UnboundTemplate/App_Themes/Unbound/CSS/EditorStyles/Styles.css"));
        //htmlEditor.Editor.CssClasses.Add("SideMenu", ".sidemenu");
    
 
    protected override void OnPreRender(EventArgs e)
    
        htmlEditor.PreRender += new EventHandler(htmlEditor_PreRender);
 
    

ToolsFile.xml
<?xml version="1.0" encoding="utf-8" ?>
<root>
    <tools name="MainToolbar" enabled="true">
        <tool name="AjaxSpellCheck" />
        <tool name="Print" />
        <tool name="FindAndReplace" />
        <tool separator="true"/>
        <tool name="Cut" />
        <tool name="Copy" />
        <tool name="Paste" />
        <tool name="PasteFromWord" />
        <tool name="PastePlainText" />
        <tool name="PasteAsHtml"  />
        <tool separator="true"/>
        <tool name="Undo" />
        <tool name="Redo" />
        <tool name="ApplyClass"/>
    </tools>
</root>

Styles.css contains the custom CSS classes I want to appear in the Apply Class dropdown.  I included this file as a resource file in RadContentEditor.ascx and I also tried to add the external style sheet in code.  However, none of my custom css styles are appearing in the Apply Class drop down.  Is this problem related to bug ID 101510 or is there something else that has to be done for the custom styles to appear in the Apply Class dropdown?

Thank You

Posted by Community Admin on 10-Dec-2010 00:00

Hi,

I have the same problem and i really need to costumize the Editor with my custom classes.
I hope that this bug  could be resolved as soon as possible.
If there is another way to costumize the Classes that appear in the editor please send me the steps to do that.

Posted by Community Admin on 21-Dec-2010 00:00

Hello,

There should not be a problem to set the classes. The problem comes when you set the ToolsFile of the RadEditor. You can get around the issue and display the entire toolbar ( which is the last problem in the thread) by using the following js code in the ContentBlockDesigner template.

functionpageLoad()
    vareditorToolbars = jQuery("#"+ "<%= htmlEditor.ClientID %>"+ " .reToolbar");
    editorToolbars.each(function(index)
        if(index > 0)
            jQuery(this).show();
        
    );


The issue will be fixed in the next internal build that we be available for downloading this week.


Greetings,
Ivan Dimitrov
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

Posted by Community Admin on 19-Apr-2011 00:00

I'm not sure if this has changed in sp1 or anything, but the amount of hoops you have to jump through to change the RadEditor is just ridiculous. 

I can't follow what i'm supposed to change and what i'm not based on this thread...this should be an easy extension point.

Posted by Community Admin on 21-Apr-2011 00:00

Hello ,

We have logged a task about exposing configurations to make HtmlField extensibility simplified. I will rise the priority of the task for Q2 release.

All the best,
Ivan Dimitrov
the Telerik team


Posted by Community Admin on 03-May-2011 00:00

Hi, I would also like to customise the RAD editor, when is the Q2 release planned for and what is the process required to update an existing SiteFinity installation?

Posted by Community Admin on 03-May-2011 00:00

Hello,

Please check our roadmap for further reference.

Best wishes,
Ivan Dimitrov
the Telerik team

Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

This thread is closed