Enhancing RadEditor in News/Generic Content

Posted by Community Admin on 03-Aug-2018 19:17

Enhancing RadEditor in News/Generic Content

Sitefinity - General Discussions

All Replies

Posted by Community Admin on 15-Feb-2011 00:00

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?

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

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

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

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!

Posted by Community Admin on 17-Feb-2011 00:00

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>



Posted by Community Admin on 22-Feb-2011 00:00

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

Vote for the 7 Telerik products at the 2011 Great Indian Developer Awards!

Posted by Community Admin on 23-Feb-2011 00:00

Hi Ivan,

When you say "buttons" do you mean the icons in the editor?  Do you have any simple sample code we could use?

Posted by Community Admin on 23-Feb-2011 00:00

Hi Chris,

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

All the best,
Ivan Dimitrov
the Telerik team

Vote for the 7 Telerik products at the 2011 Great Indian Developer Awards!

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

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

Posted by Community Admin on 08-Mar-2011 00:00

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.

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

also waiting for the answer to this...!

Posted by Community Admin on 17-Mar-2011 00:00

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.  


This thread is closed