Customize the Tiny MCE editor options in EPiServer CMS 6

In EPiServer CMS 5 you can simply add EditMenuName: Introduction to any CSS rule in your edior.css and you would get an extra option in the X/HTML editor and this is how you can do it in EPiServer CMS 6 with Tiny MCE.

I always try to help the editors to make the right choice when they are going to create new content on a website I have developed, and sometimes you have to add or remove options in EPiServer editor to achive that. In order to do so in EPiServer CMS 6 you have to create a class and decorate it with the attribute TinyMCEPluginNonVisual.

using EPiServer.Editor.TinyMCE;

namespace Demo.Web.UI {
    [TinyMCEPluginNonVisual( AlwaysEnabled = true,  
    PlugInName = "CustomEditorSettings",  
    DisplayName = "Init options",  
    Description = "Custom editor init options.",  
    EditorInitConfigurationOptions = @"{  }")]  
    public class EditorSettings { }
}

The interesting part here is the EditorInitConfigurationOptions, here we can specify exactly how we want our editors to handle e.g. the format drop-down menu with available block elements, or wich class names that should be available in the drop-down menu for styles. An example configuration might look like this, because I have a custom property for the title on the top level, I do not want to h1 element to be available for the editors in the drop-down menu with available block elements.

using EPiServer.Editor.TinyMCE;

namespace Demo.Web.UI {
    [TinyMCEPluginNonVisual( AlwaysEnabled = true,  
    PlugInName = "CustomEditorSettings",  
    DisplayName = "Init options",  
    Description = "Custom editor init options.",    
    EditorInitConfigurationOptions = @"{  
        paste_auto_cleanup_on_paste : true,  
        theme_advanced_blockformats : ""h2,h3,h4,p"",
        theme_advanced_styles : ""Introduction=introduction;Date=date"",  
        theme_advanced_resizing : true }")]  
    public class EditorSettings { }
}

theme_advanced_blockformats, this option should contain a comma separated list of formats that will be available in the format drop down list and theme_advanced_styles should contain a semicolon separated list of class titles and class names separated by =. The titles will be presented to the user in the styles dropdown list and the class names will be inserted when a selection is made. That was pretty much all you need to do to customize the editor in EPiServer CMS 6. For a full configuration reference visit the home of the Tiny MCE editor. Feel free to drop a comment with some feedback. Edit: I just noticed that Johan Kronberg has written a similar post but I hope you can perhaps learn something more by reading this.