TinyMCE plug-ins

Optimizely TinyMCE plug-ins

The following Optimizely plug-ins are included in 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 the Optimizely custom image editor.

• epi-dnd-processor – Required to drag and drop Optimizely content, such as blocks and pages, to your TinyMCE editor.

• epi-block-tools (version 2.8.0 and higher) – Opens the block content for editing or displays the block location path on hover.

  

• epi-image-tools (version 2.3.0 and higher) – Opens the image content for editing or displays the image location path on hover.

  

  📘

  Note

  The epi-image-tools plug-in depends on the TinyMCE imagetools plug-in. The imagetools plug-in is not fully compatible with Optimizely because it does not integrate with how Optimizely saves images. The default configuration defines the imagetools_toolbar setting to include only the epi-gotomedia button.

This plug-in supports dragging and dropping images from a local disk into the TinyMCE editor without uploading them to the media library first.

The editor displays an image preview immediately while uploading the file 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

Extend the TinyMCE editor with custom plug-ins to add functionality specific to your site.

Add your plug-in to the TinyMCE editor with the following steps.

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

services.Configure<TinyMceConfiguration>(config => {
  config.Default()
    .AddExternalPlugin("custom-plugin", "/plugins/custom-plugin.js") //plugins folder need be in wwwroot folder
    .AppendToolbar("custom-plugin");
});

Add client-side configuration

Use client-side configuration when a plug-in requires JavaScript callback functions that are not achievable through the C# API.

When a plug-in requires a callback function that is difficult to define in C# configuration, register 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 return a settings object to initialize the TinyMCE editor in the UI.

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

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 UI.