Generate TinyMCE Editor Profiles by Code

The CMS admin interface allows you to create TinyMCE Editor profiles with out developer interference but unfortunately they must be manually added if you want to migrate them to another environment like QA or Staging

One solution for this is to create these profiles by code which will be migrated to your other environments. The steps to solve this problem are the following:

1. Create a default custom property settings class
2. Create a custom property settings class with a style css file
3. Set the default TinyMCE editor profile to a XhtmlString property

So once again without more hustle lets code !!!

Create a default custom property settings class

We will begin creating a custom property settings class which must inherit from PropertySettings and be decorated with the attribute ServiceConfiguration. Pay special attention to the comments inside the class.

    [ServiceConfiguration(ServiceType = typeof(PropertySettings))]
    public class DefaultTinyMCESettings : PropertySettings
    {
        public DefaultTinyMCESettings()
        {
            IsDefault = true; 
            DisplayName = "Default settings";
            Description = "Default configuration as defined by the developers.";
        }

        public override TinyMCESettings GetPropertySettings()
        {
            var settings = new TinyMCESettings();

            // Add a new tool bar row with several buttons
            settings.ToolbarRows.Add(new ToolbarRow(new string[] { TinyMCEButtons.EPiServerLink, TinyMCEButtons.Unlink,TinyMCEButtons.Separator,
                 TinyMCEButtons.Cut, TinyMCEButtons.Copy, TinyMCEButtons.Paste, TinyMCEButtons.PasteText, TinyMCEButtons.PasteWord, TinyMCEButtons.Separator,
                 TinyMCEButtons.Bold, TinyMCEButtons.Italic, TinyMCEButtons.Underline, TinyMCEButtons.Separator, TinyMCEButtons.Fullscreen }));

            // Set default with and height for the editor
            settings.Height = 200;
            settings.Width = 600;

            return settings;
        }

        // GUID for this setting, must be unique among TinyMCE profiles
        public override System.Guid ID
        {
            get { return new System.Guid("a6fe936f-190d-45e2-b83c-ccc0501a7312"); }
        }
    }

The variable IsDefault will override any other TinyMCE profile and show the rows and buttons defined by the GetPropertySettings method.

Create a custom property settings class with a style css file

Then, we will create another custom property settings class with the same structure as before but with some more advanced features and which will not be activated by default. Once again, pay special attention to the comments inside the class.

    [ServiceConfiguration(ServiceType = typeof(PropertySettings))]
    public class FullTinyMCESettings : PropertySettings
    {
        public FullTinyMCESettings()
        {
            IsDefault = false; // Profile is not active by default
            DisplayName = "Full settings";
            Description = "Full configuration as defined by the developers.";
        }

        public override TinyMCESettings GetPropertySettings()
        {
            var settings = new TinyMCESettings();

            // Add a row and several buttons to it
            settings.ToolbarRows.Add(new ToolbarRow(new string[] { TinyMCEButtons.EPiServerLink, TinyMCEButtons.Unlink, TinyMCEButtons.Image,
                    TinyMCEButtons.EPiServerImageEditor, TinyMCEButtons.Media, TinyMCEButtons.EPiServerPersonalizedContent, TinyMCEButtons.Separator,
                    TinyMCEButtons.Cut, TinyMCEButtons.Copy, TinyMCEButtons.Paste, TinyMCEButtons.PasteText, TinyMCEButtons.PasteWord, TinyMCEButtons.Separator,
                    TinyMCEButtons.CharacterMap,TinyMCEButtons.HorizontalRow, TinyMCEButtons.Fullscreen, TinyMCEButtons.Separator,
                    TinyMCEButtons.Code,TinyMCEButtons.Search }));

            // Add more rows
            settings.ToolbarRows.Add(new ToolbarRow(new string[] { TinyMCEButtons.Bold, TinyMCEButtons.Italic, TinyMCEButtons.Underline, TinyMCEButtons.Separator,
                    TinyMCEButtons.BulletedList,  TinyMCEButtons.NumericList, TinyMCEButtons.StyleSelect, TinyMCEButtons.Undo, TinyMCEButtons.Redo, TinyMCEButtons.Separator,
                    TinyMCEButtons.JustifyLeft, TinyMCEButtons.JustifyCenter, TinyMCEButtons.JustifyRight, TinyMCEButtons.JustifyFull, TinyMCEButtons.Indent, TinyMCEButtons.Outdent, TinyMCEButtons.Separator,
                    TinyMCEButtons.SuperScript, TinyMCEButtons.SubScript, TinyMCEButtons.ForeColor}));

            // Add more rows
            settings.ToolbarRows.Add(new ToolbarRow(new string[] { TinyMCEButtons.TableButtons.Table, TinyMCEButtons.Separator, TinyMCEButtons.TableButtons.RowProperties, TinyMCEButtons.TableButtons.CellProperties, TinyMCEButtons.Separator,                    TinyMCEButtons.TableButtons.InsertRowBefore,TinyMCEButtons.TableButtons.InsertRowAfter,TinyMCEButtons.TableButtons.DeleteRow,TinyMCEButtons.Separator,                    TinyMCEButtons.TableButtons.InsertColumnBefore,TinyMCEButtons.TableButtons.InsertColumnsAfter,TinyMCEButtons.TableButtons.DeleteColumns,TinyMCEButtons.Separator,TinyMCEButtons.TableButtons.SplitCells,TinyMCEButtons.TableButtons.MergeCells}));

            // Add some default non-visual plugins using EPiServer functionality.
            settings.NonVisualPlugins.Add("advimage");
            settings.NonVisualPlugins.Add("epifilebrowser");

            // Set styles file
            settings.ContentCss = "~/css/full.editor.css";

            // Set default with and height for the editor
            settings.Height = 200;
            settings.Width = 800;

            return settings;
        }

        public override System.Guid ID
        {
            get { return new System.Guid("a6fe936f-190d-45e2-b83c-ccc05ffa7312"); }
        }
    }

The non visual plugins allow to override some setting like the default file browser and be replaced by the EPiServer one. In addition, setting the content css file will show the defined styles in the combo box inside the editor.

The css file has the following styles

h2 {
   # Add styles over here
    EditMenuName: Header 2;
}

h3 {
    EditMenuName: Header 3;
}

h4 {
    EditMenuName: Header 4;
}

h5 {
    EditMenuName: Header 5;
}

h6 {
    EditMenuName: Header 6;
}

p {
    EditMenuName: Paragraph;
}

Set the default TinyMCE editor profile to a XhtmlString property

Finally, we will set a XhtmlString property with an specific TinyMCE profile. To do this we will decorate the property with can decorate the property with a PropertySettings attribute and the desired profile class, in this case FullTinyMCESettings

        [PropertySettings(typeof(FullTinyMCESettings))]
        [Required]
        [CultureSpecific]
        [Display(Name = "Left Column", Description = "Left Column", GroupName = 
        SystemTabNames.Content, Order = 2)]
        public virtual XhtmlString LeftColumn { get; set; }

And that is all. Every time the user goes to the CMS editor will see the different TinyMCE editor profiles based on the decorated property or the default profile. The profiles only applies to the XhtmlString type. You can check the code profiles in the CMS administration interface for the XhtmlString profile

I hope it will help someone and as always keep learning !!!