Configure TinyMCE support

How it works

A custom plugin is available to add support for adaptive images in TinyMCE content.

If the plugin is added, drag-and-dropping an image from the Media tab, i.e. a CMS image of type ImageData, by default presents the user with a dialog asking whether to convert the image to an adaptive image.

This is done by wrapping an AdaptiveImage instance in a block which is added to the TinyMCE editor.

Images drag-and-dropped from the Image bank to TinyMCE are always inserted as adaptive images.

1. Add the TinyMCE plugin

The following adds support for adaptive images in the MainBody property of the ArticlePage page type.

    using AdaptiveImages.Configuration;
    using AdaptiveImages.TinyMce;
    using EPiServer.Cms.TinyMce.Core;
    using Microsoft.Extensions.DependencyInjection;

    public class Startup
    {
        public void ConfigureServices(IServiceCollection services)
        {
            if (AddonSettings.Enabled)
            {
                services.Configure<TinyMceConfiguration>(config =>
                {
                    config.For<ArticlePage>(t => t.MainBody)
                          .AddPlugin(TinyMceAddonSettings.PluginName);
                });
            }

        }
    }
}

2. Set drag-and-drop behavior for CMS images

To change the default behavior to always convert images without asking the user we set the ImageConversionBehavior setting of the current ITinyMceAddonSettings instance in the Configure method.

using AdaptiveImages.Configuration;
using AdaptiveImages.TinyMce;
using Microsoft.AspNetCore.Builder;

public class Startup
{
    public void Configure(IApplicationBuilder app, ITinyMceAddonSettings tinyMceAddonSettings)
    {
        if (AddonSettings.Enabled)
        {
            tinyMceAddonSettings.ImageConversionBehavior = ImageConversionBehavior.AlwaysConvert;
        }
    }
}

Note: You may alternatively pass an ITinyMceAddonSettings instance to AddAdaptiveImages().

3. Change wrapper block type

To add constraints to adaptive images in TinyMCE, you need a custom block type implementing [ITinyMceAdaptiveImage](xref:AdaptiveImages.TinyMce.ITinyMceAdaptiveImage).

If you don't want to implement rendering, you can inherit TinyMceAdaptiveImage instead of implementing ITinyMceAdaptiveImage.

using AdaptiveImages.Core;
using AdaptiveImages.Models;
using AdaptiveImages.TinyMce;
using AdaptiveImages.Validation;
using EPiServer.DataAnnotations;

[ContentType(AvailableInEditMode = false)]
public class CustomTinyMceAdaptiveImageBlock : TinyMceAdaptiveImage
{
    [Size(1920, FormFactor.Large)]
    [Size(1280, FormFactor.Medium | FormFactor.Small)]
    [Proportions(16, 9, FormFactor.Large)]
    [Proportions(3, 2, FormFactor.Medium)]
    [Proportions(1, 1, FormFactor.Small)]
    public override AdaptiveImage AdaptiveImage { get; set; }
}

Next, set the BlockContentTypeId property of the current ITinyMceAddonSettings instance to the block content type ID.

using AdaptiveImages.Configuration;
using AdaptiveImages.TinyMce;
using EPiServer.DataAbstraction;
using Microsoft.AspNetCore.Builder;

public class Startup
{
    public void Configure(IApplicationBuilder app, ITinyMceAddonSettings tinyMceAddonSettings, IContentTypeRepository contentTypeRepository)
    {
        if (AddonSettings.Enabled)
        {
            tinyMceAddonSettings.ImageConversionBehavior = ImageConversionBehavior.AlwaysConvert;

            tinyMceAddonSettings.BlockContentTypeId = contentTypeRepository.Load(typeof(CustomTinyMceAdaptiveImageBlock)).ID;
        }
    }
}

Note: We do this in the Configure method since we need the IContentTypeRepository instance to resolve the block content type ID.