Loading...
Area: Optimizely CMS
Applies to versions: 3 and higher
Other versions:

Default settings

Recommended reading 

Optimizely comes with a preconfigured TinyMCE editor that renders all XHTML properties by default.

The default configuration for TinyMCE uses the constants defined on the EPiServer.Cms.TinyMce.Core.DefaultValues class. For information about plugins, see Optimizely TinyMCE plugins.

The DefaultValues.EpiserverPlugins constant defines the default Optimizely plugins:

"epi-link epi-image-editor epi-dnd-processor epi-personalized-content"

Note: The epi-dnd-processor is a required plugin to drag and drop Optimizely content.

The DefaultValues.TinyMcePlugins constant defines the default TinyMCE plugins:

"help image fullscreen lists searchreplace"

The DefaultValues.Toolbar constant defines the default toolbar configuration:

"formatselect | bold italic | epi-link image epi-image-editor epi-personalized-content 
    | bullist numlist outdent indent | searchreplace fullscreen | help"

Overriding the defaults

To override the default settings, use ServiceCollection extension.

The TinyMceSettings class provides helper methods for setting the most common settings within TinyMCE, which map to the configuration settings documented on TinyMCE's website.

However, you can configure settings that do not have a helper method by using the AddSetting or RawSettings methods.

public static class ServiceCollectionExtentions
{
    public static IServiceCollection AddTinyMceConfiguration(this IServiceCollection services)
    {
        services.Configure<TinyMceConfiguration>(config =>
        {
            config.Default()
                .BodyClass("custom_body_class")
                .ContentCss("/static/css/editor.css")
                .AddSetting("directionality", "rtl");
        });
        return services;
    }
}

When overriding the defaults, you should call the AddEpiserverSupport method to get the basic Optimizely plugins and styling configured.

public static class ServiceCollectionExtentions
{
    public static IServiceCollection AddTinyMceConfiguration(this IServiceCollection services)
    {
        services.Configure<TinyMceConfiguration>(config =>
        {
            config.Default()
                .AddEpiserverSupport()
                .Toolbar("custom toolbar items");
        });
        return services;
    }
}

AddTinyMceConfiguration should be added to the Startup.cs like:

    public class Startup
    {
        private readonly IWebHostEnvironment _webHostingEnvironment;
        private readonly IConfiguration _configuration;

        public Startup(IWebHostEnvironment webHostingEnvironment, IConfiguration configuration)
        {
            _webHostingEnvironment = webHostingEnvironment;
            _configuration = configuration;
        }

        public void ConfigureServices(IServiceCollection services)
        {
            services.AddTinyMceConfiguration();
        }
    }

Related topics

Blog posts

Do you find this information helpful? Please log in to provide feedback.

Last updated: Sep 28, 2021

Recommended reading