TinyMCE property configuration

Create a configuration for a property on one page type first and later copy that configuration to another page types property:

// create configuration for the main body property on the article page type
        config.For<ArticlePage>(t => t.MainBody)
            .AddPlugin("print")
            .Toolbar("cut", "paste")
            .DisableMenubar();
    
        // use settings from the article page types MainBody property 
        // on the SecondaryBody property of the standard page type.
        config.Use<ArticlePage, StandardPage>(p => p.MainBody, s => s.SecondaryBody);

Another option is to create a configuration instance and then use that on multiple properties:

// create a simple configuration by cloning the default and modifying it
        var simpleConfiguration = config.Default().Clone()
            .BodyClass("simple_body")
            .AddPlugin("spellchecker");
        
        // use the configurations we created earlier on different properties
        config.For<ArticlePage>(a => a.MainBody, simpleConfiguration);
        config.For<NewsPage>(a => a.MainBody, simpleConfiguration);

Building on the example above, you can also extend existing configurations if you need some additional configuration for a specific property:

// extend the simple configuration with more advanced plugins
        var advancedConfiguration = simpleConfiguration.Clone()
            .AddPlugin("epi-link code")
            .AppendToolbar("epi-link | code");
    
        config.For<StandardPage>(a => a.MainBody, advancedConfiguration);

Remember to call the Clone method so that you do not affect the configuration that you want to extend.

Set custom configuration

Some settings are not available as strongly typed API. For example, you could have developed your own TinyMCE plugin that requires a custom setting.

To set a custom setting, you can use either of the AddSetting or RawSetting methods:

var extraCustomSettings = new Dictionary<string, object> {{"custom_tinymce_setting", "foo"}};
    
        var customConfig = config.Default().Clone()
            .AddSetting("my_own_setting", "lorem ipsum")
            .RawSettings(extraCustomSettings);
    
        config.For<EditorialBlock>(a => a.MainBody, customConfig);

The RawSetting method also has an overload that takes a JSON string.

Example with many options set

The following example shows options set and a toolbar with three rows:

config.For<ProductPage>(p => p.MainBody)
            .Menubar("file edit insert view format table tools help")
            .ClearPlugins()
            .AddPlugin(@"epi-link epi-image-editor epi-dnd-processor 
                epi-personalized-content print preview searchreplace
                autolink directionality visualblocks visualchars
                fullscreen image link media template codesample table charmap
                hr pagebreak nonbreaking anchor toc insertdatetime advlist lists
                textcolor wordcount imagetools contextmenu colorpicker textpattern help")
            .Toolbar(
                "epi-link | epi-image-editor | epi-personalized-content | cut copy paste | fullscreen",
                @"styleselect formatselect | bold italic strikethrough forecolor backcolor 
                   | link | alignleft aligncenter alignright alignjustify
                   | numlist bullist outdent indent | removeformat",
                "table | toc | codesample");

The AddPlugin method adds the values to the existing configuration. Calling ClearPlugins before AddPlugin to overwrite the list of registered plugins.

The Toolbar method overwrites the values that were previously configured so the end result might not be exactly what you expect. If you want to add to an existing configuration, use AppendToolbar instead.

Putting all the previous examples together, you might end up with a configuration that looks something like this:

public static class ServiceCollectionExtentions
        {
            public static IServiceCollection AddTinyMceConfiguration(this IServiceCollection services)
            {
                services.Configure<TinyMceConfiguration>(config =>
                {
                    // create configuration for the main body property on the article page type
                    config.For<ArticlePage>(t => t.MainBody)
                        .AddPlugin("print")
                        .Toolbar("cut", "paste")
                        .DisableMenubar();
    
                    // use settings from the article page types MainBody property 
                    // on the SecondaryBody property of the standard page type.
                    config.Use<ArticlePage, StandardPage>(p => p.MainBody, s => s.SecondaryBody);
    
                    // create a simple configuration by cloning the default and modifying it
                    var simpleConfiguration = config.Default().Clone()
                        .BodyClass("simple_body")
                        .AddPlugin("spellchecker");
    
                    // use the configurations we created earlier on different properties
                    config.For<ArticlePage>(a => a.MainBody, simpleConfiguration);
                    config.For<NewsPage>(a => a.MainBody, simpleConfiguration);
    
                    // extend the simple configuration with more advanced plugins
                    var advancedConfiguration = simpleConfiguration.Clone()
                        .ClearPlugins()
                        .AddPlugin("epi-link code")
                        .AppendToolbar("epi-link | code");
    
                    config.For<StandardPage>(a => a.MainBody, advancedConfiguration);
    
                    // for setting custom settings that are not available as API methods you can use these options
                    var extraCustomSettings = new Dictionary<string, object> { { "custom_tinymce_setting", "foo" } };
    
                    var customConfig = config.Default().Clone()
                        .AddSetting("my_own_setting", "lorem ipsum")
                        .RawSettings(extraCustomSettings);
    
                    config.For<EditorialBlock>(a => a.MainBody, customConfig);
    
                    // An example with a highly configured property using three rows in its toolbar
                    config.For<ProductPage>(p => p.MainBody)
                        .Menubar("file edit insert view format table tools help")
                        .ClearPlugins()
                        .AddPlugin(@"epi-link epi-image-editor epi-dnd-processor 
                            epi-personalized-content print preview searchreplace
                            autolink directionality visualblocks visualchars
                            fullscreen image link media template codesample table charmap
                            hr pagebreak nonbreaking anchor toc insertdatetime advlist lists
                            textcolor wordcount imagetools contextmenu colorpicker textpattern help")
                        .Toolbar(
                            "epi-link | epi-image-editor | epi-personalized-content | cut copy paste | fullscreen",
                            @"styleselect formatselect | bold italic strikethrough forecolor backcolor 
                               | link | alignleft aligncenter alignright alignjustify
                               | numlist bullist outdent indent | removeformat",
                            "table | toc | codesample");
    
                });
    
                return services;
            }
        }

AddTinyMceConfiguration should be added to the Startup.cs like:

public class Startup
        {
            private readonly IWebHostEnvironment _webHostingEnvironment;
            private readonly IConfiguration _configuration;
    
            public Startup(IWebHostEnvironment webHostingEnvironment, IConfiguration configuration)
            {
                _webHostingEnvironment = webHostingEnvironment;
                _configuration = configuration;
            }
    
            public void ConfigureServices(IServiceCollection services)
            {
                services.AddTinyMceConfiguration();
            }
        }