tinymceepiservercustom-formatting

Do not allow multiple custom formats Tinymce


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. screenshot from tiny.cloud

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"?


Solution

  • 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>