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