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

Forums / General Discussions / Custom Tools for backend Content Editor

Custom Tools for backend Content Editor

16 posts, 0 answered
  1. Jack
    Jack avatar
    23 posts
    Registered:
    03 May 2011
    29 Aug 2011
    Link to this post
    Hi, Im trying to add a few custom tools into the radeditor across the backend content editor.
    I have followed http://www.sitefinity.com/devnet/forums/sitefinity-4-x/sdk/how-to-customize-the-content-editor.aspx#1777497 and http://www.sitefinity.com/devnet/forums/sitefinity-4-x/general-discussions/content-block-editor---toolsfile-xml.aspx and was able to get the view map to work (using higgsy's code), changes in EditorTools.ascx and xml file (adding/removing default buttons) can been seen but when trying to add a custom tool like the example here http://tv.telerik.com/watch/radtips/radeditor/radeditor-for-aspnet-ajax-export-to-pdf with <tool name="CustomTool" /> in the xml I get the error 

    Server Error in '/' Application.
    Could not find the specified key "CustomTool" or class id "RadEditor.Tools".

    I also tried to just add the following from the radeditor demo's adding a blank tool with no commands
    <telerik:RadEditor
    ...>
    <Tools>
    <telerik:EditorToolGroup>
    <telerik:EditorTool Name="CustomTool" Text="CustomTool Test" />
    </telerik:EditorToolGroup>
    </Tools>
    </telerik:RadEditor>
    This worked with an empty project with just a radeditor on the page however when applied in template the tools section seems to be just ignored or overwritten.

    In both cases (template/ radeditor on page) I was not able to create an empty command button through the xml
    Any help would be appreciated
  2. Boyan Barnev
    Boyan Barnev avatar
    1429 posts
    Registered:
    09 Dec 2016
    01 Sep 2011
    Link to this post
    Hello Jack,

    Can you please take a look at this article form our online documentation, I believe you might find it useful. If any problems persist, do you mind sharing with us your current implementation (template and toolsfile) and a screenshot of the configuration settings where you have mapped the external template for the content editor, so we can inspect this issue further and give you a more specific advice.

    Greetings,
    Boyan Barnev
    the Telerik team

    Thank you for being the most amazing .NET community! Your unfailing support is what helps us charge forward! We'd appreciate your vote for Telerik in this year's DevProConnections Awards. We are competing in mind-blowing 20 categories and every vote counts! VOTE for Telerik NOW >>

  3. Jack
    Jack avatar
    23 posts
    Registered:
    03 May 2011
    01 Sep 2011
    Link to this post
    Hi Boyan,
    I have tried declaring in RadEditor as well as xml from the documentation but still no success, maybe Im missing something simple.. Here is my template with the declaration commented
    <%@ Control Language="C#" %>
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
    <%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI" TagPrefix="sf" %>
    <%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI.Extenders" TagPrefix="sf" %>
     
    <sf:ConditionalTemplateContainer ID="conditionalTemplate" runat="server">
        <Templates>
            <sf:ConditionalTemplate ID="ConditionalTemplate1" Left="DisplayMode" Operator="Equal" Right="Read" runat="server">
                <sf:SitefinityLabel id="titleLabel_read" runat="server" WrapperTagName="div" HideIfNoText="false" CssClass="sfTxtLbl" />
                <sf:SitefinityLabel id="viewControl" runat="server" WrapperTagName="div" HideIfNoText="false" CssClass="sfRTFContent" />
            </sf:ConditionalTemplate>
            <sf:ConditionalTemplate ID="ConditionalTemplate2" Left="DisplayMode" Operator="Equal" Right="Write" runat="server">
                <sf:ResourceLinks id="resourcesLinks2" runat="server">
                    <sf:EmbeddedResourcePropertySetter Name="Telerik.Sitefinity.Resources.Themes.Default.Styles.EditorDialogs.css" Static="true" ControlID="editControl" ControlPropertyName="DialogsCssFile" />
                    <sf:ResourceFile Name="Telerik.Sitefinity.Resources.Themes.Default.Styles.Window.css" Static="true" />
                </sf:ResourceLinks>
                <asp:Label ID="titleLabel_write" runat="server" CssClass="sfTxtLbl newclass" AssociatedControlID="editControl" />
                <asp:LinkButton ID="expandLink" runat="server" OnClientClick="return false;" CssClass="sfOptionalExpander" />
                <asp:Panel ID="expandableTarget" runat="server" CssClass="sfEditorWrp sfClearfix">
                    TESTTT
                    <telerik:RadEditor
                        ID="editControl"
                        runat="server"
                        Skin="Sitefinity"
                        Width="100%"
                        Height="250px"
                        EnableResize="False"
                         
                        ToolsFile="~/Tools.xml"
                         
                        DialogsCssFile="/styles/site.css"
                        EditModes="Design,HTML"
                        DialogHandlerUrl="~/Telerik.Web.UI.DialogHandler.axd"
                        Content=""
                        NewLineBr="False"
                        StripFormattingOptions="Css,Font,Span"
                        OnClientLoad="Telerik$Sitefinity$Web$UI$Fields$HtmlField$radEditorToggleAdvancedToolbars"
                        OnClientPasteHtml="OnClientPasteHtml"
                        OnClientCommandExecuting="OnClientCommandExecuting">
                        <%--<Tools>
                            <telerik:EditorToolGroup>
                                <telerik:EditorTool Name="CustomTool" Text="CustomTool Test" />
                            </telerik:EditorToolGroup>
                        </Tools>--%>
                        <FlashManager ViewPaths="~/Files" UploadPaths="~/Files" DeletePaths="~/Files" />
                    </telerik:RadEditor>
                    TESTTT 
                    <%--<sf:RadEditorCustomDialogsExtender id="editorCustomDialogsExtender" runat="server" TargetControlID="editControl" />--%>
                    <sf:SitefinityLabel id="descriptionLabel" runat="server" WrapperTagName="div" HideIfNoText="true" CssClass="sfDescription" />
                    <sf:SitefinityLabel id="exampleLabel" runat="server" WrapperTagName="div" HideIfNoText="true" CssClass="sfExample" />
                </asp:Panel>
                 
                 
                <script type="text/javascript">
                     
                    /* <![CDATA[ */
                     
                    var className = null;
                    var toRemove = false;
                    var handlersAdded = false;
     
                    function OnClientPasteHtml(sender, args)
                    {
                        var newContent = args.get_value();
                        newContent = newContent.replace(new RegExp("<b(\\s([^>])*?)?>", "ig"), "<strong$1>");
                        newContent = newContent.replace(new RegExp("</b(\\s([^>])*?)?>", "ig"), "</strong$1>");
                        newContent = newContent.replace(new RegExp("<i(\\s([^>])*?)?>", "ig"), "<em$1>");
                        newContent = newContent.replace(new RegExp("</i(\\s([^>])*?)?>", "ig"), "</em$1>");
                        var regex = /<([a-zA-Z]+) ?[^>]*?>\s*<\/\1>/gi;
                        newContent = newContent.replace(regex, "");
                         
                        args.set_value(newContent);
                    }
     
                    function OnClientCommandExecuting(editor, args) {
                     
                        var name = args.get_name();
                        var val = args.get_value();
                         
                        var commandName = args.get_commandName();
                        className = "re" + commandName;
                        if (editor.get_dialogOpener())
                        {
                            if (editor.get_dialogOpener()._container && !handlersAdded)
                            {
                                editor.get_dialogOpener()._container.add_show(AddRemoveCSSClass);
                                editor.get_dialogOpener()._container.add_close(AddRemoveCSSClass);
                                handlersAdded = true;
                            }
                        }
     
                        if (name == "MergeTags")
                        {
                            editor.pasteHtml(val);
                            //Cancel the further execution of the command as such a command does not exist in the editor command list
                            args.set_cancel(true);
                        }
     
                        if (commandName == "ToggleScreenMode") {
                            var containerWnd = GetRadWindow();
                            if (!editor.isFullScreen()) //if the editor is placed in fullscreen mode specify the needed content area width
                            {
                                $(editor.get_element()).addClass("sfFullScreenEditor");
                                if(containerWnd != null && !containerWnd.isMaximized())
                                {
                                    containerWnd.maximize();
                                    $(containerWnd.get_element()).addClass("sfWndToBeRestored");
                                }
                                editor.get_document().body.style.maxWidth = "640px";
                            }
                            else
                            {
                                $(editor.get_element()).removeClass("sfFullScreenEditor");
                                if(containerWnd != null && $(containerWnd.get_element()).hasClass("sfWndToBeRestored"))
                                {
                                    $(containerWnd.get_element()).removeClass("sfWndToBeRestored");
                                    containerWnd.restore();
                                }
                                editor.get_document().body.style.maxWidth = "100%";
                            }
                        }
     
                    }
     
                    function AddRemoveCSSClass(sender, args)
                    {
                        var popupElement = sender.get_popupElement();
                        if (!toRemove)
                        {
                            Sys.UI.DomElement.addCssClass(popupElement, className);
                        }
                        else
                        {
                            Sys.UI.DomElement.removeCssClass(popupElement, className);
                        }
                    }
     
                    function GetRadWindow()
                    {
                        var oWindow = null;
                        if (window.radWindow) oWindow = window.radWindow;
                        else if (window.frameElement.radWindow) oWindow = window.frameElement.radWindow;
                        return oWindow;
                    }
     
                     
                     
                    /* ]]> */
                     
                </script>
            </sf:ConditionalTemplate>
        </Templates>       
    </sf:ConditionalTemplateContainer>

    and my tools file
    <?xml version="1.0" encoding="utf-8" ?>
    <root>
      <modules>
        <module name="RadEditorStatistics" dockingZone="Bottom" visible="false" />
        <module name="RadEditorDomInspector" visible="false" />
        <module name="RadEditorNodeInspector" visible="false" />
        <module name="RadEditorHtmlInspector" visible="false" />
      </modules>
      <tools name="MainToolbar">
        <!--all the buttons included in this section will always be shown by default - feel free to modify it according to your requirements-->
        <tool name="ToggleAdvancedToolbars" Text="Less formatting options" />
        <!--This button hides the advanced formatting options buttons-->
        <!--<tool name="Bold" shortcut="CTRL+B"/>
        <tool name="Italic" shortcut="CTRL+I"/>-->
        <tool separator="true"/>
        <tool name="InsertOrderedList" />
        <tool name="InsertUnorderedList" />
        <tool separator="true"/>
        <tool name="LinkManager" shortcut="CTRL+K"/>
        <tool name="Unlink" shortcut="CTRL+SHIFT+K"/>
        <tool name="ImageManager" shortcut="CTRL+G"/>
        <tool separator="true"/>
        <tool name="AjaxSpellCheck"/>
        <tool separator="true"/>
        <tool name="PasteFromWord" />
        <tool separator="true"/>
        <!--you can use tool separators to separate your button-->
        <tool name="CustomTool"/>
        <!--this will be your button-->
        <tool separator="true"/>
      </tools>
      <tools>
        <tool separator="true"/>
        <tool name="JustifyLeft" />
        <tool name="JustifyRight" />
        <tool name="JustifyCenter" />
        <tool name="JustifyFull" />
        <tool separator="true"/>
        <tool name="Indent" />
        <tool name="Outdent" />
      </tools>
      <tools>
        <tool name="FontName" shortcut="CTRL+SHIFT+F"/>
        <tool separator="true"/>
        <tool name="RealFontSize"/>
        <tool separator="true"/>
        <tool name="FormatBlock"/>
        <tool separator="true"/>
        <tool name="ForeColor"/>
        <tool name="BackColor"/>
        <tool separator="true"/>
        <tool name="MediaManager" />
        <tool name="FlashManager" />
        <tool name="DocumentManager" />
      </tools>
      <tools>
        <tool name="InsertParagraph" />
        <tool name="InsertTable" />
        <tool name="InsertSymbol"/>
        <tool name="InsertHorizontalRule" />
        <tool separator="true"/>
        <tool name="Superscript" />
        <tool name="Subscript" />
        <tool separator="true"/>
        <tool name="FormatStripper"/>
        <tool separator="true"/>
        <tool name="FindAndReplace" shortcut="CTRL+F"/>
        <tool name="Print" shortcut="CTRL+P"/>
        <tool name="ToggleScreenMode" />
      </tools>
    </root>

  4. Boyan Barnev
    Boyan Barnev avatar
    1429 posts
    Registered:
    09 Dec 2016
    06 Sep 2011
    Link to this post
    Hi Jack,

    I'm sorry to hear that you are still having trouble implementing the desired functionality. Just in case, can you please try adding the tools programatically as per the sample in this article form the RadEditor documentation, and let us know if the problems persist? Thank you in advance.

    Best wishes,
    Boyan Barnev
    the Telerik team

    Thank you for being the most amazing .NET community! Your unfailing support is what helps us charge forward! We'd appreciate your vote for Telerik in this year's DevProConnections Awards. We are competing in mind-blowing 20 categories and every vote counts! VOTE for Telerik NOW >>

  5. Jack
    Jack avatar
    23 posts
    Registered:
    03 May 2011
    06 Sep 2011
    Link to this post
    I tried the following code 
    protected void Page_Load(object sender, EventArgs e)
            {
                editControl.Load += editControlOnload;
            }
     
            protected void editControlOnload(Object sender, EventArgs e)
            {
                var main = new EditorToolGroup();
                editControl.Tools.Add(main);
     
                var custom1 = new EditorTool { Name = "CustomToolBackend" };
                main.Tools.Add(custom1);
            }
    and I am getting the same error as the xml method

    Could not find the specified key "CustomToolBackend" or class id "RadEditor.Tools".

    Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code. 

    Exception Details: System.ArgumentException: Could not find the specified key "CustomToolBackend" or class id "RadEditor.Tools".

    Source Error: 

    An unhandled exception was generated during the execution of the current web request. Information regarding the origin and location of the exception can be identified using the exception stack trace below.

    Stack Trace: 

    [ArgumentException: Could not find the specified key "CustomToolBackend" or class id "RadEditor.Tools".]
       Telerik.Sitefinity.Localization.Resource.GetString(ResourceDataProvider provider, String classId, String key, CultureInfo culture, Boolean falback, Boolean throws) +454
       Telerik.Sitefinity.Localization.Res.Get(String classId, String key, CultureInfo culture, Boolean fallback, Boolean throws) +168
       Telerik.Sitefinity.Localization.GlobalResourceProvider.GetObject(String resourceKey, CultureInfo culture) +46
       System.Web.Compilation.ResourceExpressionBuilder.GetResourceObject(IResourceProvider resourceProvider, String resourceKey, CultureInfo culture, Type objType, String propName) +23
       Telerik.Web.GlobalResourceLocator.GetString(String resourceKey) +42
       Telerik.Web.LocalizationStrings.GetString(String key, Boolean throwErrorIfMissing) +67
       Telerik.Web.UI.Editor.ToolbarAdapterBase.SetText(EditorTool button) +84
       Telerik.Web.UI.Editor.ToolbarAdapterBase.GetToolUIObject(EditorToolBase tool) +284
       Telerik.Web.UI.Editor.ToolbarAdapterBase.PreRender() +326
       Telerik.Web.UI.RadEditor.ControlPreRender() +63
       Telerik.Web.UI.RadWebControl.OnPreRender(EventArgs e) +22
       System.Web.UI.Control.PreRenderRecursiveInternal() +103
       System.Web.UI.Control.PreRenderRecursiveInternal() +175
       System.Web.UI.Control.PreRenderRecursiveInternal() +175
       System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint) +2496

    It seems like its trying to find it in the resource instead of creating new tool.

    So just as an update because Im getting mixed results this is what Im getting

     Empty Project with RadEditor on page:
    -Tool declaration method works
    -XML method Key/Class ID error when adding custom tools
    -Codebehind Key/Class ID error even though stepping through it added the new tool group fine

     Template in EditorTools
    -Tool declaration method ignored? no error shows standard tools even though I have bold, italic, customtool
    -XML method Key/Class ID error
    -Codebehind Key/Class ID error
  6. Jack
    Jack avatar
    23 posts
    Registered:
    03 May 2011
    09 Sep 2011
    Link to this post
    Can anyone help point me to a possible solution? 
  7. Boyan Barnev
    Boyan Barnev avatar
    1429 posts
    Registered:
    09 Dec 2016
    12 Sep 2011
    Link to this post
    Hi Jack,

    Thank you very much for the patience. I believe we have found the reason for the problems you are experiencing - since the editor is looking for a matching string for that key in its resource file, it is returning the below discussed exception, as the custom tool is not among the default ones, and thus - it's not localized. For more information on localizin the EditorTools, you can browse this article from our Documentation.
    Declaring the tool with its Text attribute set to some value, will also fix the problems (e.g.
    <tool name="TestButton" Text="My Test Button"/> ) as it provides a predefined value for the localized string. Please try the above solution, and do not hesitate to get back to us if you need any further assistance.

    Greetings,
    Boyan Barnev
    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
  8. Jack
    Jack avatar
    23 posts
    Registered:
    03 May 2011
    12 Sep 2011
    Link to this post
    Hi Boyan

    I created the App_GlobalResources folder with the resource file RadEditor.Tools.resx, added an Entry with the name of the tool with a value and its still giving me the same error. Is there any steps Im missing? It seems like its not picking up the resource file so I also tried renaming it to the ID of the RadEditor, name of  Tools file, name of Template file and none worked. However adding text value in the xml did work but I would like to figure out why the resource file is not working.

    Thanks in advance
  9. Boyan Barnev
    Boyan Barnev avatar
    1429 posts
    Registered:
    09 Dec 2016
    16 Sep 2011
    Link to this post
    Hi Jack,

    Can you please try adding the key through the Administration ->Interface Labels and messages  option. We have a class RadEditor exposed there, you can select it and localize any of the existing/custom tools. An alternative could be to place your existing *.resx files inside the ~/App_Data/Sitefinity/GlobalResources folder.

    Regards,
    Boyan Barnev
    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
  10. Jack
    Jack avatar
    23 posts
    Registered:
    03 May 2011
    28 Sep 2011
    Link to this post
    Hi, sorry for the late reply
    I did get the custom tools working with the App_Data/Sitefinity/GlobalResources method!
    This may be a little off topic but Im also trying to add custom styles into rad editor through apply CSS.
    I was able to get styles showing by either writing css directly on the EditorTools file or adding a css link however the styles appear to be doubled described here http://www.sitefinity.com/devnet/forums/sitefinity-4-x/general-discussions/radedito-changes---post-deleted.aspx

    I tried to follow http://www.telerik.com/help/aspnet-ajax/editor-external-css-files.html by adding
    <CssFiles><telerik:EditorCssFile Value="xxx" /></CssFiles> in radeditor or <cssFiles><item name="xxx" /></cssFiles> in tools.xml both didnt work. When adding it through codebehind in page load 
    this.editControl.CssFiles.Add(new EditorCssFile("/Styles/CustomStyles.css"));
    
    when debugging and stepping through it seems to be added
    -----------------------------
    this.editControl.CssFiles[0]
    {Telerik.Web.UI.EditorCssFile}
        base {Telerik.Web.UI.EditorValueItem}: {Telerik.Web.UI.EditorCssFile}
        Value: "/Styles/CustomStyles.css" and can be seen when inspecting through the browser (screenshot 1) but the styles doesnt show up I did notice when debuggin the PageLoad code is being hit 2 times and when inspecting PropertyEditor
    <div id="editView" class="sfContentBlocksDesignerWrp">
        <div id="ctl05_ctl00_ctl00_ctl00_ctl00_ctl00_htmlEditor">
                         
                 
                 
                <a onclick="return false;" id="ctl05_ctl00_ctl00_ctl00_ctl00_ctl00_htmlEditor_ctl00_ctl00_expandLink" class="sfOptionalExpander" href="javascript:__doPostBack('ctl05$ctl00$ctl00$ctl00$ctl00$ctl00$htmlEditor$ctl00$ctl00$expandLink','')"></a>
                <div id="ctl05_ctl00_ctl00_ctl00_ctl00_ctl00_htmlEditor_ctl00_ctl00_expandableTarget" class="sfEditorWrp sfClearfix">
                             
                     
                    <div id="ctl05_ctl00_ctl00_ctl00_ctl00_ctl00_htmlEditor_ctl00_ctl00_editControl" class="RadEditor Sitefinity reWrapper" style="height:370px;width:99%;">
                                <div id="ctl05_ctl00_ctl00_ctl00_ctl00_ctl00_htmlEditor_ctl00_ctl00_editControl_dialogOpener" style="display:none;">
                                    <div id="ctl05_ctl00_ctl00_ctl00_ctl00_ctl00_htmlEditor_ctl00_ctl00_editControl_dialogOpener_Window" style="display:none;">
                                        <div id="ctl05_ctl00_ctl00_ctl00_ctl00_ctl00_htmlEditor_ctl00_ctl00_editControl_dialogOpener_Window_C">
     
                                        </div><input id="ctl05_ctl00_ctl00_ctl00_ctl00_ctl00_htmlEditor_ctl00_ctl00_editControl_dialogOpener_Window_ClientState" name="ctl05_ctl00_ctl00_ctl00_ctl00_ctl00_htmlEditor_ctl00_ctl00_editControl_dialogOpener_Window_ClientState" type="hidden" />
                                    </div><input id="ctl05_ctl00_ctl00_ctl00_ctl00_ctl00_htmlEditor_ctl00_ctl00_editControl_dialogOpener_ClientState" name="ctl05_ctl00_ctl00_ctl00_ctl00_ctl00_htmlEditor_ctl00_ctl00_editControl_dialogOpener_ClientState" type="hidden" />
                                </div><table id="ctl05_ctl00_ctl00_ctl00_ctl00_ctl00_htmlEditor_ctl00_ctl00_editControlWrapper" cellpadding="0" cellspacing="0" style="table-layout:auto;width:100%;height:370px;">
                                    <tbody>
                                        <tr>
                                            <td class="reWrapper_corner reCorner_top_left"> </td><td class="reWrapper_center reCenter_top" colspan="3"> </td><td class="reWrapper_corner reCorner_top_right"> </td>
                                        </tr><tr>
                                            <td class="reLeftVerticalSide" rowspan="4"> </td><td rowspan="4" id="ctl05_ctl00_ctl00_ctl00_ctl00_ctl00_htmlEditor_ctl00_ctl00_editControlLeft" class="reTlbVertical"></td><td id="ctl05_ctl00_ctl00_ctl00_ctl00_ctl00_htmlEditor_ctl00_ctl00_editControlTop" class="reToolCell" style="width:100%;"><div class="Sitefinity reToolbarWrapper">
                                                <ul class="reToolbar Sitefinity">
                                                    <li class="reGrip grip_first"> </li><li><a title="Less formatting options" class="reTool" href="#"><span class="ToggleAdvancedToolbars"> </span></a></li><li class="reSeparator"> </li><li><a title="Numbered List" class="reTool" href="#"><span class="InsertOrderedList"> </span></a></li><li><a title="Bullet List" class="reTool" href="#"><span class="InsertUnorderedList"> </span></a></li><li class="reSeparator"> </li><li><a title="Hyperlink Manager (CTRL+K)" class="reTool" href="#"><span class="LinkManager"> </span></a></li><li><a title="Remove Link (CTRL+SHIFT+K)" class="reTool" href="#"><span class="Unlink"> </span></a></li><li><a title="Image Manager (CTRL+G)" class="reTool" href="#"><span class="ImageManager"> </span></a></li><li class="reSeparator"> </li><li><a title="AJAX Spellchecker" class="reTool" href="#"><span class="AjaxSpellCheck"> </span></a></li><li class="reSeparator"> </li><li><a title="Paste from Word" class="reTool" href="#"><span class="PasteFromWord"> </span></a></li><li class="reSeparator"> </li><li><a title="Apply CSS Class" class="reDropdown" href="#"><span class="ApplyClass" style="width:80px;">Apply CSS Class</span></a></li><li><a title="My Custom Tool From Resource" class="reTool" href="#"><span class="CustomTool"> </span></a></li><li><a title="Remove Empty Elements" class="reTool" href="#"><span class="RemoveEmpty"> </span></a></li><li class="reSeparator"> </li><li class="reGrip grip_last"> </li>
                                                </ul><ul class="reToolbar Sitefinity">
                                                    <li class="reGrip grip_first"> </li><li class="reSeparator"> </li><li><a title="Align Left" class="reTool" href="#"><span class="JustifyLeft"> </span></a></li><li><a title="Align Right" class="reTool" href="#"><span class="JustifyRight"> </span></a></li><li><a title="Align Center" class="reTool" href="#"><span class="JustifyCenter"> </span></a></li><li><a title="Justify" class="reTool" href="#"><span class="JustifyFull"> </span></a></li><li class="reSeparator"> </li><li><a title="Indent" class="reTool" href="#"><span class="Indent"> </span></a></li><li><a title="Outdent" class="reTool" href="#"><span class="Outdent"> </span></a></li><li class="reGrip grip_last"> </li>
                                                </ul><ul class="reToolbar Sitefinity">
                                                    <li class="reGrip grip_first"> </li><li><a title="Font Name (CTRL+SHIFT+F)" class="reDropdown" href="#"><span class="FontName" style="width:80px;">Font Name</span></a></li><li class="reSeparator"> </li><li><a title="Real font size" class="reDropdown" href="#"><span class="RealFontSize" style="width:34px;">Real font size</span></a></li><li class="reSeparator"> </li><li><a title="Paragraph Style" class="reDropdown" href="#"><span class="FormatBlock" style="width:80px;">Paragraph Style</span></a></li><li class="reSeparator"> </li><li><a title="Foreground Color" class="reTool reSplitButton" href="#"><span class="ForeColor"> </span><span class="split_arrow"> </span></a></li><li><a title="Background Color" class="reTool reSplitButton" href="#"><span class="BackColor"> </span><span class="split_arrow"> </span></a></li><li class="reSeparator"> </li><li><a title="Media Manager" class="reTool" href="#"><span class="MediaManager"> </span></a></li><li><a title="Flash Manager" class="reTool" href="#"><span class="FlashManager"> </span></a></li><li><a title="Document Manager" class="reTool" href="#"><span class="DocumentManager"> </span></a></li><li class="reGrip grip_last"> </li>
                                                </ul><ul class="reToolbar Sitefinity">
                                                    <li class="reGrip grip_first"> </li><li><a title="New Paragraph" class="reTool" href="#"><span class="InsertParagraph"> </span></a></li><li><a title="Insert Table" class="reTool reSplitButton" href="#"><span class="InsertTable"> </span><span class="split_arrow"> </span></a></li><li><a title="Insert Symbol" class="reTool reSplitButton" href="#"><span class="InsertSymbol"> </span><span class="split_arrow"> </span></a></li><li><a title="Horizontal Rule" class="reTool" href="#"><span class="InsertHorizontalRule"> </span></a></li><li class="reSeparator"> </li><li><a title="SuperScript" class="reTool" href="#"><span class="Superscript"> </span></a></li><li><a title="Subscript" class="reTool" href="#"><span class="Subscript"> </span></a></li><li class="reSeparator"> </li><li><a title="Format Stripper" class="reTool reSplitButton" href="#"><span class="FormatStripper"> </span><span class="split_arrow"> </span></a></li><li class="reSeparator"> </li><li><a title="Find And Replace (CTRL+F)" class="reTool" href="#"><span class="FindAndReplace"> </span></a></li><li><a title="Print (CTRL+P)" class="reTool" href="#"><span class="Print"> </span></a></li><li><a title="Toggle Full Screen Mode" class="reTool" href="#"><span class="ToggleScreenMode"> </span></a></li><li class="reGrip grip_last"> </li>
                                                </ul>
                                            </div></td><td rowspan="4" id="ctl05_ctl00_ctl00_ctl00_ctl00_ctl00_htmlEditor_ctl00_ctl00_editControlRight" class="reTlbVertical"></td><td rowspan="4" class="reRightVerticalSide"> </td>
                                        </tr><tr>
                                            <td valign="top" id="ctl05_ctl00_ctl00_ctl00_ctl00_ctl00_htmlEditor_ctl00_ctl00_editControlCenter" class="reContentCell" style="height:100%;"><label for="ctl05_ctl00_ctl00_ctl00_ctl00_ctl00_htmlEditor_ctl00_ctl00_editControlContentHiddenTextarea" style="display:none;">RadEditor hidden textarea</label><textarea id="ctl05_ctl00_ctl00_ctl00_ctl00_ctl00_htmlEditor_ctl00_ctl00_editControlContentHiddenTextarea" name="ctl05$ctl00$ctl00$ctl00$ctl00$ctl00$htmlEditor$ctl00$ctl00$editControl" rows="4" cols="20" style="display:none;"></textarea></td>
                                        </tr><tr>
                                            <td class="reToolZone"><table cellpadding="0" cellspacing="0" id="ctl05_ctl00_ctl00_ctl00_ctl00_ctl00_htmlEditor_ctl00_ctl00_editControl_BottomTable" style="width:100%;">
                                                <tbody>
                                                    <tr>
                                                        <td class="reEditorModesCell"><div class="reEditorModes" id="ctl05_ctl00_ctl00_ctl00_ctl00_ctl00_htmlEditor_ctl00_ctl00_editControl_ModesWrapper">
                                                            <ul>
                                                                <li><a href="javascript:void(0);" title="Design" class="reMode_design reMode_selected"><span>Design</span></a></li><li><a href="javascript:void(0);" title="HTML" class="reMode_html"><span>HTML</span></a></li>
                                                            </ul>
                                                        </div></td><td class="reBottomZone" id="ctl05_ctl00_ctl00_ctl00_ctl00_ctl00_htmlEditor_ctl00_ctl00_editControlBottom"> </td><td valign="bottom" align="right"> </td>
                                                    </tr>
                                                </tbody>
                                            </table><noscript>
                                                <p>RadEditor - please enable JavaScript to use the rich text editor.</p>
                                            </noscript></td>
                                        </tr><tr>
                                            <td id="ctl05_ctl00_ctl00_ctl00_ctl00_ctl00_htmlEditor_ctl00_ctl00_editControlModule" class="reToolZone"></td>
                                        </tr><tr>
                                            <td class="reWrapper_corner reCorner_bottom_left"> </td><td class="reWrapper_center reCenter_bottom" colspan="3"> </td><td class="reWrapper_corner reCorner_bottom_right"> </td>
                                        </tr>
                                    </tbody>
                                </table><input id="ctl05_ctl00_ctl00_ctl00_ctl00_ctl00_htmlEditor_ctl00_ctl00_editControl_ClientState" name="ctl05_ctl00_ctl00_ctl00_ctl00_ctl00_htmlEditor_ctl00_ctl00_editControl_ClientState" type="hidden" />
                            </div>
                    TESTTT 
                     
                     
                     
                 
                        </div>
                 
     
                 
     
         
     
             
            <script type="text/javascript" src="/js/jquery.contextmenu.js"></script>
             
                 
                <script type="text/javascript">
                    $(document).ready(function () {
                        Telerik.Web.UI.Editor.CommandList["RemoveEmpty"] = function (commandName, editor, args) {
                             
                             
                                $('p,h1,h2,h3,h4,h5,h6,a', '.reContentArea').filter(function () {
                                    return $.trim($(this).text()) === '';
                                }).remove();
                        };
     
                        Telerik.Web.UI.Editor.CommandList["CustomTool"] = function (commandName, editor, args) {
                            $('.reContentArea *').live({ mouseenter: function () {
     
                                $(this).attr("temp", $(this).css("border"));
                                $(this).css("border", "1px solid gold");
     
     
                                if ($(this).children().length > 0) return;
                                var payload = $(this);
     
                                // Build the list of items
                                // <p><b><a> these will be selectable
                                // remove remove all
     
                                var max = 15;
                                var counter = 0;
                                var arrayOfElements = [];
                                var contextElement = $(this);
     
                                while (!contextElement.hasClass("reContentArea")) {
                                    counter++;
                                    if (counter > max) break;
                                    var del = Function.createDelegate(contextElement, contextHandler);
                                    arrayOfElements.push({
                                        label: contextElement.get(0).tagName,
                                        action: del
                                    });
                                    contextElement = contextElement.parent();
                                }
     
                                $(this).contextPopup({
                                    title: 'CSS Tags',
                                    items: arrayOfElements
                                });
     
     
     
                            }, mouseleave: function () {
                                var border = $(this).attr("temp");
                                $(this).css("border", border);
                            }
                            });
                        };
                    });
     
                function contextHandler()
                {
                    $(this).replaceWith($(this).text());
                }
                    /* <![CDATA[ */
                     
                    var className = null;
                    var toRemove = false;
                    var handlersAdded = false;
     
                    function OnClientPasteHtml(sender, args)
                    {
                        var newContent = args.get_value();
                        newContent = newContent.replace(new RegExp("<b(\\s([^>])*?)?>", "ig"), "<strong$1>");
                        newContent = newContent.replace(new RegExp("</b(\\s([^>])*?)?>", "ig"), "</strong$1>");
                        newContent = newContent.replace(new RegExp("<i(\\s([^>])*?)?>", "ig"), "<em$1>");
                        newContent = newContent.replace(new RegExp("</i(\\s([^>])*?)?>", "ig"), "</em$1>");
                        var regex = /<([a-zA-Z]+) ?[^>]*?>\s*<\/\1>/gi;
                        newContent = newContent.replace(regex, "");
                         
                        args.set_value(newContent);
                    }
     
                    function OnClientCommandExecuting(editor, args) {
                     
                        var name = args.get_name();
                        var val = args.get_value();
                         
                        var commandName = args.get_commandName();
                        className = "re" + commandName;
                        if (editor.get_dialogOpener())
                        {
                            if (editor.get_dialogOpener()._container && !handlersAdded)
                            {
                                editor.get_dialogOpener()._container.add_show(AddRemoveCSSClass);
                                editor.get_dialogOpener()._container.add_close(AddRemoveCSSClass);
                                handlersAdded = true;
                            }
                        }
     
                        if (name == "MergeTags")
                        {
                            editor.pasteHtml(val);
                            //Cancel the further execution of the command as such a command does not exist in the editor command list
                            args.set_cancel(true);
                        }
     
                        if (commandName == "ToggleScreenMode") {
                            var containerWnd = GetRadWindow();
                            if (!editor.isFullScreen()) //if the editor is placed in fullscreen mode specify the needed content area width
                            {
                                $(editor.get_element()).addClass("sfFullScreenEditor");
                                if(containerWnd != null && !containerWnd.isMaximized())
                                {
                                    containerWnd.maximize();
                                    $(containerWnd.get_element()).addClass("sfWndToBeRestored");
                                }
                                editor.get_document().body.style.maxWidth = "640px";
                            }
                            else
                            {
                                $(editor.get_element()).removeClass("sfFullScreenEditor");
                                if(containerWnd != null && $(containerWnd.get_element()).hasClass("sfWndToBeRestored"))
                                {
                                    $(containerWnd.get_element()).removeClass("sfWndToBeRestored");
                                    containerWnd.restore();
                                }
                                editor.get_document().body.style.maxWidth = "100%";
                            }
                        }
     
                    }
     
                    function AddRemoveCSSClass(sender, args)
                    {
                        var popupElement = sender.get_popupElement();
                        if (!toRemove)
                        {
                            Sys.UI.DomElement.addCssClass(popupElement, className);
                        }
                        else
                        {
                            Sys.UI.DomElement.removeCssClass(popupElement, className);
                        }
                    }
     
                    function GetRadWindow()
                    {
                        var oWindow = null;
                        if (window.radWindow) oWindow = window.radWindow;
                        else if (window.frameElement.radWindow) oWindow = window.frameElement.radWindow;
                        return oWindow;
                    }
     
                     
                     
                    /* ]]> */
                     
                </script>
             
     
                    </div>
        <div id="ctl05_ctl00_ctl00_ctl00_ctl00_ctl00_editViewCommandBar" class="sfContentBlocksBtnAreaBottom">
                        <a onclick="return false;" id="ctl05_ctl00_ctl00_ctl00_ctl00_ctl00_editViewCommandBar_ctl00_ctl00_buttonLink" class="sfLinkBtn sfChange" href="javascript:void(0)" href="javascript:__doPostBack('ctl05$ctl00$ctl00$ctl00$ctl00$ctl00$editViewCommandBar$ctl00$ctl00$buttonLink','')"><span id="ctl05_ctl00_ctl00_ctl00_ctl00_ctl00_editViewCommandBar_ctl00_ctl00_buttonText" class="sfLinkBtnIn">Select from existing shared content</span></a><a onclick="return false;" id="ctl05_ctl00_ctl00_ctl00_ctl00_ctl00_editViewCommandBar_ctl01_ctl00_buttonLink" class="sfLinkBtn sfChange" href="javascript:void(0)" href="javascript:__doPostBack('ctl05$ctl00$ctl00$ctl00$ctl00$ctl00$editViewCommandBar$ctl01$ctl00$buttonLink','')"><span id="ctl05_ctl00_ctl00_ctl00_ctl00_ctl00_editViewCommandBar_ctl01_ctl00_buttonText" class="sfLinkBtnIn">Share this content across pages</span></a>
                    </div>
    </div>
    <div id="previewAndEditContentView" class="sfContentBlocksDesignerWrp">
        <div class="sfNeutral sfClearfix">
            <span id="ctl05_ctl00_ctl00_ctl00_ctl00_ctl00_sharedContentLabel"><strong>This content is shared.</strong><br /> Any changes will affect all pages where the content is used.</span>
            <a id="ctl05_ctl00_ctl00_ctl00_ctl00_ctl00_viewPagesLink" href="javascript:void(0);">View affected pages</a>
            <div id="editOutDatedContentView">
                <span class="sfFailure">
                    There is a newer version of this content
                    <a id="ctl05_ctl00_ctl00_ctl00_ctl00_ctl00_previewLink" href="javascript:void(0);">Preview</a>
                    or
                    <a id="ctl05_ctl00_ctl00_ctl00_ctl00_ctl00_updateLink" href="javascript:void(0);">Update</a>
                    with the newer version
                </span>
            </div>
     
            <div id="ctl05_ctl00_ctl00_ctl00_ctl00_ctl00_commandBar" class="sfContentBlocksBtnAreaTop">
                        <a onclick="return false;" id="ctl05_ctl00_ctl00_ctl00_ctl00_ctl00_commandBar_ctl00_ctl00_buttonLink" class="sfLinkBtn sfChange" href="javascript:void(0)" href="javascript:__doPostBack('ctl05$ctl00$ctl00$ctl00$ctl00$ctl00$commandBar$ctl00$ctl00$buttonLink','')"><span id="ctl05_ctl00_ctl00_ctl00_ctl00_ctl00_commandBar_ctl00_ctl00_buttonText" class="sfLinkBtnIn">Edit this content</span></a><a onclick="return false;" id="ctl05_ctl00_ctl00_ctl00_ctl00_ctl00_commandBar_ctl01_ctl00_buttonLink" class="sfLinkBtn sfChange" href="javascript:void(0)" href="javascript:__doPostBack('ctl05$ctl00$ctl00$ctl00$ctl00$ctl00$commandBar$ctl01$ctl00$buttonLink','')"><span id="ctl05_ctl00_ctl00_ctl00_ctl00_ctl00_commandBar_ctl01_ctl00_buttonText" class="sfLinkBtnIn">Unshare</span></a>
                    </div>
        </div>
        <div id="ctl05_ctl00_ctl00_ctl00_ctl00_ctl00_contentLabel" class="sfSharedContentPreviewWrp">
                         
                    </div>
        <div id="ctl05_ctl00_ctl00_ctl00_ctl00_ctl00_contentEditor">
                         
                 
                 
                <a onclick="return false;" id="ctl05_ctl00_ctl00_ctl00_ctl00_ctl00_contentEditor_ctl00_ctl00_expandLink" class="sfOptionalExpander" href="javascript:__doPostBack('ctl05$ctl00$ctl00$ctl00$ctl00$ctl00$contentEditor$ctl00$ctl00$expandLink','')"></a>
                <div id="ctl05_ctl00_ctl00_ctl00_ctl00_ctl00_contentEditor_ctl00_ctl00_expandableTarget" class="sfEditorWrp sfClearfix">
                             
                     
                    <div id="ctl05_ctl00_ctl00_ctl00_ctl00_ctl00_contentEditor_ctl00_ctl00_editControl" class="RadEditor Sitefinity reWrapper" style="height:370px;width:99%;">
                                <div id="ctl05_ctl00_ctl00_ctl00_ctl00_ctl00_contentEditor_ctl00_ctl00_editControl_dialogOpener" style="display:none;">
                                    <div id="ctl05_ctl00_ctl00_ctl00_ctl00_ctl00_contentEditor_ctl00_ctl00_editControl_dialogOpener_Window" style="display:none;">
                                        <div id="ctl05_ctl00_ctl00_ctl00_ctl00_ctl00_contentEditor_ctl00_ctl00_editControl_dialogOpener_Window_C">
     
                                        </div><input id="ctl05_ctl00_ctl00_ctl00_ctl00_ctl00_contentEditor_ctl00_ctl00_editControl_dialogOpener_Window_ClientState" name="ctl05_ctl00_ctl00_ctl00_ctl00_ctl00_contentEditor_ctl00_ctl00_editControl_dialogOpener_Window_ClientState" type="hidden" />
                                    </div><input id="ctl05_ctl00_ctl00_ctl00_ctl00_ctl00_contentEditor_ctl00_ctl00_editControl_dialogOpener_ClientState" name="ctl05_ctl00_ctl00_ctl00_ctl00_ctl00_contentEditor_ctl00_ctl00_editControl_dialogOpener_ClientState" type="hidden" />
                                </div><table id="ctl05_ctl00_ctl00_ctl00_ctl00_ctl00_contentEditor_ctl00_ctl00_editControlWrapper" cellpadding="0" cellspacing="0" style="table-layout:auto;width:100%;height:370px;">
                                    <tbody>
                                        <tr>
                                            <td class="reWrapper_corner reCorner_top_left"> </td><td class="reWrapper_center reCenter_top" colspan="3"> </td><td class="reWrapper_corner reCorner_top_right"> </td>
                                        </tr><tr>
                                            <td class="reLeftVerticalSide" rowspan="4"> </td><td rowspan="4" id="ctl05_ctl00_ctl00_ctl00_ctl00_ctl00_contentEditor_ctl00_ctl00_editControlLeft" class="reTlbVertical"></td><td id="ctl05_ctl00_ctl00_ctl00_ctl00_ctl00_contentEditor_ctl00_ctl00_editControlTop" class="reToolCell" style="width:100%;"><div class="Sitefinity reToolbarWrapper">
                                                <ul class="reToolbar Sitefinity">
                                                    <li class="reGrip grip_first"> </li><li><a title="Less formatting options" class="reTool" href="#"><span class="ToggleAdvancedToolbars"> </span></a></li><li class="reSeparator"> </li><li><a title="Numbered List" class="reTool" href="#"><span class="InsertOrderedList"> </span></a></li><li><a title="Bullet List" class="reTool" href="#"><span class="InsertUnorderedList"> </span></a></li><li class="reSeparator"> </li><li><a title="Hyperlink Manager (CTRL+K)" class="reTool" href="#"><span class="LinkManager"> </span></a></li><li><a title="Remove Link (CTRL+SHIFT+K)" class="reTool" href="#"><span class="Unlink"> </span></a></li><li><a title="Image Manager (CTRL+G)" class="reTool" href="#"><span class="ImageManager"> </span></a></li><li class="reSeparator"> </li><li><a title="AJAX Spellchecker" class="reTool" href="#"><span class="AjaxSpellCheck"> </span></a></li><li class="reSeparator"> </li><li><a title="Paste from Word" class="reTool" href="#"><span class="PasteFromWord"> </span></a></li><li class="reSeparator"> </li><li><a title="Apply CSS Class" class="reDropdown" href="#"><span class="ApplyClass" style="width:80px;">Apply CSS Class</span></a></li><li><a title="My Custom Tool From Resource" class="reTool" href="#"><span class="CustomTool"> </span></a></li><li><a title="Remove Empty Elements" class="reTool" href="#"><span class="RemoveEmpty"> </span></a></li><li class="reSeparator"> </li><li class="reGrip grip_last"> </li>
                                                </ul><ul class="reToolbar Sitefinity">
                                                    <li class="reGrip grip_first"> </li><li class="reSeparator"> </li><li><a title="Align Left" class="reTool" href="#"><span class="JustifyLeft"> </span></a></li><li><a title="Align Right" class="reTool" href="#"><span class="JustifyRight"> </span></a></li><li><a title="Align Center" class="reTool" href="#"><span class="JustifyCenter"> </span></a></li><li><a title="Justify" class="reTool" href="#"><span class="JustifyFull"> </span></a></li><li class="reSeparator"> </li><li><a title="Indent" class="reTool" href="#"><span class="Indent"> </span></a></li><li><a title="Outdent" class="reTool" href="#"><span class="Outdent"> </span></a></li><li class="reGrip grip_last"> </li>
                                                </ul><ul class="reToolbar Sitefinity">
                                                    <li class="reGrip grip_first"> </li><li><a title="Font Name (CTRL+SHIFT+F)" class="reDropdown" href="#"><span class="FontName" style="width:80px;">Font Name</span></a></li><li class="reSeparator"> </li><li><a title="Real font size" class="reDropdown" href="#"><span class="RealFontSize" style="width:34px;">Real font size</span></a></li><li class="reSeparator"> </li><li><a title="Paragraph Style" class="reDropdown" href="#"><span class="FormatBlock" style="width:80px;">Paragraph Style</span></a></li><li class="reSeparator"> </li><li><a title="Foreground Color" class="reTool reSplitButton" href="#"><span class="ForeColor"> </span><span class="split_arrow"> </span></a></li><li><a title="Background Color" class="reTool reSplitButton" href="#"><span class="BackColor"> </span><span class="split_arrow"> </span></a></li><li class="reSeparator"> </li><li><a title="Media Manager" class="reTool" href="#"><span class="MediaManager"> </span></a></li><li><a title="Flash Manager" class="reTool" href="#"><span class="FlashManager"> </span></a></li><li><a title="Document Manager" class="reTool" href="#"><span class="DocumentManager"> </span></a></li><li class="reGrip grip_last"> </li>
                                                </ul><ul class="reToolbar Sitefinity">
                                                    <li class="reGrip grip_first"> </li><li><a title="New Paragraph" class="reTool" href="#"><span class="InsertParagraph"> </span></a></li><li><a title="Insert Table" class="reTool reSplitButton" href="#"><span class="InsertTable"> </span><span class="split_arrow"> </span></a></li><li><a title="Insert Symbol" class="reTool reSplitButton" href="#"><span class="InsertSymbol"> </span><span class="split_arrow"> </span></a></li><li><a title="Horizontal Rule" class="reTool" href="#"><span class="InsertHorizontalRule"> </span></a></li><li class="reSeparator"> </li><li><a title="SuperScript" class="reTool" href="#"><span class="Superscript"> </span></a></li><li><a title="Subscript" class="reTool" href="#"><span class="Subscript"> </span></a></li><li class="reSeparator"> </li><li><a title="Format Stripper" class="reTool reSplitButton" href="#"><span class="FormatStripper"> </span><span class="split_arrow"> </span></a></li><li class="reSeparator"> </li><li><a title="Find And Replace (CTRL+F)" class="reTool" href="#"><span class="FindAndReplace"> </span></a></li><li><a title="Print (CTRL+P)" class="reTool" href="#"><span class="Print"> </span></a></li><li><a title="Toggle Full Screen Mode" class="reTool" href="#"><span class="ToggleScreenMode"> </span></a></li><li class="reGrip grip_last"> </li>
                                                </ul>
                                            </div></td><td rowspan="4" id="ctl05_ctl00_ctl00_ctl00_ctl00_ctl00_contentEditor_ctl00_ctl00_editControlRight" class="reTlbVertical"></td><td rowspan="4" class="reRightVerticalSide"> </td>
                                        </tr><tr>
                                            <td valign="top" id="ctl05_ctl00_ctl00_ctl00_ctl00_ctl00_contentEditor_ctl00_ctl00_editControlCenter" class="reContentCell" style="height:100%;"><label for="ctl05_ctl00_ctl00_ctl00_ctl00_ctl00_contentEditor_ctl00_ctl00_editControlContentHiddenTextarea" style="display:none;">RadEditor hidden textarea</label><textarea id="ctl05_ctl00_ctl00_ctl00_ctl00_ctl00_contentEditor_ctl00_ctl00_editControlContentHiddenTextarea" name="ctl05$ctl00$ctl00$ctl00$ctl00$ctl00$contentEditor$ctl00$ctl00$editControl" rows="4" cols="20" style="display:none;"></textarea></td>
                                        </tr><tr>
                                            <td class="reToolZone"><table cellpadding="0" cellspacing="0" id="ctl05_ctl00_ctl00_ctl00_ctl00_ctl00_contentEditor_ctl00_ctl00_editControl_BottomTable" style="width:100%;">
                                                <tbody>
                                                    <tr>
                                                        <td class="reEditorModesCell"><div class="reEditorModes" id="ctl05_ctl00_ctl00_ctl00_ctl00_ctl00_contentEditor_ctl00_ctl00_editControl_ModesWrapper">
                                                            <ul>
                                                                <li><a href="javascript:void(0);" title="Design" class="reMode_design reMode_selected"><span>Design</span></a></li><li><a href="javascript:void(0);" title="HTML" class="reMode_html"><span>HTML</span></a></li>
                                                            </ul>
                                                        </div></td><td class="reBottomZone" id="ctl05_ctl00_ctl00_ctl00_ctl00_ctl00_contentEditor_ctl00_ctl00_editControlBottom"> </td><td valign="bottom" align="right"> </td>
                                                    </tr>
                                                </tbody>
                                            </table><noscript>
                                                <p>RadEditor - please enable JavaScript to use the rich text editor.</p>
                                            </noscript></td>
                                        </tr><tr>
                                            <td id="ctl05_ctl00_ctl00_ctl00_ctl00_ctl00_contentEditor_ctl00_ctl00_editControlModule" class="reToolZone"></td>
                                        </tr><tr>
                                            <td class="reWrapper_corner reCorner_bottom_left"> </td><td class="reWrapper_center reCenter_bottom" colspan="3"> </td><td class="reWrapper_corner reCorner_bottom_right"> </td>
                                        </tr>
                                    </tbody>
                                </table><input id="ctl05_ctl00_ctl00_ctl00_ctl00_ctl00_contentEditor_ctl00_ctl00_editControl_ClientState" name="ctl05_ctl00_ctl00_ctl00_ctl00_ctl00_contentEditor_ctl00_ctl00_editControl_ClientState" type="hidden" />
                            </div>
                    TESTTT 
                     
                     
                     
                 
                        </div>
                 
     
                 
     
         
     
             
            <script type="text/javascript" src="/js/jquery.contextmenu.js"></script>
             
                 
                <script type="text/javascript">
                    $(document).ready(function () {
                        Telerik.Web.UI.Editor.CommandList["RemoveEmpty"] = function (commandName, editor, args) {
                             
                             
                                $('p,h1,h2,h3,h4,h5,h6,a', '.reContentArea').filter(function () {
                                    return $.trim($(this).text()) === '';
                                }).remove();
                        };
     
                        Telerik.Web.UI.Editor.CommandList["CustomTool"] = function (commandName, editor, args) {
                            $('.reContentArea *').live({ mouseenter: function () {
     
                                $(this).attr("temp", $(this).css("border"));
                                $(this).css("border", "1px solid gold");
     
     
                                if ($(this).children().length > 0) return;
                                var payload = $(this);
     
                                // Build the list of items
                                // <p><b><a> these will be selectable
                                // remove remove all
     
                                var max = 15;
                                var counter = 0;
                                var arrayOfElements = [];
                                var contextElement = $(this);
     
                                while (!contextElement.hasClass("reContentArea")) {
                                    counter++;
                                    if (counter > max) break;
                                    var del = Function.createDelegate(contextElement, contextHandler);
                                    arrayOfElements.push({
                                        label: contextElement.get(0).tagName,
                                        action: del
                                    });
                                    contextElement = contextElement.parent();
                                }
     
                                $(this).contextPopup({
                                    title: 'CSS Tags',
                                    items: arrayOfElements
                                });
     
     
     
                            }, mouseleave: function () {
                                var border = $(this).attr("temp");
                                $(this).css("border", border);
                            }
                            });
                        };
                    });
     
                function contextHandler()
                {
                    $(this).replaceWith($(this).text());
                }
                    /* <![CDATA[ */
                     
                    var className = null;
                    var toRemove = false;
                    var handlersAdded = false;
     
                    function OnClientPasteHtml(sender, args)
                    {
                        var newContent = args.get_value();
                        newContent = newContent.replace(new RegExp("<b(\\s([^>])*?)?>", "ig"), "<strong$1>");
                        newContent = newContent.replace(new RegExp("</b(\\s([^>])*?)?>", "ig"), "</strong$1>");
                        newContent = newContent.replace(new RegExp("<i(\\s([^>])*?)?>", "ig"), "<em$1>");
                        newContent = newContent.replace(new RegExp("</i(\\s([^>])*?)?>", "ig"), "</em$1>");
                        var regex = /<([a-zA-Z]+) ?[^>]*?>\s*<\/\1>/gi;
                        newContent = newContent.replace(regex, "");
                         
                        args.set_value(newContent);
                    }
     
                    function OnClientCommandExecuting(editor, args) {
                     
                        var name = args.get_name();
                        var val = args.get_value();
                         
                        var commandName = args.get_commandName();
                        className = "re" + commandName;
                        if (editor.get_dialogOpener())
                        {
                            if (editor.get_dialogOpener()._container && !handlersAdded)
                            {
                                editor.get_dialogOpener()._container.add_show(AddRemoveCSSClass);
                                editor.get_dialogOpener()._container.add_close(AddRemoveCSSClass);
                                handlersAdded = true;
                            }
                        }
     
                        if (name == "MergeTags")
                        {
                            editor.pasteHtml(val);
                            //Cancel the further execution of the command as such a command does not exist in the editor command list
                            args.set_cancel(true);
                        }
     
                        if (commandName == "ToggleScreenMode") {
                            var containerWnd = GetRadWindow();
                            if (!editor.isFullScreen()) //if the editor is placed in fullscreen mode specify the needed content area width
                            {
                                $(editor.get_element()).addClass("sfFullScreenEditor");
                                if(containerWnd != null && !containerWnd.isMaximized())
                                {
                                    containerWnd.maximize();
                                    $(containerWnd.get_element()).addClass("sfWndToBeRestored");
                                }
                                editor.get_document().body.style.maxWidth = "640px";
                            }
                            else
                            {
                                $(editor.get_element()).removeClass("sfFullScreenEditor");
                                if(containerWnd != null && $(containerWnd.get_element()).hasClass("sfWndToBeRestored"))
                                {
                                    $(containerWnd.get_element()).removeClass("sfWndToBeRestored");
                                    containerWnd.restore();
                                }
                                editor.get_document().body.style.maxWidth = "100%";
                            }
                        }
     
                    }
     
                    function AddRemoveCSSClass(sender, args)
                    {
                        var popupElement = sender.get_popupElement();
                        if (!toRemove)
                        {
                            Sys.UI.DomElement.addCssClass(popupElement, className);
                        }
                        else
                        {
                            Sys.UI.DomElement.removeCssClass(popupElement, className);
                        }
                    }
     
                    function GetRadWindow()
                    {
                        var oWindow = null;
                        if (window.radWindow) oWindow = window.radWindow;
                        else if (window.frameElement.radWindow) oWindow = window.frameElement.radWindow;
                        return oWindow;
                    }
     
                     
                     
                    /* ]]> */
                     
                </script>
             
     
                    </div>
    </div>
     
    <span id="ctl05_ctl00_ctl00_ctl00_ctl00_ctl00_clientLabelManager"></span>
     
    <script type="text/javascript">
        $("body").addClass("sfContentBlockDesigner");
    </script>
                </div>
            </div><div id="ctl05_ctl00_ctl00_advancedModeView">
                 
            <div id="ctl05_ctl00_ctl00_propertyGrid">
                     
     
    <div class="sfPropsToolsWrapper">
    <div id="expandCollapsePanel">
        <a onclick="return false;" id="ctl05_ctl00_ctl00_propertyGrid_ctl00_ctl00_collapseAllButton" href="javascript:__doPostBack('ctl05$ctl00$ctl00$propertyGrid$ctl00$ctl00$collapseAllButton','')">Collapse all</a>
        |
        <a onclick="return false;" id="ctl05_ctl00_ctl00_propertyGrid_ctl00_ctl00_expandAllButton" href="javascript:__doPostBack('ctl05$ctl00$ctl00$propertyGrid$ctl00$ctl00$expandAllButton','')">Expand all</a>
    </div>
     
    <div id="breadcrumbDiv" style="display: none; ">
        <div id="ctl05_ctl00_ctl00_propertyGrid_ctl00_ctl00_breadcrumb">
                        <input id="ctl05_ctl00_ctl00_propertyGrid_ctl00_ctl00_breadcrumb_ClientState" name="ctl05_ctl00_ctl00_propertyGrid_ctl00_ctl00_breadcrumb_ClientState" type="hidden" />
                    </div>
    </div>
     
    <div id="displayModesPanel">
        <div id="ctl05_ctl00_ctl00_propertyGrid_ctl00_ctl00_propertyViewsToolbar" class="RadToolBar RadToolBar_Horizontal RadToolBar_Sitefinity RadToolBar_Sitefinity_Horizontal sfPropertyViews" style="z-index:9000;">
                        <div class="rtbOuter">
                            <div class="rtbMiddle">
                                <div class="rtbInner">
                                    <ul class="rtbUL">
                                        <li class="rtbItem rtbBtn  rtbChecked"><a title="Alphabetically" class="sfPropAlphabetically rtbWrap" href="#"><span class="rtbOut"><span class="rtbMid"><span class="rtbIn"><span class="rtbText">Alphabetically</span></span></span></span></a></li><li class="rtbItem rtbBtn "><a title="Categorized" class="sfPropCategorized rtbWrap" href="#"><span class="rtbOut"><span class="rtbMid"><span class="rtbIn"><span class="rtbText">Categorized</span></span></span></span></a></li>
                                    </ul>
                                </div>
                            </div>
                        </div><input id="ctl05_ctl00_ctl00_propertyGrid_ctl00_ctl00_propertyViewsToolbar_ClientState" name="ctl05_ctl00_ctl00_propertyGrid_ctl00_ctl00_propertyViewsToolbar_ClientState" type="hidden" />
                    </div>
    </div>
    </div>
    <div class="sfPropertiesListWrapper">
        <ul id="screens">
            <li id="level0" class="screen">
                <ul id="propertyGridLevel0"></ul>
            </li>
        </ul>
    </div>
    <ul id="ctl05_ctl00_ctl00_propertyGrid_ctl00_ctl00_propertyGridBinder_BinderContainer1_clientTemplate" class="sys-template">
                         
                <li sys:class="{{ 'sf_item' + CategoryNameSafe}}">
                    <div class="sf_categoryElement" style="display:none;">
                        <a id="categoryNameLink" class="sf_categoryLink" href="#">{{CategoryName}}</a>
                    </div>
                    <div sys:class="{{ 'sf_propertyElement ' + ElementCssClass }}">
                        <label for="PropertyValue">{{PropertyName}}</label>
                        <input type="text" id="PropertyValue" class="sf_propertyInput" sys:value="{{PropertyValue}}" />
                        <a class="sf_complexProperty selectCommand sfChange sfLinkBtn" href="#" style="display:none;"><strong class="sfLinkBtnIn">{{PropertyName}}</strong></a>
                    </div>
                </li>
             
                    </ul>
    <div id="ctl05_ctl00_ctl00_propertyGrid_ctl00_ctl00_propertyGridLoadingPanel" class="RadAjax RadAjax_Sitefinity" style="display:none;">
                        <div class="raDiv">
                            Loading...
     
                        </div><div class="raColor">
     
                        </div>
                    </div>
     
    <script type="text/javascript">
        $("body").addClass("sfSelectorDialog");
    </script>
     
                </div>
         
            </div><input id="ctl05_ctl00_ctl00_modesMultiPage_ClientState" name="ctl05_ctl00_ctl00_modesMultiPage_ClientState" type="hidden" />
        </div>
     
    <div class="sfButtonArea sfSelectorBtns">
        <!-- the Advanced/Simple button replaces the TabStrip -->
        <div id="ctl05_ctl00_ctl00_pnlAdvancedSimpleModeSelector" class="sfModeSwitcher">
             
            <a onclick="return false;" id="ctl05_ctl00_ctl00_advancedModeButton" class="sfLinkBtn" href="javascript:__doPostBack('ctl05$ctl00$ctl00$advancedModeButton','')">
                <strong class="sfLinkBtnIn">Advanced</strong>
            </a>
            <a onclick="return false;" id="ctl05_ctl00_ctl00_simpleModeButton" class="sfLinkBtn" href="javascript:__doPostBack('ctl05$ctl00$ctl00$simpleModeButton','')">
                <strong class="sfLinkBtnIn">Simple</strong>
            </a>
         
        </div>
        <a href="javascript:void(0)" id="ctl05_ctl00_ctl00_saveButton" class="sfLinkBtn sfSave">
            <strong class="sfLinkBtnIn">
                Save
            </strong>
        </a>
        or
        <a href="javascript:void(0)" id="ctl05_ctl00_ctl00_cancelButton" class="sfCancel">
            Cancel
        </a>
        <a href="javascript:void(0)" id="ctl05_ctl00_ctl00_okButton" class="sfLinkBtn sfSave" style="display:none;">
            <strong class="sfLinkBtnIn">
                OK
            </strong>
        </a>
    </div>
    and in the resources I see CustomStyles included in these 2 places
    Sys.Application.add_init(function() { 
      $create(Telerik.Web.UI.RadEditor, {"_localization":{"addcustomcolor":"Add Custom Color...","addcustomhexcolor":"Add Hex Color...","addcustomwordsuccess":"successfully added to dictionary","addtodictionary":"Add to dictionary","askwordcleaning":"The content you are trying to paste has MS Word formatting. Would you like to clean it?","cancelbutton":"Cancel","canceltable":"Cancel","cellproperties":"Cell Properties","cellwarning":"Please, select a cell to set its properties!","changewordstring":"Change Manually","class":"CSS Class","clearclass":"Clear Class","clearallhtmltags":"All HTML Tags","clearcssformatting":"Cascading Style Sheets","clearfonttags":"Font Tags","clearformatting":"Clear Formatting","clearspantags":"Span Tags","clearstyle":"Clear Style","clearwordformatting":"Microsoft Word Formatting","correctspelling":"Spelling Changes","createlink":"Create Link","dialogtoolbar":"Dialogs","dropdowntoolbar":"Dropdowns","exceededhtmllength":"Html length exceeded.","exceededtextlength":"Text length exceeded.","enhancededittoolbar":"Enhanced Edit","fileopen":"Open file..","filesaveas":"Save as...","formbutton":"Button","formcheckbox":"Checkbox","formform":"Form","formhidden":"Hidden","formpassword":"Password","formradio":"Radio button","formreset":"Reset","formselect":"Select","formsubmit":"Submit","formtext":"Textbox","formtextarea":"Textarea","htmlmode":"HTML Mode","ignoreallstring":"Ignore All","ignorestring":"Ignore","imagemapwarning":"Please, select an image to set its image map properties!","indenthtml":"Indent HTML","inserttoolbar":"Insert","maintoolbar":"Main Toolbar","morethanoncemessage":"This word occurs more than once in the text. Would you like to replace all instances?","movecommand":"Move","nospellingmistakes":"No mistakes found.","nosuggestions":"(no suggestions)","promptcolor":"Please, provide the custom color HEX value:","radeditordesignmode":"Design","radeditorhtmlmode":"HTML","radeditorpreviewmode":"Preview","reducetheconentlength":"Reduce the content length.","resizecommand":"Resize Object","sethtml":"Set HTML","showtoolbartooltip":"Show toolbar","spellcheckcomplete":"The Spell Check is complete!","spellcheckend":"Finish spellchecking","spellingchange":"Spelling Change","spellinginprogress":"Spell checking in progress...","spellingmode":"Spell checking mode. Misspelled words are highlighted in yellow.","table":"Table","tabletoolbar":"Table","tablewarning":"Please, select a table to set its properties!","toolbarcaption":"RadEditor Toolbar","toolnotsupportedbynetscape":"This tool is not supported by Mozilla/Netscape browsers.","typing":"Typing...","undodisabledmessage":"You cannot undo further while in spellcheck mode. Please finish spellchecking first.","updatebutton":"Update","usectrlc":"Please use Ctrl+C to Copy","usectrlv":"Please use Ctrl+V to Paste","usectrlx":"Please use Ctrl+X to Cut","aboutdialog":"About RadEditor","absoluteposition":"Set Absolute Position","ajaxspellcheck":"AJAX Spellchecker","applyclass":"Apply CSS Class","backcolor":"Background Color","bold":"Bold","csdialog":"Compliance Results","converttolower":"Convert to lower case","converttoupper":"Convert to upper case","copy":"Copy","cut":"Cut","decreasesize":"Decrease Size","deletecell":"Delete Cell","deletecolumn":"Delete Column","deleterow":"Delete Row","deletetable":"Delete Table","documentmanager":"Document Manager","enter":"Enter Pressed","findandreplace":"Find And Replace","flashmanager":"Flash Manager","fontname":"Font Name","fontsize":"Size","forecolor":"Foreground Color","formatblock":"Paragraph Style","formatcodeblock":"Format Code Block","formatstripper":"Format Stripper","help":"Help","imageeditor":"Image Editor","imagemanager":"Image Manager","imagemapdialog":"Image Map Editor","increasesize":"Increase Size","indent":"Indent","insertanchor":"Insert Anchor","insertcolumnleft":"Insert Column to the Left","insertcolumnright":"Insert Column to the Right","insertcustomlink":"Custom Links","insertdate":"Insert Date","insertemaillink":"Insert Email Link","insertformbutton":"Insert Button","insertformcheckbox":"Insert Checkbox","insertformelement":"Insert Form Element","insertformform":"Insert Form","insertformhidden":"Insert Hidden","insertformpassword":"Insert Password","insertformradio":"Insert Radio","insertformreset":"Insert Reset","insertformselect":"Insert Select","insertformsubmit":"Insert Submit","insertformtext":"Insert Textbox","insertformtextarea":"Insert Textarea","insertgroupbox":"Insert Groupbox","inserthorizontalrule":"Horizontal Rule","insertorderedlist":"Numbered List","insertparagraph":"New Paragraph","insertrowabove":"Insert Row Above","insertrowbelow":"Insert Row Below","insertsnippet":"Insert Code Snippet","insertsymbol":"Insert Symbol","inserttable":"Insert Table","inserttime":"Insert Time","insertunorderedlist":"Bullet List","italic":"Italic","justifycenter":"Align Center","justifyfull":"Justify","justifyleft":"Align Left","justifynone":"Remove alignment","justifyright":"Align Right","linkmanager":"Hyperlink Manager","insertlink":"Insert Link","mediamanager":"Media Manager","mergecolumns":"Merge Cells Horizontally","mergerows":"Merge Cells Vertically","modulemanager":"Module Manager","outdent":"Outdent","pageproperties":"Page Properties","paste":"Paste","pasteashtml":"Paste As Html","pastehtml":"Paste Html","pastefromword":"Paste from Word","pastefromwordnofontsnosizes":"Paste from Word, strip font","pasteplaintext":"Paste Plain Text","pastestrip":"Paste Options","print":"Print","realfontsize":"Real font size","redo":"Redo","repeatlastcommand":"Repeat Last Command","selectall":"Select All","setcellproperties":"Cell Properties","setimageproperties":"Properties...","insertimage":"Insert Image","setlinkproperties":"Properties...","settableproperties":"Table Properties","silverlightmanager":"Silverlight Manager","spellcheck":"Spellchecker","splitcell":"Split Cell","splitcellhorizontal":"Split Cell Horizontally","strikethrough":"Strikethrough","stripall":"Strip All Formatting","stripcss":"Strip Css Formatting","stripfont":"Strip Font Elements","stripspan":"Strip Span Elements","stripword":"Strip Word Formatting","stylebuilder":"Style Builder","subscript":"Subscript","superscript":"SuperScript","tablewizard":"Table Wizard","templatemanager":"Template Manager","toggledocking":"Dock all Floating Toolbars/Modules","togglescreenmode":"Toggle Full Screen Mode","toggletableborder":"Show/Hide Border","togglefloatingtoolbar":"Toggle Floating Toolbar","trackchangesdialog":"Track Changes","underline":"Underline","undo":"Undo","unlink":"Remove Link","xhtmlvalidator":"XHTML Validator","zoom":"Zoom","blank":"New Window","media":"Media Pane","parent":"Parent Window","search":"Search Pane","self":"Same Window","top":"Browser Window","action":"Action","align":"Alignment","alt":"ToolTip","bgcolor":"Background","border":"Border Width","bordercolor":"Border color","cellpadding":"CellPadding","cellspacing":"CellSpacing","classname":"Classname","cols":"Columns","doctype":"Select Doctype","dominspectorremoveelement":"RemoveElement","expandvalidator":"Expand Report Pane","height":"Height","href":"URL","id":"Id","name":"Name","nodeinspectorinvalidvalue":"Invalid value. Please enter a number.","nodeinspectorselectedelement":"The selected element is ","nowrap":"Nowrap","radeditordominspector":"Tag Inspector","radeditorhtmlinspector":"Real-Time HTML View","radeditornodeinspector":"Properties Inspector","radeditorstatistics":"Statistics","radeditorxhtmlvalidator":"XHTML Validator","rows":"Rows","statisticscharacters":"Characters:","statisticswords":"Words:","target":"Target","title":"ToolTip","validatexhtml":"Validate XHTML","valign":"Vertical Alignment","value":"Value","width":"Width"},"ajaxSpellCheckScriptReference":"/WebResource.axd?d=cBs2NBHP9UwTEVxzVUFI9DUXhDj7pCpqu5xZBu3lddkSCX8mxAcMPed7MrGCq_Llgoa7XVCkP3Z2oHx9UV9oFlyZl2Ml2vfAkKTI2bMLHNG141st8i766OggUQT03datRN28SNuQf78ZVFZy9RlQcQ2&t=634463120776860852","clientStateFieldID":"ctl05_ctl00_ctl00_ctl00_ctl00_ctl00_htmlEditor_ctl00_ctl00_editControl_ClientState","contentAreaCssFile":"/WebResource.axd?d=EwiD6feqXksi4ha2SThTaQAoEjoqO0IbHmMudT4T5yEtz-PoxPH5ulTPYEk0xvaSH_DIdxv81SCzuIfccEIF8WBPtbda3BlcI6p3vDZouw8meYnovv05Q9064wkZaAebqfDtJbubCv3V1RHj1dYPBwOKRcl3xq0-p14k1j-ITcRrjE8BIQUzIE5w1-a7JEuo0&t=634463120775080852","contentAreaMode":2,"contextMenusJSON":[{"tagName":"TABLE","tools":[{"name":"ToggleTableBorder","text":"Show/Hide Border"},{"name":"SetTableProperties","text":"Table Properties"},{"name":"DeleteTable","text":"Delete Table"}]},{"tagName":"TD","tools":[{"name":"InsertRowAbove","text":"Insert Row Above"},{"name":"InsertRowBelow","text":"Insert Row Below"},{"name":"DeleteRow","text":"Delete Row"},{"name":"InsertColumnLeft","text":"Insert Column to the Left"},{"name":"InsertColumnRight","text":"Insert Column to the Right"},{"name":"DeleteColumn","text":"Delete Column"},{"name":"MergeColumns","text":"Merge Cells Horizontally"},{"name":"MergeRows","text":"Merge Cells Vertically"},{"name":"SplitCellHorizontal","text":"Split Cell Horizontally"},{"name":"SplitCell","text":"Split Cell"},{"name":"DeleteCell","text":"Delete Cell"},{"name":"SetCellProperties","text":"Cell Properties"},{"name":"SetTableProperties","text":"Table Properties"}]},{"tagName":"IMG","tools":[{"name":"SetImageProperties","text":"Properties..."},{"name":"ImageMapDialog","text":"Image Map Editor"}]},{"tagName":"A","tools":[{"name":"SetLinkProperties","text":"Properties..."},{"name":"Unlink","text":"Remove Link"}]},{"tools":[{"name":"Cut","text":"Cut"},{"name":"Copy","text":"Copy"},{"name":"Paste","text":"Paste"},{"name":"PasteFromWord","text":"Paste from Word"},{"name":"PastePlainText","text":"Paste Plain Text"},{"name":"PasteAsHtml","text":"Paste As Html"},{"name":"PasteHtml","text":"Paste Html"}]}],"cssClasses":[["","Clear Class"],[".test1","Greenyellow"],[".test2","fuchsia"]],"cssFiles":["/Styles/CustomStyles.css"],"editModes":3,"enableUndoRedo":false,"language":"en","modulesJSON":[{"name":"RadEditorStatistics","visible":false,"attributes":{"dockingzone":"Bottom"}},{"name":"RadEditorDomInspector","visible":false},{"name":"RadEditorNodeInspector","visible":false},{"name":"RadEditorHtmlInspector","visible":false}],"mozillaFlashOverlayImage":"/WebResource.axd?d=qlTCTLeakSg32wqVeyFmUTuiMtNDW4OC4W-iufQDqqE5-Yqr5HEqhu7HHDsFA2KG8_8XVePbSQj0i8TO3Hm2MVeaTlnaQyTaoPvlglGNmWinFyeel9gzniyGXV5vOtfeiPzrb2f6bDGbuyu00G49ugp-MWD_F0HPI6D5P26vWGM1&t=634463120776860852","newLineMode":2,"skin":"Sitefinity","spellCheckJSON":{"configuration":"GnArAUs9MQMVAgpTFxcbXgBkDkohEGM1VFU4KQd+AxNdJg8+e3MKLF4MJjR1EUYCHQcNI3YsOUEVKAFSFwUbVzIQAUoqTxQ1VAsFHR5TOSpqeRcgdHABVlknGwdHTkokGU0VX3g/BzYSOAVTEQYhbCkSIw8kOH8FZlYJHS91HxtaJSlld2IoMFs3BDdEOGwKHlkvKHZKNTYtAwZiICsbbDJNAW0kK0EVYSAjEhxTNShqJi5tYhYkFmM4IRhFEVkYGloBGExICAY6LDR9IHADTDNPAXIQOmNzeTEFOxwNF3BuJBsmSXA3HWsNMSd0T0YuEWIjPE4XGAIWKCRDEBcTTDNPAXMXK0kfViAeZw==","url":"Telerik.Web.UI.SpellCheckHandler.axd","language":"en-US"},"stripFormattingOptions":370,"tableLayoutCssFile":"","toolAdapterType":"Telerik.Web.UI.Editor.DefaultToolAdapter","toolJSON":[{"tag":"MainToolbar","tools":[{"name":"ToggleAdvancedToolbars","text":"Less formatting options"},{"type":8},{"name":"InsertOrderedList"},{"name":"InsertUnorderedList"},{"type":8},{"name":"LinkManager","shortCut":"CTRL+K"},{"name":"Unlink","shortCut":"CTRL+SHIFT+K"},{"name":"ImageManager","shortCut":"CTRL+G"},{"type":8},{"name":"AjaxSpellCheck"},{"type":8},{"name":"PasteFromWord"},{"type":8},{"attributes":{"popupclassname":"reApplyClass","clearclasstext":"Clear Class"},"name":"ApplyClass","type":2},{"name":"CustomTool"},{"name":"RemoveEmpty","text":"Remove Empty Elements"},{"type":8}]},{"tools":[{"type":8},{"name":"JustifyLeft"},{"name":"JustifyRight"},{"name":"JustifyCenter"},{"name":"JustifyFull"},{"type":8},{"name":"Indent"},{"name":"Outdent"}]},{"tools":[{"name":"FontName","shortCut":"CTRL+SHIFT+F","type":2},{"type":8},{"attributes":{"popupwidth":"60px"},"name":"RealFontSize","type":2},{"type":8},{"name":"FormatBlock","type":2},{"type":8},{"attributes":{"popupclassname":"reColorPicker","itemsperrow":"10","sizetofit":"true"},"name":"ForeColor","type":4},{"attributes":{"popupclassname":"reColorPicker","itemsperrow":"10","sizetofit":"true"},"name":"BackColor","type":4},{"type":8},{"name":"MediaManager"},{"name":"FlashManager"},{"name":"DocumentManager"}]},{"tools":[{"name":"InsertParagraph"},{"attributes":{"popupclassname":"reInsertTable","itemsperrow":"8","sizetofit":"true"},"name":"InsertTable","type":16,"tools":[{"name":"TableWizard","text":"Table Wizard"},{"name":"InsertRowAbove","text":"Insert Row Above"},{"name":"InsertRowBelow","text":"Insert Row Below"},{"name":"DeleteRow","text":"Delete Row"},{"name":"InsertColumnLeft","text":"Insert Column to the Left"},{"name":"InsertColumnRight","text":"Insert Column to the Right"},{"name":"DeleteColumn","text":"Delete Column"},{"name":"MergeColumns","text":"Merge Cells Horizontally"},{"name":"MergeRows","text":"Merge Cells Vertically"},{"name":"SplitCellHorizontal","text":"Split Cell Horizontally"},{"name":"SplitCell","text":"Split Cell"},{"name":"DeleteCell","text":"Delete Cell"},{"name":"SetTableProperties","text":"Table Properties"}]},{"attributes":{"itemsperrow":"8","sizetofit":"true","popupclassname":"reInsertSymbol"},"name":"InsertSymbol","type":4},{"name":"InsertHorizontalRule"},{"type":8},{"name":"Superscript"},{"name":"Subscript"},{"type":8},{"attributes":{"sizetofit":"true"},"name":"FormatStripper","type":16,"tools":[{"name":"StripAll","text":"Strip All Formatting"},{"name":"StripCss","text":"Strip Css Formatting"},{"name":"StripFont","text":"Strip Font Elements"},{"name":"StripSpan","text":"Strip Span Elements"},{"name":"StripWord","text":"Strip Word Formatting"}]},{"type":8},{"name":"FindAndReplace","shortCut":"CTRL+F"},{"name":"Print","shortCut":"CTRL+P"},{"name":"ToggleScreenMode"}]}]}, {"commandExecuting":OnClientCommandExecuting,"load":Telerik$Sitefinity$Web$UI$Fields$HtmlField$radEditorToggleAdvancedToolbars,"pasteHtml":OnClientPasteHtml}, {"dialogOpener":"ctl05_ctl00_ctl00_ctl00_ctl00_ctl00_htmlEditor_ctl00_ctl00_editControl_dialogOpener"}, $get("ctl05_ctl00_ctl00_ctl00_ctl00_ctl00_htmlEditor_ctl00_ctl00_editControl"));
    });
    Sys.Application.add_init(function() {
        $create(Telerik.Web.UI.RadEditor, {"ajaxSpellCheckScriptReference":"/WebResource.axd?d=cBs2NBHP9UwTEVxzVUFI9DUXhDj7pCpqu5xZBu3lddkSCX8mxAcMPed7MrGCq_Llgoa7XVCkP3Z2oHx9UV9oFlyZl2Ml2vfAkKTI2bMLHNG141st8i766OggUQT03datRN28SNuQf78ZVFZy9RlQcQ2&t=634463120776860852","clientStateFieldID":"ctl05_ctl00_ctl00_ctl00_ctl00_ctl00_contentEditor_ctl00_ctl00_editControl_ClientState","contentAreaCssFile":"/WebResource.axd?d=EwiD6feqXksi4ha2SThTaQAoEjoqO0IbHmMudT4T5yEtz-PoxPH5ulTPYEk0xvaSH_DIdxv81SCzuIfccEIF8WBPtbda3BlcI6p3vDZouw8meYnovv05Q9064wkZaAebqfDtJbubCv3V1RHj1dYPBwOKRcl3xq0-p14k1j-ITcRrjE8BIQUzIE5w1-a7JEuo0&t=634463120775080852","contentAreaMode":2,"contextMenusJSON":[{"tagName":"TABLE","tools":[{"name":"ToggleTableBorder","text":"Show/Hide Border"},{"name":"SetTableProperties","text":"Table Properties"},{"name":"DeleteTable","text":"Delete Table"}]},{"tagName":"TD","tools":[{"name":"InsertRowAbove","text":"Insert Row Above"},{"name":"InsertRowBelow","text":"Insert Row Below"},{"name":"DeleteRow","text":"Delete Row"},{"name":"InsertColumnLeft","text":"Insert Column to the Left"},{"name":"InsertColumnRight","text":"Insert Column to the Right"},{"name":"DeleteColumn","text":"Delete Column"},{"name":"MergeColumns","text":"Merge Cells Horizontally"},{"name":"MergeRows","text":"Merge Cells Vertically"},{"name":"SplitCellHorizontal","text":"Split Cell Horizontally"},{"name":"SplitCell","text":"Split Cell"},{"name":"DeleteCell","text":"Delete Cell"},{"name":"SetCellProperties","text":"Cell Properties"},{"name":"SetTableProperties","text":"Table Properties"}]},{"tagName":"IMG","tools":[{"name":"SetImageProperties","text":"Properties..."},{"name":"ImageMapDialog","text":"Image Map Editor"}]},{"tagName":"A","tools":[{"name":"SetLinkProperties","text":"Properties..."},{"name":"Unlink","text":"Remove Link"}]},{"tools":[{"name":"Cut","text":"Cut"},{"name":"Copy","text":"Copy"},{"name":"Paste","text":"Paste"},{"name":"PasteFromWord","text":"Paste from Word"},{"name":"PastePlainText","text":"Paste Plain Text"},{"name":"PasteAsHtml","text":"Paste As Html"},{"name":"PasteHtml","text":"Paste Html"}]}],"cssClasses":[["","Clear Class"],[".test1","Greenyellow"],[".test2","fuchsia"]],"cssFiles":["/Styles/CustomStyles.css"],"editModes":3,"enableUndoRedo":false,"language":"en","modulesJSON":[{"name":"RadEditorStatistics","visible":false,"attributes":{"dockingzone":"Bottom"}},{"name":"RadEditorDomInspector","visible":false},{"name":"RadEditorNodeInspector","visible":false},{"name":"RadEditorHtmlInspector","visible":false}],"mozillaFlashOverlayImage":"/WebResource.axd?d=qlTCTLeakSg32wqVeyFmUTuiMtNDW4OC4W-iufQDqqE5-Yqr5HEqhu7HHDsFA2KG8_8XVePbSQj0i8TO3Hm2MVeaTlnaQyTaoPvlglGNmWinFyeel9gzniyGXV5vOtfeiPzrb2f6bDGbuyu00G49ugp-MWD_F0HPI6D5P26vWGM1&t=634463120776860852","newLineMode":2,"skin":"Sitefinity","spellCheckJSON":{"configuration":"GnArAUs9MQMVAgpTFxcbXgBkDkohEGM1VFU4KQd+AxNdJg8+e3MKLF4MJjR1EUYCHQcNI3YsOUEVKAFSFwUbVzIQAUoqTxQ1VAsFHR5TOSpqeRcgdHABVlknGwdHTkokGU0VX3g/BzYSOAVTEQYhbCkSIw8kOH8FZlYJHS91HxtaJSlld2IoMFs3BDdEOGwKHlkvKHZKNTYtAwZiICsbbDJNAW0kK0EVYSAjEhxTNShqJi5tYhYkFmM4IRhFEVkYGloBGExICAY6LDR9IHADTDNPAXIQOmNzeTEFOxwNF3BuJBsmSXA3HWsNMSd0T0YuEWIjPE4XGAIWKCRDEBcTTDNPAXMXK0kfViAeZw==","url":"Telerik.Web.UI.SpellCheckHandler.axd","language":"en-US"},"stripFormattingOptions":370,"tableLayoutCssFile":"","toolAdapterType":"Telerik.Web.UI.Editor.DefaultToolAdapter","toolJSON":[{"tag":"MainToolbar","tools":[{"name":"ToggleAdvancedToolbars","text":"Less formatting options"},{"type":8},{"name":"InsertOrderedList"},{"name":"InsertUnorderedList"},{"type":8},{"name":"LinkManager","shortCut":"CTRL+K"},{"name":"Unlink","shortCut":"CTRL+SHIFT+K"},{"name":"ImageManager","shortCut":"CTRL+G"},{"type":8},{"name":"AjaxSpellCheck"},{"type":8},{"name":"PasteFromWord"},{"type":8},{"attributes":{"popupclassname":"reApplyClass","clearclasstext":"Clear Class"},"name":"ApplyClass","type":2},{"name":"CustomTool"},{"name":"RemoveEmpty","text":"Remove Empty Elements"},{"type":8}]},{"tools":[{"type":8},{"name":"JustifyLeft"},{"name":"JustifyRight"},{"name":"JustifyCenter"},{"name":"JustifyFull"},{"type":8},{"name":"Indent"},{"name":"Outdent"}]},{"tools":[{"name":"FontName","shortCut":"CTRL+SHIFT+F","type":2},{"type":8},{"attributes":{"popupwidth":"60px"},"name":"RealFontSize","type":2},{"type":8},{"name":"FormatBlock","type":2},{"type":8},{"attributes":{"popupclassname":"reColorPicker","itemsperrow":"10","sizetofit":"true"},"name":"ForeColor","type":4},{"attributes":{"popupclassname":"reColorPicker","itemsperrow":"10","sizetofit":"true"},"name":"BackColor","type":4},{"type":8},{"name":"MediaManager"},{"name":"FlashManager"},{"name":"DocumentManager"}]},{"tools":[{"name":"InsertParagraph"},{"attributes":{"popupclassname":"reInsertTable","itemsperrow":"8","sizetofit":"true"},"name":"InsertTable","type":16,"tools":[{"name":"TableWizard","text":"Table Wizard"},{"name":"InsertRowAbove","text":"Insert Row Above"},{"name":"InsertRowBelow","text":"Insert Row Below"},{"name":"DeleteRow","text":"Delete Row"},{"name":"InsertColumnLeft","text":"Insert Column to the Left"},{"name":"InsertColumnRight","text":"Insert Column to the Right"},{"name":"DeleteColumn","text":"Delete Column"},{"name":"MergeColumns","text":"Merge Cells Horizontally"},{"name":"MergeRows","text":"Merge Cells Vertically"},{"name":"SplitCellHorizontal","text":"Split Cell Horizontally"},{"name":"SplitCell","text":"Split Cell"},{"name":"DeleteCell","text":"Delete Cell"},{"name":"SetTableProperties","text":"Table Properties"}]},{"attributes":{"itemsperrow":"8","sizetofit":"true","popupclassname":"reInsertSymbol"},"name":"InsertSymbol","type":4},{"name":"InsertHorizontalRule"},{"type":8},{"name":"Superscript"},{"name":"Subscript"},{"type":8},{"attributes":{"sizetofit":"true"},"name":"FormatStripper","type":16,"tools":[{"name":"StripAll","text":"Strip All Formatting"},{"name":"StripCss","text":"Strip Css Formatting"},{"name":"StripFont","text":"Strip Font Elements"},{"name":"StripSpan","text":"Strip Span Elements"},{"name":"StripWord","text":"Strip Word Formatting"}]},{"type":8},{"name":"FindAndReplace","shortCut":"CTRL+F"},{"name":"Print","shortCut":"CTRL+P"},{"name":"ToggleScreenMode"}]}]}, {"commandExecuting":OnClientCommandExecuting,"load":Telerik$Sitefinity$Web$UI$Fields$HtmlField$radEditorToggleAdvancedToolbars,"pasteHtml":OnClientPasteHtml}, {"dialogOpener":"ctl05_ctl00_ctl00_ctl00_ctl00_ctl00_contentEditor_ctl00_ctl00_editControl_dialogOpener"}, $get("ctl05_ctl00_ctl00_ctl00_ctl00_ctl00_contentEditor_ctl00_ctl00_editControl"));
    });
    It appears that my template is repeated twice which Im guessing is why when adding the css as a link in the template the styles are doubled but I have no idea why thanks in advance
  11. Boyan Barnev
    Boyan Barnev avatar
    1429 posts
    Registered:
    09 Dec 2016
    28 Sep 2011
    Link to this post
    Hello Jack,

    Even if you remove the classes tags from the ToolsFile, the styles declared in the template should be included in the dropdown. However, declaring them on the template might cause the behavior you have reported (duplicating the styles) as it might get duplicated in the stylesheet of the page where the HtmlFiled control is dropped.
     In that line of reasoning, I'd suggest you to use an external stylesheet and reference it in the editor. For your convenience I'm attaching a sample template and its codebehind where I've referenced my external stylesheet, the corresponding toolsfile and a screenshot of the results achieved.

    ControlTemplates.rar

    An alternative would be to modify the StandardToolsFile, as you have properly pointed out, and point your custom classes to the external file containing the CSS.



    Kind regards,
    Boyan Barnev
    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
  12. Jack
    Jack avatar
    23 posts
    Registered:
    03 May 2011
    28 Sep 2011
    Link to this post
    Hey Boyan,
    After comparing with your code, I have found out my issue. Having ContentAreaMode="Div" in the RadEditor causes the styles to not show up and the behavior I have described. The documentation did mention that the iframe mode manually copies the css to the iframe element while the div mode inherits from the current page which maybe why. I was using the div mode so I had easier access to the contents of the editor for my custom buttons because I had trouble selecting the text within the iframe.
  13. Jack
    Jack avatar
    23 posts
    Registered:
    03 May 2011
    30 Sep 2011
    Link to this post
    Just an update to the situation.. for some reason i cannot get headers to appear in the apply css drop down
    As you can see in the screenshot, the styles are there and is applied but not visible in drop down. 

    This is the example I am trying to achieve
    <classes
      <class name="Heading1" value="H1" />
      <class name="Heading2" value="H2" />
      <class name="Heading3" value="H3" />
      <class name="normal" value="p" />  
    </classes>
    taken from this post http://www.sitefinity.com/devnet/forums/sitefinity-3-x/designing-with-sitefinity/custom-css-in-editor-drop-down.aspx#1126779 

    Here is my tools xml
    <classes>
        <class name="Clear Class" value="" />
        <class name="Header 1" value="h1" />
        <class name="Header 2" value="h2" />
        <class name="Header 3" value=".h3" />
        <class name="normal" value="p" />
        <class name="Indigo" value=".test3" />
        <class name="Links" value="a.link" />
        <class name="Greenyellow" value=".test1" />
        <class name="fuchsia" value=".test2" />
      </classes>
    
  14. Boyan Barnev
    Boyan Barnev avatar
    1429 posts
    Registered:
    09 Dec 2016
    03 Oct 2011
    Link to this post
    Hi Jack,

    I would kindly ask you to test whether the same issue reproduce when you have the CSS classes declared in an external stylesheet, and let me know. Looking forwards to your reply.

    Best wishes,
    Boyan Barnev
    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. Jack
    Jack avatar
    23 posts
    Registered:
    03 May 2011
    03 Oct 2011
    Link to this post
    Hey Boyan,
    The styles are in a external stylesheet as my screenshot shows. It is currently being added through the backend of editortools.
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
     
    namespace SitefinityWebApp
    {
        public partial class EditorTools : System.Web.UI.UserControl
        {
            protected void Page_Load(object sender, EventArgs e)
            {
                this.editControl.ToolsFile = "~/Tools.xml";
                this.editControl.CssFiles.Add("~/Styles/CustomStyles.css");
            }
        }
    }

  16. Boyan Barnev
    Boyan Barnev avatar
    1429 posts
    Registered:
    09 Dec 2016
    06 Oct 2011
    Link to this post
    Hi Jack,

    Actually you don't need to map the template to add your external stylesheet, all you need to do is remove the <classes> node from your ToolsFile, and add the external stylesheet in <cssFiles> node. Then in the CSS file, the editor is looking for particular classes, so if you specify just
    h2{
    }
    this would not be parsed by the content editor, as you're specifying only the HTML element to which your class will be applied, but you're not specifying an actual class. You can do, for example:
    h2.Heading2{
    }
    and this would successfully apply your Heading2 class to all h2 elements. For the sake of clarity i've recorded a short video demonstrating my current setup, I hope you'll find it useful.

    Best wishes,
    Boyan Barnev
    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
16 posts, 0 answered