Property configuration

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")
        .Plugins("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")
        .AddPlugin("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")
        .Plugins("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 Plugins and Toolbar methods overwrite 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, it is easier to use AddPlugin and AppendToolbar. AppendToolbar was released in version 2.1.2 of the EPiServer.CMS.TinyMce package.

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

    [ModuleDependency(typeof(TinyMceInitialization))]
    public class CustomizedTinyMceInitialization : IConfigurableModule
    {
        public void Initialize(InitializationEngine context) { }

        public void Uninitialize(InitializationEngine context) { }

        public void ConfigureContainer(ServiceConfigurationContext context)
        {
            context.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
                var simpleConfiguration = config.Default().Clone()
                    .BodyClass("simple_body")
                    .Plugins("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()
                    .AddPlugin("epi-link")
                    .AddPlugin("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")
                    .Plugins("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");
            });
        }
    }

Last updated: Jul 02, 2021