Page Type Builder and TinyMCE global settings

I started out from Joel's post on Page Type Builder 2 Preview 1 and chose to keep handling my editor settings as global ones (see heading Managing global settings).

My project needed ImageVault buttons and a quite different order of all toolbar buttons than the default. To find the button and plugin names i just hit View Frame Source in the Edit Mode frame of a similar site in my Firefox and analyzed the calls to tinyMCE.init().

The classes

The settings for the web site's MainBody properties and similar (also set as default setting):

namespace Krompaco.Project.Settings
{
    using System.Collections.Generic;
    using System.Linq;
    using EPiServer.Core.PropertySettings;
    using EPiServer.Editor.TinyMCE;
    using PageTypeBuilder;

    public class EditorSettingDefault : IUpdateGlobalPropertySettings
    {
        public string DisplayName
        {
            get { return "Standard Setting (ImageVault)"; }
        }

        public string Description
        {
            get { return string.Empty; }
        }

        public bool? IsDefault
        {
            get { return true; }
        }

        public bool OverWriteExistingSettings
        {
            get { return true; }
        }

        public bool Match(PropertySettingsWrapper propertySettingsWrapper)
        {
            return propertySettingsWrapper.DisplayName.Equals(this.DisplayName);
        }

        public void UpdateSettings(TinyMCESettings settings)
        {
            settings.ToolbarRows.Clear();

            var toolbarRow1 = new ToolbarRow(new List { "bold", "italic", "separator", "numlist",
              "bullist", "cite", "separator", "undo", "redo", "separator", "linktool", "unlink",
              "anchor", "separator", "imagevault", "epidynamiccontent", "epipersonalizedcontent",
              "separator", "pastetext", "cleanup", "removeformat", "separator", "search", "replace",
              "separator", "code", "fullscreen" });
            var toolbarRow2 = new ToolbarRow(new List { "formatselect", "styleselect", "table",
              "row_props", "cell_props", "separator", "row_before", "row_after", "delete_row",
              "separator", "col_before", "col_after", "delete_col", "separator", "split_cells",
              "merge_cell" });

            settings.ToolbarRows.Add(toolbarRow1);
            settings.ToolbarRows.Add(toolbarRow2);

            settings.ContentCss = "/css/editor.css";
            settings.Width = 600;
            settings.Height = 400;

            // Putting the javascript plugin name here equals checked box in Admin Mode
            settings.NonVisualPlugins = new[] { "advimage", "krompacooptimizededitor", "contextmenu" };
        }

        public int GetSettingsHashCode(TinyMCESettings settings)
        {
            var flattened = settings.ToolbarRows.SelectMany(row => row.Buttons);
            return string.Concat(flattened, settings.NonVisualPlugins, settings.ContentCss).GetHashCode()
              + settings.Width + settings.Height;
        }
    }
}

The settings for the web site's MainIntro properties and similar (fewer buttons and lower height):

namespace Krompaco.Project.Settings
{
    using System.Collections.Generic;
    using System.Linq;
    using EPiServer.Core.PropertySettings;
    using EPiServer.Editor.TinyMCE;
    using PageTypeBuilder;

    public class EditorSettingIntro : IUpdateGlobalPropertySettings
    {
        public string DisplayName
        {
            get { return "Intro Setting (ImageVault)"; }
        }

        public string Description
        {
            get { return string.Empty; }
        }

        public bool? IsDefault
        {
            get { return false; }
        }

        public bool OverWriteExistingSettings
        {
            get { return true; }
        }

        public bool Match(PropertySettingsWrapper propertySettingsWrapper)
        {
            return propertySettingsWrapper.DisplayName.Equals(this.DisplayName);
        }

        public void UpdateSettings(TinyMCESettings settings)
        {
            settings.ToolbarRows.Clear();

            var toolbarRow1 = new ToolbarRow(new List { "bold", "italic", "separator", "undo", "redo",
              "separator", "linktool", "unlink", "anchor", "separator", "imagevault", "epidynamiccontent",
              "epipersonalizedcontent", "separator", "pastetext", "cleanup", "removeformat", "separator",
              "search", "replace", "separator", "code", "fullscreen" });
            var toolbarRow2 = new ToolbarRow(new List { "formatselect", "styleselect" });

            settings.ToolbarRows.Add(toolbarRow1);
            settings.ToolbarRows.Add(toolbarRow2);

            settings.ContentCss = "/css/editor.css";
            settings.Width = 600;
            settings.Height = 210;

            // Putting the javascript plugin name here equals checked box in Admin Mode
            settings.NonVisualPlugins = new[] { "advimage", "krompacooptimizededitor", "contextmenu" };
        }

        public int GetSettingsHashCode(TinyMCESettings settings)
        {
            var flattened = settings.ToolbarRows.SelectMany(row => row.Buttons);
            return string.Concat(flattened, settings.NonVisualPlugins, settings.ContentCss).GetHashCode()
              + settings.Width + settings.Height;
        }
    }
}

Usage

Then just put a UseGlobalSettings attribute on your property like this:

[PageTypeProperty(EditCaption = "Introduction Text", Type = typeof(PropertyXhtmlString),
SortOrder = 1100, UniqueValuePerLanguage = true, Searchable = true)]
[UseGlobalSettings(typeof(EditorSettingIntro))]
public virtual string MainIntro { get; set; }

Tested using Episerver CMS 6 R2 and Page Type Builder 2.0.