Customize RadEditor with Scripts in the Sitefinity Backend

Customize RadEditor with Scripts in the Sitefinity Backend

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">
        <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 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" />
            <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">
                    StripFormattingOptions="Css,Font,Span" >
                    <FlashManager ViewPaths="~/Files" UploadPaths="~/Files" DeletePaths="~/Files" />
                <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" />
    <%-- 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 && == alignDirection;
                    catch (ex) {
                        state = false;
                    state = false;
                return state ? Telerik.Web.UI.Editor.CommandStates.On : Telerik.Web.UI.Editor.CommandStates.Off;
                return Telerik.Web.UI.Editor.AlignCommand.callBaseMethod(this, "getState", [oWindow]);


- 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\

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


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)

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 are disabled in preview mode.
Latest Stories
in Your Inbox

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

More From Progress
Five Reasons Why Developers Love Sitefinity Marketplace
Read More
How Flywheel Uses Sitefinity Insight to Drive Tangible Results
Read More
Optimize Your Optimization
Read More