Sitecore create drop-down button in RTE populated

Question

I'm trying to create a drop-down button for the rich text editor (RTE) in Sitecore but cannot figure out how to implement this. I would like something similar to the 'Insert Snippet' command shown below, but with the source of the dropdown driven by content from the master database instead of core items within the html editor profile.

The closest approach I've found is this article which describes how to add a button which opens a dialog in the RTE.

Another option could be to have a save handler which can create the snippet items in the core database based when items are created/edited in a certain area of the master database.

Answer 1

Inherit Sitecore.Shell.Controls.RichTextEditor.EditorConfiguration. If you just want to add snippets to the standard snippets list, just override the SetupSnippets method and add to the Editor.Snippets collection.

If you want to add your own dropdown, it will get more complicated, but you can probably override the SetupToolbars method and add an EditorToolGroup with an EditorDropDown. You might want to look at Telerik's documentation for the RadEditor if you run into any problems.

Once you have a draft of your class written, register it by going to the profile definition in the core database under /sitecore/system/Settings/Html Editor Profile. Each profile has a Configuration Type item where you can specify the type signature of your class.

Answer 2

There's a fair amount of work involved to set up your own button, including all the the JS handlers as well. The easiest way to achieve what you want is (as Ben Holden states) is to inherit from Sitecore.Shell.Controls.RichTextEditor.EditorConfiguration and override the SetupSnippets() method:

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

    protected override void SetupSnippets()
    {
        // add in all the snippets from default
        base.SetupSnippets();

        // load your custom snippets
        Sitecore.Data.Database master = Sitecore.Configuration.Factory.GetDatabase("master");
        Sitecore.Data.Items.Item obj1 = master.GetItem("/sitecore/content/shared/snippets");
        if (obj1 == null)
            return;
        foreach (Sitecore.Data.Items.Item obj2 in obj1.Children)
            this.Editor.Snippets.Add(string.IsNullOrEmpty(obj2["Header"]) ? obj2.Name : obj2["Header"], Sitecore.StringUtil.RemoveLineFeeds(obj2["Value"]));
    }
}

You can then set the configuration type in web.config (use a patch include file)

<!--  HTML EDITOR DEFAULT CONFIGURATION TYPE
    Specifies the type responsible for setting up the rich text editor. Can be overriden at profile level. Must inherit from Sitecore.Shell.Controls.RichTextEditor.EditorConfiguration,Sitecore.Client.
    Default value: Sitecore.Shell.Controls.RichTextEditor.EditorConfiguration,Sitecore.Client
-->
<setting name="HtmlEditor.DefaultConfigurationType" value="myCustomDLL.Controls.RichTextEditor.EditorConfiguration, myCustomDLL"/>

Then create your snippets in the specified directory. You may have to refresh your browser after adding the snippets since there is some caching going on in the RTE.

EDIT

As Ben rightly points out, if you are using Rich Text Default profile then setting HtmlEditor.DefaultConfigurationType in config will have no effect. The following item in the core database under the profile determines which config type to use for the 'Rich Text Default' profile for example:

/sitecore/system/Settings/Html Editor Profiles/Rich Text Default/Configuration Type

If your profile contains a child item called Configuration Type then it will use that, otherwise it will use the default specified in config. The other profiles do not contain this setting item by default. If you want the other profiles (or a custom profile) to use a specific (or different) configuration then make sure your profile contains an Item called Configuration Type of template type Html Editor Configuration Type. This could be very useful in multi-site scenarios.