TinyMCE plug-ins

Optimizely's TinyMCE plug-ins

The following are Optimizely plug-ins from the EPiServer.CMS.TinyMce package:

epi-link
Handles links to Optimizely content and links to external content. Use this plug-in instead of TinyMCEs link plugin.

epi-personalized-content
Enables editing of personalized content in a TinyMCE editor.

epi-image-editor
Opens Optimizely's custom image editor.

epi-dnd-processor
Required if you want to drag and drop Optimizely content, such as blocks and pages, to your TinyMCE editor.
epi-image-tools (only for version 2.3.0 and higher)
Lets you navigate directly to the image content with a push of a button, or see the image location path by hovering the button.

Note: The epi-image-tools plug-in is dependent on the TinyMCE plug-in imagetools. The TinyMCE imagetools plug-in is not fully compatible with Optimizely because it is not integrated with how Optimizely saves images, so in the default configuration we have also defined the imagetools_toolbar setting to only include Optimizely's epi-gotomedia button.
epi-block-tools (only version 2.8.0 and higher)
Lets you navigate directly to the block content with a push of a button, or see the block location path by hovering the button.

From version 2.4.0: This plug-in also lets an editor drag and drop an image directly from a local disk, without having to upload the image to the media library before using it inside the TinyMCE editor.

An image preview is displayed immediately upon dropping the image while it is uploaded to the server.
All dropped images are automatically placed in the local For This Page or For This Block folder.

Although it is technically possible to drag and drop multiple images at the same time, it does not work deterministically. There is a bug reported in TinyMCE #4055 which Optimizely has submitted a bug fix to. The bug is still pending review.

Configure this plug-in with the EnableImageTools/DisableImageTools configuration methods:

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.

Add an AMD module with your plug-in code (see TinyMCE's documentation Create a Plugin for TinyMCE).
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.

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

Last updated: Jul 02, 2021