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

Forums / General Discussions / Enhancing RadEditor in News/Generic Content

Enhancing RadEditor in News/Generic Content

11 posts, 0 answered
  1. Chris
    Chris avatar
    63 posts
    Registered:
    05 Jan 2011
    15 Feb 2011
    Link to this post
    I noticed the standard RadEditor has a lot more features that don't appear in the basic News and Generic Content modules that Sitefinity uses.  Is it possible to add some of this advanced functionality and if so, how?
  2. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    16 Jun 2017
    16 Feb 2011
    Link to this post
    Hi Chris,

    There is no easy way to do this for certain modules. You can do it globally - for the entire website by  mapping

    Telerik.Sitefinity.Web.UI.Fields.HtmlField through the configuration. Ia m sending you the template for HtmlField which you can modify. The template gives you access to the RadEditor control, so you can set the properties you want.

    <%@ 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" %>
     
    <sf:ConditionalTemplateContainer ID="conditionalTemplate" runat="server">
        <Templates>
            <sf:ConditionalTemplate Left="DisplayMode" Operator="Equal" Right="Read" runat="server">
                <sf:SitefinityLabel id="titleLabel" runat="server" WrapperTagName="div" HideIfNoText="false" CssClass="sfTxtLbl" />
                <sf:SitefinityLabel id="viewControl" runat="server" WrapperTagName="div" HideIfNoText="false" CssClass="sfRTFContent" />
            </sf:ConditionalTemplate>
            <sf:ConditionalTemplate 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="Styles/Window.css" />
                </sf:ResourceLinks>
                <asp:Label ID="titleLabel" 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, "");
     
                        newContent = newContent.replace(new RegExp("( \s*\n*)+", "ig"), " ");
                        newContent = newContent.replace(new RegExp("(\s*\n*<br\s*\/?>\s*\n*)+", "ig"), "<br />");
     
                        args.set_value(newContent);
                    }
     
                    function OnClientCommandExecuting(editor, args) {
                     
                        var name = args.get_name();
                        var val = args.get_value();
                         
                        className = "re" + args.get_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);
                        }
                    }
     
                    function AddRemoveCSSClass(sender, args)
                    {
                        var popupElement = sender.get_popupElement();
                        if (!toRemove)
                        {
                            Sys.UI.DomElement.addCssClass(popupElement, className);
                        }
                        else
                        {
                            Sys.UI.DomElement.removeCssClass(popupElement, className);
                        }
                    }
     
                    /* ]]> */
                </script>
            </sf:ConditionalTemplate>
        </Templates>       
    </sf:ConditionalTemplateContainer>


    Best wishes,
    Ivan Dimitrov
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. Chris
    Chris avatar
    63 posts
    Registered:
    05 Jan 2011
    16 Feb 2011
    Link to this post
    Hi Ivan,

    Thank you, this looks exactly like what I need.  I tried to implement and am getting a weird error.  I have attached a screenshot.  This is using version 4.0.1160.0.  

    Also, is there something in the documentation or on the Telerik site that will show me how to customize the editor a bit?  I looked at the RadEditor page on Telerik.com and there is an enormous amount of controls.  I want some of them, just not all of them.  Thanks!
  4. Dan
    Dan avatar
    28 posts
    Registered:
    16 Jun 2010
    17 Feb 2011
    Link to this post
    Hi Ivan,

    I am working with Chris.  I used your code but when I added some buttons (Undo and Redo) as shown below, the buttons are not displayed.  Am I missing something?

    Also, I had to remove the following line as it was generating an error (two controls with the same ID on the page)

    <sf:SitefinityLabel id="titleLabel" runat="server" WrapperTagName="div" HideIfNoText="false" CssClass="sfTxtLbl" />



    <%@ 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" %>
      
    <sf:ConditionalTemplateContainer ID="conditionalTemplate" runat="server">
        <Templates>
            <sf:ConditionalTemplate ID="ConditionalTemplate1" Left="DisplayMode" Operator="Equal" Right="Read" runat="server">
                
                <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="Styles/Window.css" />
                </sf:ResourceLinks>
                <asp:Label ID="titleLabel" 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" />
                     
                    <Tools>
                           <telerik:EditorToolGroup>
                               <telerik:EditorTool Name="Undo" Shortcut="CTRL+Z" />
                               <telerik:EditorTool Name="Redo" ShortCut="CTRL+Y" />
                           </telerik:EditorToolGroup>
                    </Tools>
     
                    </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, "");
      
                        newContent = newContent.replace(new RegExp("( \s*\n*)+", "ig"), " ");
                        newContent = newContent.replace(new RegExp("(\s*\n*<br\s*\/?>\s*\n*)+", "ig"), "<br />");
      
                        args.set_value(newContent);
                    }
      
                    function OnClientCommandExecuting(editor, args) {
                      
                        var name = args.get_name();
                        var val = args.get_value();
                          
                        className = "re" + args.get_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);
                        }
                    }
      
                    function AddRemoveCSSClass(sender, args)
                    {
                        var popupElement = sender.get_popupElement();
                        if (!toRemove)
                        {
                            Sys.UI.DomElement.addCssClass(popupElement, className);
                        }
                        else
                        {
                            Sys.UI.DomElement.removeCssClass(popupElement, className);
                        }
                    }
      
                    /* ]]> */
                </script>
            </sf:ConditionalTemplate>
        </Templates>      
    </sf:ConditionalTemplateContainer>



  5. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    16 Jun 2017
    22 Feb 2011
    Link to this post
    Hi,

    Could you try to add the buttons from the server side - using PreRender of the RadEditor control.

    Kind regards,
    Ivan Dimitrov
    the Telerik team
  6. Chris
    Chris avatar
    63 posts
    Registered:
    05 Jan 2011
    23 Feb 2011
    Link to this post
    Hi Ivan,

    When you say "buttons" do you mean the icons in the editor?  Do you have any simple sample code we could use?
  7. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    16 Jun 2017
    23 Feb 2011
    Link to this post
    Hi Chris,

    You can take a look at this article - Adding Standard Buttons

    All the best,
    Ivan Dimitrov
    the Telerik team
  8. Chris
    Chris avatar
    63 posts
    Registered:
    05 Jan 2011
    01 Mar 2011
    Link to this post
    Hi Ivan,

    Thank you, I have most of the functionality handled programmatically.  Any idea what the error is I'm getting and how to configure this to work in all of the existing modules that use the HtmlField?

    Chris
  9. Chris
    Chris avatar
    63 posts
    Registered:
    05 Jan 2011
    08 Mar 2011
    Link to this post
    Any update on how to do this?  I've got the editor configured how I want it, I just need help maing it show up as the editor inside the content pieces.
  10. GCM
    GCM avatar
    11 posts
    Registered:
    29 Jul 2007
    16 Mar 2011
    Link to this post
    also waiting for the answer to this...!
  11. Chris
    Chris avatar
    63 posts
    Registered:
    05 Jan 2011
    17 Mar 2011
    Link to this post
    For anyone interested, I was able to solve this problem by doing the following.  In my Sitefinity project, I created a subfolder called controls and added a User Control called HtmlField.ascx.  I deleted the code behind files.  The code for this User Control is:

    <%@ 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" %>
      
    <sf:ConditionalTemplateContainer ID="conditionalTemplate" runat="server">
        <Templates>
            <%--
            <sf:ConditionalTemplate ID="ConditionalTemplate1" Left="DisplayMode" Operator="Equal" Right="Read" runat="server">
                <sf:SitefinityLabel id="titleLabel" 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="Styles/Window.css" />
                </sf:ResourceLinks>
                <asp:Label ID="titleLabel" 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"
                        ToolsFile="~/Controls/StandardToolsFile.xml"
                        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, "");
      
                        newContent = newContent.replace(new RegExp("( \s*\n*)+", "ig"), " ");
                        newContent = newContent.replace(new RegExp("(\s*\n*<br\s*\/?>\s*\n*)+", "ig"), "<br />");
      
                        args.set_value(newContent);
                    }
      
                    function OnClientCommandExecuting(editor, args) {
                      
                        var name = args.get_name();
                        var val = args.get_value();
                          
                        className = "re" + args.get_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);
                        }
                    }
      
                    function AddRemoveCSSClass(sender, args)
                    {
                        var popupElement = sender.get_popupElement();
                        if (!toRemove)
                        {
                            Sys.UI.DomElement.addCssClass(popupElement, className);
                        }
                        else
                        {
                            Sys.UI.DomElement.removeCssClass(popupElement, className);
                        }
                    }
      
                    /* ]]> */
                </script>
            </sf:ConditionalTemplate>
        </Templates>      
    </sf:ConditionalTemplateContainer>

    Take special notice of the line: ToolsFile="~/Controls/StandardToolsFile.xml"
    This was added to the RadEditor control and this XML file defines how your toolbars look.  I was unable to get the toolbars to render using the code behinds or by adding content blocks themselves by this method worked perfectly.  My StandardToolsFile.xml consists of the following:

    <?xml version="1.0" encoding="utf-8" ?>
    <root>
        <modules>
            <module name="RadEditorStatistics" dockingZone="Bottom" visible="false" />
            <module name="RadEditorDomInspector" visible="true" />
            <module name="RadEditorNodeInspector" visible="false" />
            <module name="RadEditorHtmlInspector" visible="false" />
        </modules>
        <tools name="MainToolbar">
            <tool name="Bold" shortcut="CTRL+B"/>
            <tool name="Italic" shortcut="CTRL+I"/>
            <tool name="Underline" shortcut="CTRL+U"/>
            <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 name="ToggleAdvancedToolbars" />
        </tools>   
        <tools>
            <tool separator="true"/>
            <tool name="Indent" />
            <tool name="Outdent" />
        </tools>
        <tools>
            <tool separator="true"/>
            <tool name="ForeColor"/>
            <tool name="BackColor"/>
        </tools>
        <tools>
            <tool name="InsertParagraph" />
            <tool name="InsertSymbol"/>
            <tool name="InsertTable" />
            <tool name="InsertHorizontalRule" />
        </tools>
        <tools>
            <tool separator="true"/>
            <tool name="JustifyLeft" />
            <tool name="JustifyCenter" />
            <tool name="JustifyRight" />
        </tools>
        <tools>
            <tool separator="true"/>
            <tool name="StrikeThrough" />
            <tool name="Superscript" />
            <tool name="Subscript" />
        </tools>
        <tools>
            <tool separator="true"/>
            <tool name="Undo" shortcut="CTRL+Z"/>
            <tool name="Redo" shortcut="CTRL+Y"/>
        </tools>
        <tools>
            <tool separator="true"/>
            <tool name="FormatCodeBlock" />
        </tools>
        <tools>
            <tool name="FormatStripper"/>
        </tools>
        <tools>
            <tool name="FlashManager" />
            <tool name="MediaManager" />
            <tool name="DocumentManager" />
        </tools>
        <tools>
            <tool separator="true"/>
            <tool name="FormatBlock"/>
        </tools>
    </root>

    For more information on the tools you can use in the editor, check out: http://www.telerik.com/help/aspnet-ajax/toolbarintro.html

    Once you have this in place, build your project.  Load Sitefinity and login to the Administration area.  Go to Administration -> Settings -> Advanced -> Controls -> ViewMap -> Create New.  In the HostType field enter Telerik.Sitefinity.Web.UI.Fields.HtmlField and in the LayoutTemplatePath enter ~/Controls/HtmlField.ascx (or the path to your User Control).

    Save and restart Sitefinity.  This will replace all editors in the site with your new one.  


11 posts, 0 answered