Loading...
Area: Optimizely CMS
Applies to versions: 3 and higher
Other versions:

Property configuration

Recommended reading 

This topic describes ways to define a configuration to use on different properties.

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.

Setting 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();
        }
    }
Do you find this information helpful? Please log in to provide feedback.

Last updated: Sep 28, 2021

Recommended reading