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 is a Technical Support Officer at Telerik since 2013.
Let our experts teach you how to use Sitefinity's best-in-class features to deliver compelling digital experiences.
Learn MoreSubscribe to get all the news, info and tutorials you need to build better business apps and sites
Progress collects the Personal Information set out in our Privacy Policy and the Supplemental Privacy notice for residents of California and other US States and uses it for the purposes stated in that policy.
You can also ask us not to share your Personal Information to third parties here: Do Not Sell or Share My Info
We see that you have already chosen to receive marketing materials from us. If you wish to change this at any time you may do so by clicking here.
Thank you for your continued interest in Progress. Based on either your previous activity on our websites or our ongoing relationship, we will keep you updated on our products, solutions, services, company news and events. If you decide that you want to be removed from our mailing lists at any time, you can change your contact preferences by clicking here.