TinyMCE configuration API

Setting transformations

If you want to modify the settings object based on the current content, you can do that by registering a SettingsTransform callback for a given property or plugin. You can also remove registered transformations if you know the key. The current settings instance, content, and property name will be passed to the callback. The content item can be NULL.

Add a setting transformation

context.Services.Configure<TinyMceConfiguration>(config =>
{
    var locator = ServiceLocator.Current;
 
    ...
    
    config.For<ArticlePage>(t => t.MainBody)
        .AddSettingsTransform("custom", (settings, content, propertyName) => {
            settings["preferred-culture"] = locator.GetInstance<LanguageResolver>().GetPreferredCulture().Name;
        });
 
    // Remove a specific transform
    config.For<ArticlePage>(t => t.MainBody)
        .RemoveSettingsTransform("custom");
 
    ...
}

Add a setting transformation for a plugin

If you are a plugin developer and need to run custom initialization code based on the current content item, you should register the transformation callback with your plugin.

context.Services.Configure<TinyMceConfiguration>(config =>
{
    ...
    
    config.Default()
        .AddPlugin("custom-plugin", (settings, content, propertyName) => {
            settings["custom-plugin-setting"] = content.Id;
        })
        .RemovePlugin("custom-plugin"); // Will remove the plugin and any registered transformations;
 
    config.Default()
        .AddExternalPlugin("custom-external-plugin", "http://url.js", (settings, content, propertyName) => {
            settings["custom-external-setting"] = content.Id;
        });
 
    ...
}

Exceptions

If your code throws an exception, the exception is handled, logged, and passed to the client and an error message is displayed to the user.

Order of execution

If there are transformations registered both for plugins and on the setting, the plugin transformation runs first and then any transformation on the setting. This lets the site developer modify the settings after the plugin developer completes modifications.

context.Services.Configure<TinyMceConfiguration>(config =>
{
    ...
    
    config.Default()
        .AddPlugin("custom-plugin", (settings, content, propertyName) => {
            settings["custom-plugin-setting"] = "plugin value";
        });
 
    config.Default()
        .AddSettingsTransform("custom-settings", (settings, content propertyName) => {
            settings["custom-plugin-setting"] = "I have modified the plugins settings value";
        });
 
    ...
}

Inherit settings from ancestors

To inherit settings from an ancestor, you need to set the InheritSettingsFromAncestor property to true. It is set to false by default.

config.InheritSettingsFromAncestor = true

This is a global setting that is applied for all types that are configured.

If InheritSettingsFromAncestor is true, Optimizely tries to resolve the setting for a given property starting with the leaf; after that, it traverses upwards in the inheritance hierarchy to try to find the closest ancestor that has a setting for that property. If it cannot be found in the class hierarchy, Default() is used.

Example

abstract class ProductBase
{
    public virtual XHtml ProductDescription {get;set;}
}

class ProductPage : ProductBase
{
}

class ShoeProductPage : ProductPage
{
}

class ShirtProductPage : ProductPage
{
}

class BlueShirtProductPage : ShirtProductPage
{
}

class VerySpecialProductPage : ProductPage
{
}

class AndEvenMoreSpecialProductPage : VerySpecialProductPage
{
}

// Init
context.Services.Configure<TinyMceConfiguration>(config =>
{
    // Enable inheritance of settings
    config.InheritSettingsFromAncestor= true;

    config.Default()
        .Toolbar("epi-image");

    var baseSettings = config.Default().Clone();
    baseSettings
        .AddPlugin("product-selector")
        .Toolbar("product-selector cut paste");

    // Will be applied for every descendants unless they have set a specific setting
    config.For<ProductBase>(t=>t.ProductDescription, baseSettings);
    
    // Will be based on Default() and not the setting configured on the ancestor
    config.For<BlueShirtProductPage>(t=>t.ProductDescription)
        .AppendToolbar("color-picker");

    config.For<VerySpecialProductPage>(t=>t.ProductDescription, baseSettings)
        .Toolbar("cut past | product-selector | spellchecker);
});

/**
* Page                              Toolbar
* ==========================================================================
* ProductPage                       product-select cut paste
* ShoeProductPage                   product-select cut paste
* ShirtProductPage                  product-select cut paste
* BlueShirtProductPage              epi-image | color-picker
* VerySpecialProductPage            cut paste | product-select | spellchecker
* AndEvenMoreSpecialProductPage     cut paste | product-select | spellchecker
**/

Note: This property should not be changed by any plugins. It should only be used when configuring the site.

Do you find this information helpful? Please log in to provide feedback.

Last updated: Jul 02, 2021

Try our conversational search powered by Generative AI!