Custom CSS for RTF field for a Multisite Sitecore solution

Sitecore uses the telerik rich text field for allowing rich text on the items. While this allows the content author to enter any styled html they please, we might also want to provide them with a finite list of pre-existing styles which adhere to the current site design.
These can be managed in a CSS file and the CSS file can be referenced by overriding the WebStyleSheet setting in sitecore configuration:

      <setting name="WebStylesheet">
        <patch:attribute name="value">/_CSS/WYSIWYGStyle.css</patch:attribute>
      </setting>

The styles will then appear in the rich text editor for any rich text field:

2015-10-31_233732

2015-10-31_233714

In this case, the css class names in the css file, are TEXT–STYLE-1, link–style-1 etc. If we want more user friendly names, say with spaces etc, we need to override them in the sitecore/shell/Controls/Rich Text Editor/ToolsFile.xml file that telerik uses:

Eg:

<root>
   <classes>
      <class name="Fancy Style Name" value=".TEXT--STYLE-1" />
   </classes>
</root>

Now, all this works perfectly well in a single site environment. If you want to have a different set of styles available to the content authors for each site in a multisite instance of sitecore, you’ll have to get a bit more creative 🙂

Here’s how we went about it.
We created a separate CSS file for each site.
Each site in our sitecore instance had a parent site node item. We added a field to enter the site specific css file path on the node.

2015-10-31_235421

On the site nodes, we would set paths relative to the website folder, eg: /_CSS/Site1/rtfstyles.css

Now for the fun part, in the code:

using Sitecore.Data.Items;
using Sitecore.Web;
using SharedSource.Helpers;

namespace MySite.Customizations.Customized_Sitecore
{
    public class RichTextEditorConfiguration : Sitecore.Shell.Controls.RichTextEditor.EditorConfiguration
    {
        public RichTextEditorConfiguration(Item profile)
            : base(profile)
        { }

        protected override void SetupStylesheets()
        {
            string id = WebUtil.GetQueryString("id");
            Item currentItem = SitecoreHelper.GetItemFromGUIDInMaster(id);
            Item siteNode = SitecoreHelper.GetAncestorOrSelfByTemplateId(currentItem, ISite_NodeConstants.TemplateIdString);

            if (siteNode != null && siteNode.Fields[ISite_NodeConstants.Rich_Text_Field_StylesheetFieldName] != null)
            {
                Editor.CssFiles.Add(siteNode.Fields[ISite_NodeConstants.Rich_Text_Field_StylesheetFieldName].Value);
            }
            base.SetupStylesheets();
        }
    }
}

Helpers:

            public static Item GetItemFromGUIDInMaster(string guid)
            {
                Item item = null;
                if (!string.IsNullOrEmpty(guid))
                {
                    ID ItemID = ID.Parse(guid);
                    Database masterDB = Factory.GetDatabase("master");
                    item = masterDB.GetItem(ItemID);
                }
                return item;
            }

            public static Item GetAncestorOrSelfByTemplateId(Item item, string templateId)
            {
                if (item == null || string.IsNullOrEmpty(templateId))
                {
                    return null;
                }

                ID parsedTemplateId;
                return ID.TryParse(templateId, out parsedTemplateId)
                           ? GetAncestorOrSelfByTemplateId(item, parsedTemplateId)
                           : null;
            }

We use glassmapper here, so ISite_NodeConstants.Rich_Text_Field_StylesheetFieldName contains “Rich Text Field Stylesheet”.

We then patch into the HtmlEditor.DefaultConfigurationType setting:

      <setting name="HtmlEditor.DefaultConfigurationType">
        <patch:attribute name="value">MySite.Customizations.Customized_Sitecore.RichTextEditorConfiguration,MySite</patch:attribute>
      </setting>

Note: This code is triggered when you click on the ‘Show Editor’ button above.

Advertisements

One thought on “Custom CSS for RTF field for a Multisite Sitecore solution

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s