Do not allow multiple custom formats Tinymce

Question

When playing around in the online editor at this url: https://www.tiny.cloud/docs/demo/format-custom/ it is quite possible to apply multiple custom formats.

I would claim multiple custom formats is the default behaviour, however we have a request to change this. Is it even possible to configure Tinymce to allow only one custom format at a time? Given the screenshot example, let's say it's not allowed to combine "red header" with "bold text"?

Answer 1

This isn't really Episerver-specific, but rather about TinyMCE.

There are examples of people creating a custom format button which only allows one (1) format to be selected: https://codepen.io/thibbiuf/pen/JKBkXy?editors=1000

You could create your own TinyMCE plugin and then add it to the editor in Episerver:

[ModuleDependency(typeof(TinyMceInitialization))]
public class ExtendedTinyMceInitialization : IConfigurableModule
{
    public void Initialize(InitializationEngine context)
    {
    }

    public void Uninitialize(InitializationEngine context)
    {
    }

    public void ConfigureContainer(ServiceConfigurationContext context)
    {
        context.Services.Configure<TinyMceConfiguration>(config =>
        {
            config.Default()
                .AddPlugin("custom_styleselect")
                .AppendToolbar("custom_styleselect");
        });
    }
}

There are multiple ways to add a TinyMCE plugin, but one way is to load a custom script file when TinyMCE loads in Episerver by adding something like the following to module.config:

<?xml version="1.0" encoding="utf-8"?>
<module name="Your.Website" >

  <clientResources>
      <add name="epi-addon-tinymce.main" path="ClientResources/tinymce/custom_styleselect/Plugin.js" resourceType="Script" />
  </clientResources>

</module>