+1-888-365-2779
Try Now
More in this section

Forums / General Discussions / Add custom css classes to RadEditor for Content Block

Add custom css classes to RadEditor for Content Block

15 posts, 0 answered
  1. carlag
    carlag avatar
    11 posts
    Registered:
    27 Jul 2006
    01 Dec 2010
    Link to this post
    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:
    http://www.sitefinity.com/devnet/forums/sitefinity-4-x/general-discussions/content-block-custom-css-etc.aspx
    http://www.sitefinity.com/devnet/forums/sitefinity-4-x/general-discussions/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,
  2. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    09 Dec 2016
    03 Dec 2010
    Link to this post
    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
  3. humayoo
    humayoo avatar
    89 posts
    Registered:
    25 Oct 2010
    07 Dec 2010
    Link to this post
    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

  4. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    09 Dec 2016
    07 Dec 2010
    Link to this post
    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
  5. humayoo
    humayoo avatar
    89 posts
    Registered:
    25 Oct 2010
    07 Dec 2010
    Link to this post
    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();
  6. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    09 Dec 2016
    07 Dec 2010
    Link to this post
    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
  7. humayoo
    humayoo avatar
    89 posts
    Registered:
    25 Oct 2010
    08 Dec 2010
    Link to this post
    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>            
    =============================================================================================== -->
  8. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    09 Dec 2016
    08 Dec 2010
    Link to this post
    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
  9. carlag
    carlag avatar
    11 posts
    Registered:
    27 Jul 2006
    08 Dec 2010
    Link to this post
    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
  10. JV
    JV avatar
    74 posts
    Registered:
    15 Jun 2012
    10 Dec 2010
    Link to this post
    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.
  11. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    09 Dec 2016
    21 Dec 2010
    Link to this post
    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
  12. fregas baratis
    fregas baratis avatar
    185 posts
    Registered:
    14 Nov 2002
    19 Apr 2011
    Link to this post
    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.
  13. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    09 Dec 2016
    21 Apr 2011
    Link to this post
    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

  14. Kyle
    Kyle avatar
    7 posts
    Registered:
    14 Apr 2011
    03 May 2011
    Link to this post
    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?
  15. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    09 Dec 2016
    03 May 2011
    Link to this post
    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
15 posts, 0 answered