Loading...

Last updated: Aug 23 2018

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

Default settings

Episerver 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 Episerver TinyMCE plugins.

The DefaultValues.EpiserverPlugins constant defines the default Episerver 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 Episerver 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, add a new initialization module with a dependency on the default one.

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: https://www.tinymce.com/docs/configure/.

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

[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()
                .BodyClass("custom_body_class")
                .ContentCss("/static/css/editor.css")
                .AddSetting("directionality", "rtl");
        });
    }
}

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

[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()
                .AddEpiServerSupport()
                .Toolbar("custom toolbar items");
        });
    }
}

Related topics

Blog posts


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/