TinyMCE property configuration

5 min

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

// create configuration for the main body property on the article page type
  config.For<ArticlePage>(t => t.MainBody)
    .AddPlugin("print")
    .Toolbar("cut", "paste")
    .DisableMenubar();
    
  // 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);

Another option is to create a configuration instance and then use that on multiple properties:

// create a simple configuration by cloning the default and modifying it
  var simpleConfiguration = config.Default().Clone()
    .BodyClass("simple_body")
    .AddPlugin("spellchecker");
        
  // use the configurations we created earlier on different properties
  config.For<ArticlePage>(a => a.MainBody, simpleConfiguration);
  config.For<NewsPage>(a => a.MainBody, simpleConfiguration);

Building on the example above, you can also extend existing configurations if you need some additional configuration for a specific property:

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

Remember to call the Clone method so you do not affect the configuration you want to extend.

Set custom configuration

Some settings are not available as strongly typed API. For example, you could have developed your own TinyMCE plugin requiring a custom setting.

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

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

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

Example with many options set

The following example shows an options set and a toolbar with three rows:

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 the values to the existing configuration. Calling ClearPlugins before AddPlugin to overwrite the list of registered plugins.

The Toolbar method overwrites the previously configured values, so the result might not be what you expect. If you want to add to an existing configuration, use AppendToolbar instead.

Putting the previous examples together, you might end up with a configuration that looks something like this:

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")
          .Toolbar("cut", "paste")
          .DisableMenubar();

        // 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()
          .BodyClass("simple_body")
          .AddPlugin("spellchecker");

        // 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")
          .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;
    }
  }

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