TinyMCE default settings

5 min

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

The default configuration for TinyMCE uses the constants defined on the EPiServer.Cms.TinyMce.Core.DefaultValues class. See Plug-ins.

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

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

📘 Note The epi-dnd-processor plug-in is required for dragging and dropping Optimizely content.

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

"help image fullscreen lists searchreplace anchor"

The DefaultValues.Toolbar constant defines the default toolbar configuration:

"blocks bold italic align numlist bullist outdent indent epi-link anchor image epi-image-editor epi-create-block epi-personalized-content code"

Override the defaults

Override the default TinyMCE configuration to customize toolbar buttons, plugins, and editor behavior for your content types.

To override the default settings, use the TinyMceConfiguration setting.

The TinyMceSettings class provides helper methods for common TinyMCE settings. These methods map to the configuration settings documented on the TinyMCE website.

Configure settings that do not have a helper method by using the AddSetting or RawSettings methods.

  services.Configure<TinyMceConfiguration>(config => {
      config.Default()
        .AddSetting("directionality", "rtl");
    });

To override the default toolbar, use the following configuration:

   services.Configure<TinyMceConfiguration>(config => {
      config.Default()
        .Toolbar(
        "bold italic | epi-link image | numlist bullist",   // row 1
        "align | outdent indent | anchor help"   // row 2
    );
    });

To add a plugin, call AddPlugin to load it. If the plugin exposes a toolbar button, call AppendToolbar to add that button to the toolbar.

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();
  }
}