4

In the RTE in Sitecore 8.2 Update 6, I can see one of the definitions for a drop down in the Core database is for "FormatBlock" which displays a set of css classes in a drop down box.

enter image description here

Can anyone point me to where the css class styles displayed in this drop down are defined so I can add my own classes?

  • hi, please check path (value) of "WebStylesheet" in settings in show config.aspx – Meenakshi Jan 30 '18 at 3:59
4

FormatBlock

For your question, you can find the values for the FormatBlock under the item /sitecore/system/Settings/Html Editor Profiles/Rich Text Full/Paragraphs. Out of the box, Sitecore's formatting is pretty boring. But you can add some styling to the selections to make them look better. Similar to the class drop down.

See this link to find out more about styling the formatblock values.

Using the style drop down

I have found it a lot easier to define explicitly the classes that show up in the RTE. It first starts with your custom RTE css file which you set with the setting WebStylesheet.

<settings>
      <setting name="WebStylesheet" value="/styles/rte.min.css" />
</settings>

Then in the ToolsFile.xml, located in the folder \sitecore\shell\Controls\Rich Text Editor\ToolsFile.xml, you can define exactly which classes you want in your RTE classes dropdown and what they are called. I find this a lot better than having to name the class to help the editor.

<root>
    <classes>
        <class name="Red Button" value="a.btn-danger" />
        <class name="Blue Button" value="a.btn-blue" />
        <class name="Sitecore Light Blue" value=".light-blue" />
    </classes>
</root>
2

Sitecore's default editor configuration class loads the style sheet specified by the WebStylesheet setting. This is /default.css by default. It also loads /sitecore/shell/Controls/Rich Text Editor/Editor.css. You can modify one of these or change the WebStylesheet setting to point at a custom style sheet.

Another option which enables more advanced customization is to create a class that inherits from Sitecore.Shell.Controls.RichTextEditor.EditorConfiguration and override the SetupStylesheets method. For example:

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

    protected override void SetupStylesheets()
    {
        Item stylesheetsFolder = Profile.Children["Stylesheets"];
        if (stylesheetsFolder != null)
        {
            foreach (Item child in stylesheetsFolder.Children)
            {
                Editor.CssFiles.Add(child["Stylesheet Path"]);
            }
        }

        Item classesFolder = Profile.Children["Classes"];
        if (classesFolder != null)
        {
            foreach (Item child in classesFolder.Children)
            {
                Editor.CssClasses.Add(child["Label"], child["Selector"]);
            }
        }
    }
}

This code was adapted from a blog post I wrote years ago with the premise that I wanted to add items under the profile definition to control what style sheets were loaded and what classes appeared in the dropdown.

Once this code is deployed, you will need to set the Type field on the Configuration Type item under the editor profile to the type signature of your class.

  • Where actually is Sitecore.Shell.Controls...? We keep getting the error that "Controls" does not exist in the namespace Sitecore.Shell.... :/ – Stuart Jul 23 at 11:25
  • It's in the Sitecore.Client assembly. – Ben Golden Aug 2 at 4:14
  • Hi Ben, Yes i found it in the end, installed Sitecore.Client.NoReferences via NuGet ;) – Stuart Aug 2 at 8:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.