TinyMCE property configuration

5 min

Define a TinyMCE configuration for specific content type properties to control the toolbar, plugins, and editor behavior per property. Reuse and extend configurations across page types to keep your setup consistent.

Create a configuration for a property on one page type and copy that configuration to another page type property:

// create configuration for the main body property on the article page type
services.Configure<TinyMceConfiguration>(config =>
{
    config.For<ArticlePage>(t => t.MainBody)
    .AddPlugin("print").AppendToolbar("print")
    .Toolbar("cut", "paste");

    // use settings from the article page types MainBody property 
    // on the SecondaryBody property of the standard page type.
  	config.Use<ArticlePage, StandardPage>(p => p.MainBody, s => s.SecondaryBody);
});

Create a configuration instance and reuse it on multiple properties:

// create a simple configuration by cloning the default and modifying it
services.Configure<TinyMceConfiguration>(config =>
{
   var simpleConfiguration = config.Default()
     .Clone()                          // clone first
     .AddTinyMceSpellCheckerPlugin()   // add spellchecker into clone
     .AppendToolbar("spellchecker");   // insert plugin into the toolbar
        
	 	// use the configurations we created earlier on different properties
     config.For<ArticlePage>(a => a.MainBody, simpleConfiguration);
     config.For<NewsPage>(a => a.MainBody, simpleConfiguration);
});

Extend existing configurations when you need additional settings for a specific property:

// extend the simple configuration with more advanced plugins
services.Configure<TinyMceConfiguration>(config =>
{
    var advancedConfiguration = simpleConfiguration.Clone()
    .AddPlugin("epi-link code")
    .AppendToolbar("epi-link | code");
    
    config.For<StandardPage>(a => a.MainBody, advancedConfiguration);
});

Call the Clone method to avoid modifying the configuration you want to extend.

Set custom configuration

Some settings are not available as strongly typed API methods. For example, a custom TinyMCE plugin might require a setting not covered by the API.

To set a custom setting, use the AddSetting or RawSetting methods:

services.Configure<TinyMceConfiguration>(config =>
{
    var extraCustomSettings = new Dictionary<string, object> {{"custom_tinymce_setting", "foo"}};
    var customConfig = config.Default().Clone()
    .AddSetting("my_own_setting", "lorem ipsum", true)
    .RawSettings(extraCustomSettings);
    
  	config.For<EditorialBlock>(a => a.MainBody, customConfig);
});

The AddSetting method adds a single setting. The RawSettings method adds multiple settings at once.

The AddSetting method includes a registerAsEditorOption boolean parameter that lets you register a setting as a TinyMCE option.

The RawSetting method has an overload that takes a JSON string.

Configure a property with multiple options

The following example configures multiple options and a toolbar with three rows:

services.Configure<TinyMceConfiguration>(config =>
{
    config.For<ProductPage>(p => p.MainBody)
    .Menubar("file edit insert view format table tools help")
    .ClearPlugins()
    .AddPlugin(@ "epi-link epi-image-editor epi-dnd-processor 
     epi-personalized-content print preview searchreplace autolink directionality visualblocks visualchars 	fullscreen image link media template codesample table charmap hr pagebreak nonbreaking anchor toc insertdatetime advlist lists textcolor wordcount imagetools contextmenu colorpicker textpattern help ")
    .Toolbar(
      "epi-link | epi-image-editor | epi-personalized-content | cut copy paste | fullscreen",
      @"styleselect formatselect | bold italic strikethrough forecolor backcolor  |
      link | alignleft aligncenter alignright alignjustify |
      numlist bullist outdent indent | removeformat ",
      "table | toc | codesample");
});

The AddPlugin method adds values to the existing plugin list. Call ClearPlugins before AddPlugin to overwrite the list of registered plugins.

The Toolbar method overwrites previously configured values. To add to an existing configuration instead of replacing it, use AppendToolbar.

The following example combines the previous configurations into one ServiceCollection extension:

public static class ServiceCollectionExtentions {
  public static IServiceCollection AddTinyMceConfiguration(this IServiceCollection services) {
    services.Configure<TinyMceConfiguration>(config => {
        // create configuration for the main body property on the article page type
        config.For<ArticlePage>(t => t.MainBody)
        .AddPlugin("print").AppendToolbar("print")
        .Toolbar("cut", "paste");		

        // use settings from the article page types MainBody property 
        // on the SecondaryBody property of the standard page type.
      	config.Use<ArticlePage, StandardPage>(p => p.MainBody, s => s.SecondaryBody);

         // create a simple configuration by cloning the default and modifying it
         var simpleConfiguration = config.Default()
         .Clone()                          // clone first
         .AddTinyMceSpellCheckerPlugin()   // add spellchecker into clone
         .AppendToolbar("spellchecker");   // insert plugin into the toolbar
        
         // use the configurations we created earlier on different properties
         config.For<ArticlePage>(a => a.MainBody, simpleConfiguration);
         config.For<NewsPage>(a => a.MainBody, simpleConfiguration);

         // extend the simple configuration with more advanced plugins
         var advancedConfiguration = simpleConfiguration.Clone()
          .ClearPlugins()
          .AddPlugin("epi-link code")
          .AppendToolbar("epi-link | code");

        config.For<StandardPage>(a => a.MainBody, advancedConfiguration);

        // for setting custom settings that are not available as API methods you can use these options
        var extraCustomSettings = new Dictionary<string, object> {{"custom_tinymce_setting", "foo"}};
        var customConfig = config.Default().Clone()
        .AddSetting("my_own_setting", "lorem ipsum", true)
        .RawSettings(extraCustomSettings);

        config.For<EditorialBlock>(a => a.MainBody, customConfig);

        // An example with a highly configured property using three rows in its toolbar
        config.For<ProductPage>(p => p.MainBody)
          .Menubar("file edit insert view format table tools help")
          .ClearPlugins()
          .AddPlugin(@ "epi-link epi-image-editor epi-dnd-processor 
            epi - personalized - content print preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template codesample table charmap hr pagebreak nonbreaking anchor toc insertdatetime advlist lists textcolor wordcount imagetools contextmenu colorpicker textpattern help ")
            .Toolbar(
              "epi-link | epi-image-editor | epi-personalized-content | cut copy paste | fullscreen",
              @ "styleselect formatselect | bold italic strikethrough forecolor backcolor  |
              link | alignleft aligncenter alignright alignjustify |
              numlist bullist outdent indent | removeformat ",
              "table | toc | codesample");

          });

      return services;
    }
  }

Add AddTinyMceConfiguration to Startup.cs as follows:

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