Do not allow multiple custom formats Tinymce - 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>