November Happy Hour will be moved to Thursday December 5th.

Magnus Baneryd
May 22, 2018
  2610
(8 votes)

TinyMCE Configuration API news

We recently added some new exciting features to the TinyMCE configuration API based on feedback from the the forums.

Inherit settings from an ancestor

We heard that you would like to be able to configure settings on a base class and then override them further down in the hierarchy, so you do not have to duplicate the code for setting the setting on all leaf classes. E.g.

Before

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 =>
{
    var baseSettings = config.Default().Clone();
    baseSettings
        .AddPlugin("product-selector")
        .AppendToolbar("product-selector");

    config.For<ProductPage>(t=>t.ProductDescription, baseSettings);
    config.For<ShoeProductPage>(t=>t.ProductDescription, baseSettings);
    config.For<ShirtProductPage>(t=>t.ProductDescription, baseSettings);
    config.For<BlueShirtProductPage>(t=>t.ProductDescription, baseSettings);
    config.For<VerySpecialProductPage>(t=>t.ProductDescription, baseSettings);
    config.For<AndEvenMoreSpecialProductPage>(t=>t.ProductDescription, baseSettings);
})

After

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

    var baseSettings = config.Default().Clone();
    baseSettings
        .AddPlugin("product-selector")
        .AppendToolbar("product-selector");

    config.For<ProductBase>(t=>t.ProductDescription, baseSettings);
})
This new behavior is something that you need to enable, by setting InheritSettingsFromAncestor to true. We could not change the new behavior without doing a breaking change, so we decided to hide it behind the InheritSettingsFromAncestor flag instead.
You can read more about the API in the SDK - (Inherit settings from ancestors)

Setting transformations

The setting transformation features makes it possible for you to add a callback method that will run when we load the settings for a specific content item. And it enables you do modify the setting object before we return it to the client.
 
context.Services.Configure<TinyMceConfiguration>(config =>
{
    ...
    
    // If you are writing a plugin we recommend you to add the transformation when you add the plugin.
    config.Default()
        .AddExternalPlugin("custom-plugin","/path/to/my/plugin.js", (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";
        });
 
    ...
}
You can read more about the API in the SDK - Settings transformations
 

We hope these changes makes it easier for you to configure TinyMCE, and if you have any more feedback on the API, please let us know.

May 22, 2018

Comments

Peter Emilsson
Peter Emilsson May 23, 2018 11:11 AM

Setting transformations look very useful!

How do I configure TinyMce for a property on a model/class in PropertyList?

Aria Zanganeh
Aria Zanganeh May 23, 2018 01:45 PM

this is really helpful :) as I'm pretty sure we will make many configs we will end up the big mess .. if there is any visualization tool that describes what config is used where would be great .. 

Please login to comment.
Latest blogs
Optimizely SaaS CMS + Coveo Search Page

Short on time but need a listing feature with filters, pagination, and sorting? Create a fully functional Coveo-powered search page driven by data...

Damian Smutek | Nov 21, 2024 | Syndicated blog

Optimizely SaaS CMS DAM Picker (Interim)

Simplify your Optimizely SaaS CMS workflow with the Interim DAM Picker Chrome extension. Seamlessly integrate your DAM system, streamlining asset...

Andy Blyth | Nov 21, 2024 | Syndicated blog

Optimizely CMS Roadmap

Explore Optimizely CMS's latest roadmap, packed with developer-focused updates. From SaaS speed to Visual Builder enhancements, developer tooling...

Andy Blyth | Nov 21, 2024 | Syndicated blog

Set Default Culture in Optimizely CMS 12

Take control over culture-specific operations like date and time formatting.

Tomas Hensrud Gulla | Nov 15, 2024 | Syndicated blog