I’m currently working with support for creating property settings for the Tiny MCE editor in Page Type Builder. The easy part, the coding, is pretty much done, but the hard part remains. How it should work. Let me begin by outlining the general idea.

There will be support for creating both global settings and settings for a specific property on a page type. For properties on a page type we’ll create the settings using a new attribute, called TinyMCESettingsAttribute. It will look something like this (details omitted for brevity):

public class TinyMceSettingsAttribute : PropertySettingsAttribute
{
    public string ContentCss { get; set; }

    public int Width { get; set; }

    public int Height { get; set; }

    public string[] FirstToolbarRow { get; set; }

    public string[] SecondToolbarRow { get; set; }

    public string[] ThirdToolbarRow { get; set; }

    public string[] FourthToolbarRow { get; set; }

    public string[] FifthToolbarRow { get; set; }

    public string[] NonVisualPlugins { get; set; }
}

As you can see it pretty much matches the TinyMCESettings class in EPiServer except that the attribute has a number of string arrays for toolbar rows while the settings class has a list of lists that specifies the buttons on each toolbar row.

Using the attribute could look something like this

[TinyMceSettings(Width = 600, Height = 400,
    FirstToolbarRow = new [] { "anchor", "epilink"}, 
    SecondToolbarRow = new [] { "unlink"})] 
[PageTypeProperty]
public virtual string MainBody { get; set; }

So what’s the problem?

My conundrum is what the default values should be. The TinyMCESettings class, like all property settings, has a method called GetDefaultValues which returns an instance of the class with the default settings. It’s these you see when choosing to create new settings in EPiServer’s admin mode.

If one wanted to use the attribute to specify the same settings as the default ones it would look like this:

[TinyMceSettings(Width = 600, Height = 400,
    FirstToolbarRow = new [] { 
    "epilink", "unlink", "anchor", "image", "media", 
    "epidynamiccontent", "epiquote", "separator", 
    "cut", "copy", "paste", "pastetext", "pasteword", 
    "separator", "table", "delete_table", "row_props", 
    "cell_props", "separator", "col_before", "col_after", 
    "delete_col", "separator", "row_before", "row_after", 
    "delete_row", "separator", "split_cells", 
    "merge_cells"},
    SecondToolbarRow = new [] { 
    "bold", "italic", "underline", "separator", 
    "justifyleft", "justifycenter", "justifyright", 
    "separator", "bullist", "numlist", "hr", 
    "formatselect", "styleselect", "undo", "redo", 
    "separator", "cleanup", "code", "visualaid", 
    "fullscreen", "search"},
    NonVisualPlugins = new [] {
    "advimage", "epifilebrowser", "epifilemanagerdrop"})] 
[PageTypeProperty]
public virtual string MainBody { get; set; }

Now that’s ugly! Of course if we just wanted the default settings we probably wouldn’t use the attribute in the first place. But what if we wanted to specify that we wanted the default values except for one button?

One option would be that the default values in the attribute would match what’s returned by TinyMCESettings.GetDefaultValues(). That way we would only have to specify the row that we would like to modify. Another is to say that the above examples are fine since the use case when wanting to specify settings for a property is often that we only want to allow a small set of buttons. In this case the attribute would default to empty rows for toolbars. But what about the non visual settings then? If the toolbars default to empty, then we’d probably want to do the same for non visual plugins (and width and height?) in order to be consistent. But on the other hand, we’d probably want the default settings there, since specifying them each time would be a pain.

Help me!

I’m really not sure what way to go here. Therefore, I could really use your help by thinking about how you would like to use the attribute and in what situations. Especially what use cases you can see for using the attribute is interesting.

But before you leave a comment, please read this post again and take 30 minutes to think about it, because I don’t think there’s a quick and simple solution and I really need well thought out input :-)

A few things to keep in mind:

• There will also be support for global settings and specifying that they should be used for a specific property, which I think will be the most common way to specify settings for the Tiny MCE editor.
• Removing buttons from a set of defaults could be handled by adding properties for specifying what buttons to remove from each row, but remember that there are also multiple separators in there and in order to remove one of those one would probably have to specify the index of it rather than the name.
• Constants can’t be arrays as a constant initializer must be compile time constant, so providing a set of ready-to-use arrays with buttons won’t work.
• It’s only possible to set attribute values of element types (byte, sbyte, int, uint, long, ulong, float, double, String, char, bool, enum and type) and single-dimension arrays of such types.

PS. For updates about new posts, sites I find useful and the occasional rant you can follow me on Twitter. You are also most welcome to subscribe to the RSS-feed.