How can I make classes exclusive in TinyMCE?

  • Page Owner: Not Set
  • Last Reviewed: 2020-07-15

Okay, I would really really love if someone could PROVE me wrong. As far as I can tell. There is no way to make classes exclusive in any capacity through tiny MCE without a custom plugin.

This documentation says that style_merge_formats is a top level setting, not per item. and it only merges STYLES and FORMATS but not classes.

I used this documentation to create a style formats for tiny MCE, which works to apply classes, but no matter how many different ways I spin it, it never treats them as exclusive.

This Tiny Mce Question say that this is not a feature of tinyMCE.

Here is my working config with using style formats. (irrelevant code removed)

using Apta.Base.Initialization;
using Apta.Core.Models.Blocks;
using Apta.Core.Models.Pages;
using EPiServer.Cms.TinyMce.Core;
using EPiServer.Framework;
using EPiServer.Framework.Initialization;
using EPiServer.ServiceLocation;
using System.Collections.Generic;

namespace Foundation.Cms.Business
{
    [ModuleDependency(typeof(TinyMceInitialization))]
    public class AptaCoreTinyMceCustomization : IConfigurableModule, IInitializableModule
    {
        public void ConfigureContainer(ServiceConfigurationContext context)
        {
            context.Services.Configure<TinyMceConfiguration>(config =>
            {
                var aptaDefaultConfig = config.Default()
                       .Menubar("file edit insert view table tools help")
                       .AddPlugin("epi-link epi-image-editor epi-dnd-processor epi-personalized-content print preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media codesample table charmap hr pagebreak nonbreaking anchor toc insertdatetime lists textcolor wordcount imagetools help code")
                       .ContentCss("/static/apta/dist/css/editor.css")
                       .AddSetting("extended_valid_elements", "img[class|src|border=0|alt= |title|align|onmouseover|onmouseout|name], i[*], span[*], q[*]")
                       .Toolbar("epi-link | epi-image-editor | epi-personalized-content | cut copy paste | fullscreen", "styleselect  formatselect | bold italic superscript subscript blockquote | link unlink | alignleft aligncenter alignright alignjustify  | numlist bullist outdent indent  | removeformat", "table | code")
                       .AddSetting("formats", getFormats())
                       .StyleFormats(getStylesDropdown())
                       .BlockFormats("Paragraph=p;Heading 1=h1;Heading 2=h2;Heading 3=h3;Heading 4=h4;Heading 5=h5;Heading 6=h6;Preformatted=pre;Div=div");

                var basicTinyMceSettings = config.Empty()
                         .Toolbar("bold italic")
                         //.AddSetting("forced_root_block", "false")
                         .Height(300)
                         .Width(580);

                //// Set defaults
                TinyMceConfigurationUtility.ApplyDefaultConfiguration(config, aptaDefaultConfig,
                    typeof(AptaBaseBlock), typeof(AptaBasePage));

                config.For<BannerBlock>(z => z.Text, basicTinyMceSettings);

                //// Blocks
                //config.For<BannerBlock>(x => x.Text, basicTinyMceSettings);

                //// Pages
                //config.For<CoursePage>(x => x.CEUDisclaimer, basicTinyMceSettings);
            });
        }

        private object[] getStylesDropdown()
        {
            var styles = new List<object>
            {                  
                new
                {
                    title = "Image Alignment",
                    items = new List<object>()
                    {
                        new { title = "Left",  format = "imgleft" },
                        new { title = "Center", format = "imgcenter" },
                        new { title = "Right",  format = "imgright" }
                    }
                }
            };

            return styles.ToArray();
        }

        private object getFormats()
        {
            var formats = new Dictionary<string, object>
            {
                { "imgleft", new { title = "imgleft",  selector = "img", classes = "img-left"  } },
                { "imgright", new { title = "imgright", selector = "img", classes = "img-right" } },
                { "imgcenter", new { title = "imgcenter", selector = "img", classes = "img-center"  } }
            };
            return formats;
        }

        public void Initialize(InitializationEngine context)
        {
            //Required, not used
        }

        public void Uninitialize(InitializationEngine context)
        {
            //Required, not used
        }
    }
}