Disabling the HTML Edit Mode in RadEditor

Sitefinity ASP.NET CMS is a web-based content management platform and Telerik's RadEditor plays a key role in managing the web site's content.  RadEditor is a WYSIWYG web-based editor that makes it easy to create rich-text content.

By default, RadEditor includes the ability to toggle into HTML mode.  This displays the raw HTML and allows editors to make edits directly to the HTML.  In the hands of an HTML savvy editor, this is a very useful feature.  However, in the hands of an inexperienced editor, this is a quick way to butcher the web site's layout.

Thankfully, RadEditor's HTML Edit Mode can be disabled.  In addition, Sitefinity's built-in Roles can be used to selectively enable/disable HTML editing for different users.

Straight to the Point

RadEditor's HTML mode can be enabled/disabled by using the EditModes property to specify the available edit modes.  For example, the following tag enables all edit modes:

<telerik:RadEditor runat="server" ID="RadEditor1" EditModes="Design,Html,Preview" />

Whereas the tag below enables only the Design mode:

<telerik:RadEditor runat="server" ID="RadEditor1" EditModes="Design" />

Modifying RadEditor's Edit Modes is very easy!.  The bigger challenge, in Sitefinity, is accessing the RadEditor used by the Generic Content Control Designer (see screenshot above)

Modifying RadEditor's Edit Modes in Sitefinity

Enabling & disabling RadEditor's Edit Modes is very easy when you have access to the <RadEditor> tag.  However, in Sitefinity 3.6+, this control tag sits inside an embedded template.  Meaning, by default, this tag cannot be accessed.

This isn't Game Over though; Sitefinity can be configured to use external templates, instead of the embedded templates.  My last blog post describes, in detail, how to obtain & customize an embedded template.  In addition, there is a KB article that describes how to map a view to an external template. 

Below I will briefly describe the steps needed. 

Creating/Mapping an External Control Template

1.  Download the Embedded Templates zip file from the Sitefinity Downloads section.

2.  Unzip this file.

3.  Locate the following file in the unzipped files:
/Sitefinity/Admin/ControlTemplates/Generic_Content/GenericContentDesigner.sft

4.  Copy this file to the following location in your Sitefinity web site:
~/Custom/Admin/ControlTemplates/Generic_Content

5.  Rename this file from *.sft to *.ascx:
~/Sitefinity/Admin/ControlTemplates/Generic_Content/GenericContentDesigner.ascx

6.  Create the following XML file in your Sitefinity web site:
~/App_Data/Configuration/Telerik.Sitefinity.Configuration.ControlsConfig.xml

7.  Add the following viewSettings mapping to this XML file:

<?xml version="1.0" encoding="utf-8" ?>
<controlsConfig>
    <viewMap>
        <viewSettings hostType="Telerik.Cms.Engine.WebControls.Design.GenericContentDesigner" layoutTemplatePath="~/Custom/Admin/ControlTemplates/Generic_Content/GenericContentDesigner.ascx" />
    </viewMap>
</controlsConfig>

View mappings are initialized during application startup.  The web application may need restarted before changes take effect.

Disabling HTML Mode in the External Control Template

Sitefinity will now use an external template for the Generic Content Control Designer instead of the embedded template.  Customizations can be made to this external template. 

Open the following file in Visual Studio (or IDE of choice):

~/Sitefinity/Admin/ControlTemplates/Generic_Content/GenericContentDesigner.ascx

Find the <telerik:RadEditor> tag and add a EditModes="Design" parameter:

<telerik:RadEditor 
    runat="server" 
    ID="textEditor"
    ContentAreaCssFile="~/Sitefinity/Admin/Themes/Default/AjaxControlsSkins/Sitefinity/EditorContentArea.css"
    ToolsFile="~/Sitefinity/Admin/ControlTemplates/EditorToolsFile.xml"    
    Skin="WebBlue"    
    EditModes="Design"
    NewLineBr="False"
    Height="360px" 
    Width="98%"> 
    <ImageManager ViewPaths="~/Images" UploadPaths="~/Images" DeletePaths="~/Images" />
    <MediaManager ViewPaths="~/Files" UploadPaths="~/Files" DeletePaths="~/Files" />
    <FlashManager ViewPaths="~/Files" UploadPaths="~/Files" DeletePaths="~/Files" />
    <DocumentManager ViewPaths="~/Files" UploadPaths="~/Files" DeletePaths="~/Files" />
    <CssFiles>
        <telerik:EditorCssFile Value="~/Sitefinity/Admin/Themes/Default/AjaxControlsSkins/Sitefinity/EditorCssFile.css" />
    </CssFiles>
</telerik:RadEditor>

The RadEditor tag above will only enable the Design Edit Mode.

Disabling HTML Mode for Non-Administrators Only

It is possible to programmatically enable/disable RadEditor's HTML Edit Mode based on the user's Role.  To do this, add a code-behind file to the following file:

~/Sitefinity/Admin/ControlTemplates/Generic_Content/GenericContentDesigner.ascx

It would be great if Visual Studio had a "right-click & Add a Code-Behind File" option.  However, I can't locate anything like this.  In order to create this code-behind file I copied the entire contents of the file above to my clipboard.  I then deleted this file, re-created this ASP.NET User Control, and then pasted the contents into the re-created User Control.  If you prefer, there are other methods that can used.

Add the following code to the code-behind file.

~/Sitefinity/Admin/ControlTemplates/Generic_Content/GenericContentDesigner.ascx.cs

using System;

public partial class Custom_Admin_ControlTemplates_Generic_Content_GenericContentDesigner : System.Web.UI.UserControl
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (Context.User.IsInRole("administrators") == true)
        {
            textEditor.EditModes = Telerik.Web.UI.EditModes.All;
        }
        else
        {
            textEditor.EditModes = Telerik.Web.UI.EditModes.Design | Telerik.Web.UI.EditModes.Preview;
        }
    }
}

The code above makes use of traditional ASP.NET Roles to examine the Roles of the authenticated user.  If the user belongs to the "administrators" role, then all Edit Modes are enabled.  For all other users, only the Design and Preview Edit Modes are enabled.