---
title: TinyMCE default settings
slug: cms-12/docs/default-settings
docTags: 
createdAt: 2026-08-10T15:56:01.000Z
---

Optimizely Content Management System (CMS) has a preconfigured TinyMCE editor that renders XHTML properties by default.

![preconfigured TinyMCE editor that renders XHTML properties](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/UxZ4oVMd7lZCGJyCyNApu-20260722-184804.png "new editor.png")

Set the following flags for TinyMCE to work properly CMS:

```csharp
services.Configure<TinyMcePropertySettingsOptions>(o => {  
  o.Enabled = true;  
  o.AllowAddingBlocks = false;  
});
```

The default configuration for TinyMCE uses the constants defined on the `EPiServer.Cms.TinyMce.Core.DefaultValues` class. See [Plug-ins](docId:-3RsTnMNgyn0QknGLjaGr).

The `DefaultValues.EpiserverPlugins` constant defines the default Optimizely plug-ins:

```csharp
"epi-block-tools epi-link epi-create-block epi-dnd-processor epi-personalized-content epi-image-editor epi-paste"
```

:::hint{type="info"}
**Note**
The epi-dnd-processor is a required plugin to drag and drop Optimizely content.
:::

The `DefaultValues.TinyMcePlugins` constant defines the default TinyMCE plug-ins:

```csharp
"help image fullscreen lists searchreplace anchor"
```

The `DefaultValues.Toolbar` constant defines the default toolbar configuration:

```csharp
"blocks | bold italic | epi-link epi-create-block anchor image epi-image-editor epi-personalized-content | bullist numlist outdent indent | searchreplace fullscreen | help"
```

### Override the defaults

To override the default settings, use the`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](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.

```csharp
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 plug-ins and styling configured.

```csharp
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:

```csharp
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 blog posts

- [Add a character map to TinyMCE](https://swapcode.wordpress.com/2018/08/14/easily-add-special-characters-in-episerver-tinymce-editor/)
- [How to change the delay between subsequent saves in Optimizely TinyMCE](https://bartoszsekula.com/post/2018/09/17/how-to-change-the-delay-between-subsequent-saves-in-episerver-tinymce)
- [Customize TinyMCE at runtime in Episerver 11](https://devblog.gosso.se/2018/09/customize-tinymce-at-runtime-in-episerver-11/)