TinyMCE plug-ins

• Optimizely's TinyMCE plug-ins
• Adding a TinyMCE plug-in
• Adding client-side configuration
• Using TinyMCE on your template pages

context.Services.Configure<TinyMceConfiguration>(config =>
{
    ...
    // Disable the image tools
    config.For<ArticlePage>(t => t.MainBody)
        .DisableImageTools()
    ...
    // Enable the image tools for a property (if the property does not have it already)
    config.For<ArticlePage>(t => t.MainBody)
        .EnableImageTools();
 
    ...
}

Adding a TinyMCE plug-in

The following steps show how to add your own plug-in to the TinyMCE editor.

1. Add an AMD module with your plug-in code (see TinyMCE's documentation Create a Plugin for TinyMCE).
2. Add the following piece of code to your custom TinyMCE initialization module.

[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 =>
        {
            config.Default()
                .AddExternalPlugin("custom-plugin", "alloy/plugins/custom-plugin.js");
        });
    }
}

Adding client-side configuration

If a plug-in requires you to register a callback function (and that can be hard to achieve using C# configuration), you can use a client-side configuration by first registering an initialization script server-side by using the InitializationScript method:

    [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 =>
            {
                config.Default()
                    .InitializationScript("alloy/advancedTinyMCEConfig");
            });
        }
    }

The initialization script then loads and returns a function that takes a settings object as a parameter. The function must also return a settings object as that will be used to initialize the TinyMCE editor in the user interface.

    define([], function () {

        return function (settings) {

            console.log("initialize TinyMCE advanced config");

            return Object.assign(settings, {
                myCallback: function () {
                    alert('hello');
                }
            });
        }
    });

Using TinyMCE on your template pages

If you want to use TinyMCE on your template pages, download your own version and place it on your website. This is because the TinyMCE version shipped with Optimizely has a dependency to the user interface.

Last updated: Jul 02, 2021