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.

• 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 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 go 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 go 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 lets you drag and drop an image directly from a local disk without uploading it to the media library before using it inside the TinyMCE editor.

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

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

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();
      ...
    }

Add a TinyMCE plug-in

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

1. Add an AMD module with your plug-in code (see TinyMCE's documentation Create a Plug-in for TinyMCE).
2. Add the following code to your ServiceCollection extension.

services.Configure<TinyMceConfiguration>43 (config => {
  config.Default()
    .AddExternalPlugin("custom-plugin", "alloy/plugins/custom-plugin.js");
});

Add 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:

services.Configure<TinyMceConfiguration>(config => {
  config.Default()
    .InitializationScript("alloy/advancedTinyMCEConfig");
});

The initialization script loads and returns a function that takes a settings object as a parameter. The function must also return a settings object 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');
      }
    });
  }
});

Use TinyMCE on your template pages

If you want to use TinyMCE on your template pages, download your version and place it on your website. The TinyMCE version shipped with Optimizely depends on the user interface.