Customise Sitecore Rich Text Editor using Rules

adminSitecore0 Comments

Most sites require customised styles within Sitecore Rich Text Editor (RTE) so that the user can apply styles as needed. In Sitecore, that process is quite easy to implement. The developer is required to update settings either in web.config or by applying CSS classes into Sitecore default file, which is used by RTE.

Now the issue is, most of the time developers face challenges when a customer wants to setup different CSS/ styles in RTE either by Site, Page or user level. Most of the time we add all styles into a single CSS file and provide training/user guide specifying what the user needs to do in this scenario.

After spending several hours doing this, I found that this would be easy and we need to write only a few lines of code. Not only that, we can use my favourite Sitecore Rules to customise RTE easily.
Let me show you how you can do that…

First create Rule context

using System.Collections.Generic;
using Sitecore.Data.Items;
using Sitecore.Rules;

namespace MyEditor
{
    public class EditorRuleContext : RuleContext
    {
        public EditorRuleContext(Item item)
        {
            Item = item;
            CssFiles = new List<string>();
        }

        public List<string> CssFiles { get; set; }
    }
}

Second, create the rule, which you need to configure within Sitecore

using Sitecore.Rules.Actions;

namespace MyEditor
{
    public class ApplyCssAction<T>: RuleAction<T> where T: EditorRuleContext
    {
        public string CssFile { get; set; }

        public override void Apply(T ruleContext)
        {
            ruleContext.CssFiles.RemoveRange(0, ruleContext.CssFiles.Count);
            ruleContext.CssFiles.Add(CssFile);
        }
    }
}

Third and final code you need for EditorPage

using System;
using Sitecore.Data.Items;
using Sitecore.Diagnostics;
using Sitecore.Pipelines;
using Sitecore.Rules;
using Sitecore.Shell.Controls.RichTextEditor.Pipelines.LoadRichTextContent;
using Sitecore.Web;
using Telerik.Web.UI;

namespace MyEditor
{
    public class EditorPage : Sitecore.Shell.Controls.RichTextEditor.EditorPage
    {
        protected override void OnLoad(EventArgs e)
        {
            base.OnLoad(e);

            ApplyCss(); // call this custom method for rules actions

            LoadHtml(); // copied using decompiler
        }

        private void ApplyCss()
        {
            // get instance of item that is edited, and its corresponding site item
            Item item = Sitecore.Context.ContentDatabase.GetItem(WebUtil.GetQueryString("id"));

            if (item != null)
            {
                EditorRuleContext context = new EditorRuleContext(item);

                var ruleSet = item.Database.GetItem("/sitecore/system/Settings/Rules/MyRTE/Rules");
                RuleList<EditorRuleContext> globalRules = RuleFactory.GetRules<EditorRuleContext>(ruleSet, "Rule");
                globalRules.Name = ruleSet.Paths.Path;
                globalRules.Run(context);

                foreach (var cssFile in context.CssFiles)
                {
                    Editor.CssFiles.Add(new EditorCssFile(cssFile));
                }
            }
        }

        /// <summary>
        /// Populates the editor with HTML
        /// 
        /// </summary>
        private void LoadHtml()
        {
            string queryString = WebUtil.GetQueryString("hdl");
            Assert.IsNotNullOrEmpty(queryString, "html value handle");
            string sessionString = WebUtil.GetSessionString(queryString);
            WebUtil.RemoveSessionValue(queryString);
            LoadRichTextContentArgs richTextContentArgs = new LoadRichTextContentArgs(sessionString);
            using (new LongRunningOperationWatcher(250, "loadRichTextContent", new string[0]))
                CorePipeline.Run("loadRichTextContent", (PipelineArgs)richTextContentArgs);
            Editor.Content = richTextContentArgs.Content;
        }
    }
}

Now you need to create the following Sitecore items:

RTE-Sitecore-Tag

RTE-Sitecore-Tag-Element

RTE-Sitecore-Tag-Action

RTE-Sitecore-Tag-Element-Conditions

RTE-Sitecore-Tag-Rules-Context-Folder

RTE-Sitecore-Rule

Update EditorPage.ascx, which you can find within the “sitecore\shell\Controls\Rich Text Editor\” folder. Open EditorPage.ascx file and replace first line

<%@ Page Language=”C#” AutoEventWireup=”true” CodeBehind=”EditorPage.aspx.cs” Inherits=”Sitecore.Shell.Controls.RichTextEditor.EditorPage” %>

with
<%@ Page Language=”C#” AutoEventWireup=”true” Inherits=”MyEditor.EditorPage” %>

And finally you can start using rules and your editor shows custom stylesheet class

RTE-Sitecore-RTE

Hope that helps, but feel free to let me know if you have any queries or questions.

 

 

 

 

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *