Dev GuideAPI ReferenceUser Guide
HomeDev GuideAPI Reference
Dev GuideAPI ReferenceUser GuideGitHubNuGetDev CommunityDoc feedbackLog In
GitHubNuGetDev CommunityDoc feedback

## 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 [Plug-ins](🔗).

  • **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.

580


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.

577


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  which Optimizely has submitted a [bug fix](🔗) to. The bug is still pending review.

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


## Add 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 `ServiceCollection` extension

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

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.

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