One very frequently requested tutorial I get asked for is being able to customise the TinyMCE editor.  In today's post, I'm going to go over all the code that you'll need in order to customise the TinyMce toolbar, to display whatever you require.  This guide will only cover customising the TinyMCE toolbar on a per content area basis.  

The ServiceConfiguration

If you want to look at some of the default styles, you can have a look at the TinyMCE property here.  For reference, there's a static Episerver property, called amazingly 'TinyMCEButtons' that wraps the different button names, so you can strongly type them in your code, rather than having to manually type in the strings. 

[ServiceConfiguration(ServiceType = typeof(PropertySettings))]
    public class CustomToolbarEditorSettings : PropertySettings
    {
        public CustomToolbarEditorSettings()
        {
            DisplayName = "Custom TinyMCE toolbar";
            Description = "Custom TinyMCE toolbar";
            IsDefault = false;
        }

        public override Guid ID => new Guid("9447d8d9-59e1-4e27-8b75-f6eaaf30d001");

        public override TinyMCESettings GetPropertySettings()
        {
            var row1 = new List
            {
                TinyMCEButtons.Link,
                TinyMCEButtons.Media,
                TinyMCEButtons.Image,
                TinyMCEButtons.Bold,
                TinyMCEButtons.Underline,
                TinyMCEButtons.Italic,
                TinyMCEButtons.StrikeThrough,
                TinyMCEButtons.HorizontalRow,
            };

            var row2 = new List
            {
                TinyMCEButtons.Copy,
                TinyMCEButtons.Paste,
                TinyMCEButtons.Undo,
                TinyMCEButtons.Redo,
                TinyMCEButtons.SelectAll,
                TinyMCEButtons.FormatSelect,
                TinyMCEButtons.RemoveFormat
            };

var row3 = new List
{
TinyMCEButtons.BulletedList,
TinyMCEButtons.JustifyCenter,
TinyMCEButtons.JustifyFull,
TinyMCEButtons.JustifyLeft,
TinyMCEButtons.JustifyRight,
TinyMCEButtons.Outdent,
TinyMCEButtons.Indent,
TinyMCEButtons.BulletedList,
} var tinyMceSettings = new TinyMCESettings(); tinyMceSettings.ToolbarRows.Add(new ToolbarRow(row1)); tinyMceSettings.ToolbarRows.Add(new ToolbarRow(row2));
tinyMceSettings.ToolbarRows.Add(new ToolbarRow(row3));
return tinyMceSettings; } }

To apply this new custom toolbar to a content area, you can decorate your XHtmlString properties within your pages/blocks like so:

        [PropertySettings(typeof(CustomToolbarEditorSettings))]
        public virtual XhtmlString RichTextArea { get; set; }