Customize RadEditor with Scripts in the Sitefinity Backend

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.