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

Forums / General Discussions / Content Block Editor - Toggle Advanced formatting options not behaving correctly after adding toolsfile.xml

Content Block Editor - Toggle Advanced formatting options not behaving correctly after adding toolsfile.xml

3 posts, 1 answered
  1. Nidhi
    Nidhi avatar
    40 posts
    Registered:
    20 Jul 2010
    06 May 2011
    Link to this post
    Hi,
    I wanted to modify the formatting options that are visible to user when the content editor box opens, So I followed this example and created a custom control and toolsfile.xml. I only wanted to move around the items from one <tools> to another. But after doing that, it doesnt behave the same way. It shows a blank box [see fig1 in the attached image] intead of "more formatting options" and it shows all the tools together. Clicking on the blank box shows all the items with the more formatting options button [see fig2 in attached image].

    What should happen is that it should show fig2 when the dialog box opens.
    Here's my tools file:
    <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" >
            <tool name="ToggleAdvancedToolbars"/>
            <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"/>
            <tool name="FormatBlock"/>
            <tool separator="true"/>
            <tool name="ForeColor"/>
        </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 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>
        <colors>
            <color value=""/> <!-- for no color -->
            <color value="#000000"/>
            <color value="#eeece1"/>
            <color value="#1f497d"/>
            <color value="#4f81bd"/>
            <color value="#c0504d"/>
            <color value="#9bbb59"/>
            <color value="#8064a2"/>
        </colors>
         
    </root>

    Is this a bug with sitefinity or radcontrols? I'm using Sitefinity 4.1.
    How do I fix this.

    Thanks
    Nidhi
  2. Boyan Barnev
    Boyan Barnev avatar
    1429 posts
    Registered:
    08 Dec 2016
    09 May 2011
    Link to this post
    Hello Nidhi,

    Did you use the template provided by Steve in the forum thread you mentioned? It's missing the radEditorToggleAdvancedToolbars declaration in the template. Please refer to the below template I've provided and the instructions on mapping the template for HtmlField throughout Sitefinity.

    1. You need to map the template for HtmlField, to do this use the provided below template:
    Copy Code
    <%@ Control Language="C#" CodeFile="~/Controls/EditorTemplate.ascx.cs" Inherits="SitefinityWebApp.Controls.EditorTemplate"%>
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
    <%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI" 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" AssociatedControlID="editControl" />
                <asp:LinkButton ID="expandLink" runat="server" OnClientClick="return false;" CssClass="sfOptionalExpander" />
                <asp:Panel ID="expandableTarget" runat="server" CssClass="sfEditorWrp sfClearfix">
                    <telerik:RadEditor
                        ID="editControl"
                        runat="server"
                        Skin="Sitefinity"
                        Width="100%"
                        Height="550px"
                        EnableResize="False"
                        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">
                        <FlashManager ViewPaths="~/Files" UploadPaths="~/Files" DeletePaths="~/Files" />
                    </telerik:RadEditor>
                    <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>

    2. Please find the default ToolsFile we're using for the Editor:
    Copy Code
    <?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">
        <tool name="ToggleAdvancedToolbars"/>
        <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" />
        </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>

    3. Once you have built the project, go to Sitefinity Backend -> Administration->Settings->Advanced->Controls->ViewMap and create and click on the Creae new button.
    Fill in the fields accordingly (all without the quotes):
    : "Telerik.Sitefinity.Web.UI.Fields.HtmlField"
    :"relative path to the template where you have declared HtmlField control"

    Restart the application and you should see the changes in Content Block. Please take a look at this article from our RadEditor documentation if you need any further information regarding modification of the content editor. If the problems persist, please do not hesitate to write back.

    All the best,
    Boyan Barnev
    the Telerik team



    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
    Answered
  3. Nidhi
    Nidhi avatar
    40 posts
    Registered:
    20 Jul 2010
    09 May 2011
    Link to this post
    This was perfect, thank Boyan.
    I just added the attribute toolsfile to the telerik:radeditor control to link it to my custom toolsfile.xml in the code provided by Boyan, and everything works like a charm!
3 posts, 1 answered