+1-888-365-2779
Try Now
More in this section
Categories
Bloggers
Blogs RSS feed

Customize RadEditor with Scripts in the Sitefinity Backend

by Svetoslav Manchev

In this blog post, I will show you how you can customize RadEditor in the Sitefinity backend. In this example, we will disable the filter for scripts (by default script tags are removed from the html). This approach could be used in any other cases you need to change the Rich Editor in the backend.

Code explanation:

1.You need to replace the standard control. To do so we create a new web user control (for example: CustomHtmlField.ascx) with the following code:

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="CustomHtmlField.ascx.cs" Inherits="SitefinityWebApp.CustomHtmlField" %>
<%@ 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" AssociatedControlID="editControl" />
            <asp:LinkButton ID="expandLink" runat="server" OnClientClick="return false;" CssClass="sfOptionalExpander" />
            <%--NewLineBr="False" - removed because of bug 112126. The bug should be fixed in the next release of RadControls.--%>
            <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=""
                    StripFormattingOptions="Css,Font,Span" >
                    <FlashManager ViewPaths="~/Files" UploadPaths="~/Files" DeletePaths="~/Files" />
                </telerik:RadEditor>
                <sf:RadEditorCustomDialogsExtender runat="server" id="editorCustomDialogsExtender" 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>
        </sf:ConditionalTemplate>
    </Templates>     
</sf:ConditionalTemplateContainer>
      
    <%-- Overwrite. Remove after RadControls service pack 2012 Q1 --%>
    <script type="text/javascript">
        Telerik.Web.UI.Editor.AlignCommand.prototype.getState = function (oWindow) {
            oWindow = oWindow || this.get_window();
            var doc = oWindow.document;
   
            if ($telerik.isFirefox) {
                var alignDirection = this.get_alignment();
                var selection = doc.getSelection();
                if (selection && selection.getRangeAt) {
                    try {
                        var selectedElement = selection.getRangeAt(0).commonAncestorContainer;
                        var blockElement = this.utils.getFirstBlockElementUp(selectedElement);
                        state = blockElement && blockElement.style.textAlign == alignDirection;
                    }
                    catch (ex) {
                        state = false;
                    }
                }
                else
                    state = false;
   
                return state ? Telerik.Web.UI.Editor.CommandStates.On : Telerik.Web.UI.Editor.CommandStates.Off;
            }
            else
                return Telerik.Web.UI.Editor.AlignCommand.callBaseMethod(this, "getState", [oWindow]);
        }
    </script>

 

- Version 6.2 and older: The standard HtmlField.ascx control can be found in the Sitefinity SDK. You need to get the version that corresponds to your Sitefinity version. It is usually installed in a .zip file at the following address:

C:\Program Files (x86)\Telerik\Sitefinity 6.2\SDK\Content\Resources\WidgetTemplates.zip

Within that .zip file, to find the control drill down to:

Templates\Fields\HtmlField.ascx

https://github.com/Sitefinity-SDK/SitefinityResources/releases

2. Then you can add in code behind the additional logic you need. In our case:

protected void Page_Load(object sender, EventArgs e)
        {
            editControl.PreRender += new EventHandler(editControl_PreRender);
   
        }
   
        void editControl_PreRender(object sender, EventArgs e)
        {
            editControl.DisableFilter(Telerik.Web.UI.EditorFilters.RemoveScripts);
        }

3. Build your solution

4.  Map the new HtmlField under:

Administration > Settings > Advanced > Controls > View Map > Create new:

HostType: Telerik.Sitefinity.Web.UI.Fields.HtmlField, Telerik.Sitefinity

LayoutTemplatePath: ~/CustomHtmlField.ascx

Note that this will affect all the editors that you will use in the backend (and it will stop the script filtering).

To watch this in action, you can check out a video demonstration to see how it works.

The full code in the example can be found here: CustomHtmlField

1 comment

Leave a comment
  1. Vesko Feb 04, 2014
    Or you can go to the Advanced Settings > Appearance and edit the "RadEditor filters for Content block widget" field by providing a list of the enabled filters. 


    Leave a comment