Sitecore Multiple RTE Class Styles

Question

I can add CSS style path for RichTextEditor(RTE) like below and I can select defined style in RTE.

<configuration xmlns:patch="http://www.sitecore.net/xmlconfig/">
    <sitecore>
        <settings>
            <setting name="WebStylesheet">
                <patch:attribute name="value">/resources/customCSS.css</patch:attribute>
            </setting>
        </settings>
    </sitecore>
</configuration>

But, there should be two or more types of CSS. For example, the users in Role-A will be able to see only "Role-A.css" in RTE Class list and the users in Role-B will be able to see only "Role-B.css" in RTE class list.

How can I implement this?
Is there a way to filter which CSS path is shown in the class-list??

Answer 1

It's not possible out of the box, but it is fairly easy to achieve. Create a new class that inherits from Sitecore.Shell.Controls.RichTextEditor.EditorConfiguration and override the SetupStylesheets() method:

public class EditorConfiguration : Sitecore.Shell.Controls.RichTextEditor.EditorConfiguration
{
    public EditorConfiguration(Item profile) : base(profile)
    {
    }

    protected override void SetupStylesheets()
    {
        // if (user = X)
            this.Editor.CssFiles.Add("/path/to/custom.css");

        base.SetupStylesheets();
    }
}

And then set the Rich Text Profile to use this new configuration type. Switch to core database and then go to Item /sitecore/system/Settings/Html Editor Profiles/Rich Text Default/Configuration Type and set the Type field to your new class. If your specific profile does not contain a Configuration Type item then either copy or create a new one, or set "HtmlEditor.DefaultConfigurationType" in config.

Rather than hard-coding the stylesheets, I suggest you define a set of "stylesheets" in settings somewhere in your content tree, and then restrict read access to them using security and permissions for different roles. Then you can simply read back a list of items, iterate and add them, e.g.

And then iterate the items in your SetupStylesheets() method.

protected override void SetupStylesheets()
{
    var stylesheets = Sitecore.Context.ContentDatabase.GetItem("/sitecore/content/RTE-Stylesheets").Children.ToList();

    foreach (var item in stylesheets)
    {
        this.Editor.CssFiles.Add(item["Stylesheet"]);
    }

    base.SetupStylesheets();
}

Since you restricted with permissions, only the stylesheets the user has access to will be returned and then added.