---
title: TinyMCE plug-ins
slug: cms-13/docs/tinymce-plug-ins
docTags: 
createdAt: 2026-07-30T20:22:01.868Z
---

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

![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/BbWzXJCLJCq7R8ePES6MK_09b3c71-new-editblock.png)

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

![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/EK9mZ09Z2D3r0AxPKrOOQ_9bd883d-new-gotomedia.png)

:::hint{type="info"}
**Note**
The `epi-image-tools` plug-in depends on the TinyMCE [imagetools](https://www.tiny.cloud/docs/tinymce/latest/migration-from-6x-to-8x/#image-tools-plugin-removal) 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](https://www.tiny.cloud/docs/tinymce/latest/available-toolbar-buttons/#image-plugin) 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:

```csharp
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](https://www.tiny.cloud/docs/tinymce/6/creating-a-plugin/)).
2. Add the following code to your `ServiceCollection` extension.

```csharp
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:

```csharp
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.

```javascript
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.