Digital Experience
Customize RadEditor with Scripts in the Sitefinity Backend

Customize RadEditor with Scripts in the Sitefinity Backend

by Svetoslav Manchev
Posted on January 03, 2014 0 Comments

The content you're reading is getting on in years
This post is on the older side and its content may be out of date.
Be sure to visit our blogs homepage for our latest news, updates and information.

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

Svetoslav Manchev

Svetoslav Manchev is a Technical Support Officer at Telerik since 2013.

Comments

Comments are disabled in preview mode.
Follow us viaRSS Feed
 
Topics

Sitefinity Training and Certification Now Available.

Let our experts teach you how to use Sitefinity's best-in-class features to deliver compelling digital experiences.

Learn More
More From Progress
 
 
 
Latest Stories
in Your Inbox

Subscribe to get all the news, info and tutorials you need to build better business apps and sites

Loading animation