Loading...

Last updated: Aug 23 2018

Area: Episerver CMS Applies to versions: TinyMCE v2 and higher
Other versions:

TinyMCE plug-ins

In this topic

Episerver's TinyMCE plug-ins

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

  • epi-link
    Handles links to Episerver 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 Episerver's custom image editor.
  • epi-dnd-processor
    Required if you want to drag and drop Episerver 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 Episerver because it is not integrated with how Episerver saves images, so in the default configuration we have also defined the imagetools_toolbar setting to only include Episerver's epi-gotomedia 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 Episerver 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.

  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 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 Episerver has a dependency to the user interface.


Do you have feedback on this documentation? Send an email to documentation@episerver.com. For development-related questions and discussions, refer to our Forums on https://world.episerver.com/forum/