Custom Tools for backend Content Editor

Posted by Community Admin on 03-Aug-2018 23:20

Custom Tools for backend Content Editor

All Replies

Posted by Community Admin on 29-Aug-2011 00:00

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

Posted by Community Admin on 01-Sep-2011 00:00

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 >>

Posted by Community Admin on 01-Sep-2011 00:00

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>

Posted by Community Admin on 06-Sep-2011 00:00

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 >>

Posted by Community Admin on 06-Sep-2011 00:00

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

Posted by Community Admin on 09-Sep-2011 00:00

Can anyone help point me to a possible solution? 

Posted by Community Admin on 12-Sep-2011 00:00

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

Posted by Community Admin on 12-Sep-2011 00:00

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

Posted by Community Admin on 16-Sep-2011 00:00

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

Posted by Community Admin on 28-Sep-2011 00:00

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




Posted by Community Admin on 28-Sep-2011 00:00

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

Posted by Community Admin on 28-Sep-2011 00:00

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.

Posted by Community Admin on 30-Sep-2011 00:00

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>

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

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

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

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");
        
    

Posted by Community Admin on 06-Oct-2011 00:00

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

This thread is closed