TinyMce: p-tag with introduction-class

Vote:
 

EPiServer 11
EPiServer.Cms.TinyMce v2

If I want to have the following block-formats:
Paragraph: <p></p>
Heading 2: <h2></h2>
Heading 3: <h3></h3>
Heading 4: <h4></h4>
Introduction: <p class="introduction"></p>

Can I handle it with only BlockFormats or do I need to add StyleFormats?

This is my current "EditorInitialization" module (put questions as comments):

using System;
using EPiServer.Cms.TinyMce.Core;
using EPiServer.Framework;
using EPiServer.Framework.Initialization;
using EPiServer.Security;
using EPiServer.ServiceLocation;

namespace RegionOrebroLan.WorldWideWeb.Business.Initialization
{
	[ModuleDependency(typeof(TinyMceInitialization))]
	public class EditorInitialization : IConfigurableModule
	{
		#region Methods

		public virtual void ConfigureContainer(ServiceConfigurationContext context)
		{
			if(context == null)
				throw new ArgumentNullException(nameof(context));

			context.Services.Configure(configuration =>
			{
				configuration.Default()
					.AddPlugin("anchor", "spellchecker", "table")
					.BlockFormats("Paragraph=p;Header 2=h2;Header 3=h3;Header 4=h4")
					// Can I add a class to BlockFormats?
					//.StyleFormats(), or do I need StyleFormats? If I need it I guess I need to add "styleselect" as Toolbar.
					.Toolbar("formatselect removeformat | bold bullist numlist blockquote superscript | table | cut copy paste | undo redo", "anchor epi-link image epi-image-editor epi-personalized-content | searchreplace spellchecker")
					.AddSettingsTransform("Administrators", (settings, content, propertyName) =>
					{
						var principal = ServiceLocator.Current.GetInstance().Principal;

						if(principal == null || !principal.IsInRole("CMSAdmins"))
							return;

						settings.AddPlugin("code").AppendToolbar("| code", 1);
					});
			});
		}

		public virtual void Initialize(InitializationEngine context) { }
		public virtual void Uninitialize(InitializationEngine context) { }

		#endregion
	}
}

Regards Hans

#210564
Edited, Nov 27, 2019 20:12
Hans Kindberg - Nov 27, 2019 20:31
Thank you for your answer

Yeah, I read that. But as I remember you could accomplish what I want before, with v1. In our intranet we still have TinyMce v1 and there we have, in the same dropdown, both p and p with a class.

So I will wait to see if there are more answers.

/Hans
Vote:
 

You can also achieve this by only styleformat

https://medium.com/c2-group/big-changes-for-tinymce-in-episerver-configuration-for-update-206-with-code-examples-cbfe956acc1e

context.Services.Configure<TinyMceConfiguration>(config =>
{
    var extendedSettings = config.Default().Clone();
    
    extendedSettings.AddPlugin("code", "paste", "anchor", "table", "media", "link");
    
    extendedSettings.Toolbar("epi-link unlink anchor image epi-image-editor media epi-personalized-content | cut copy paste pastetext searchreplace | fullscreen",
    "bold italic superscript subscript | bullist numlist | styleselect | removeformat | alignleft aligncenter alignright alignjustify outdent indent",
    "table | help code");
    
    var headerStyles = new
    {
        title = "Super Cool Header Styles",
        items = new[]
        {
            new {title = "Header 1", format = "h1"},
            new {title = "Header 2", format = "h2"},
            new {title = "Header 3", format = "h3"}
        }
    };

    var borderStyle = new
    {
        title = "Cool Border",
        classes = "coolBorder penguins",
        block = "p",
    };
    
    extendedSettings.StyleFormats(headerStyles, borderStyle);
    extendedSettings.ContentCss("/Content/Site.css");
    
    config.For<StartPage>(x => x.MainBody, extendedSettings);
});
#210567
Edited, Nov 27, 2019 20:46
Vote:
 

Thank you Ravindra

I like the blockformats, because it indicates clearly the format of the selected block, without having to look in the dropdown-list. Thats why I choosed to have a combination of block-formats and style-formats. A problem with TinyMce (not EPiServer) is that if you chosen p with introduction class and then changes the block to eg. h2, the introduction-class remains, https://community.tiny.cloud/communityQuestion?id=90661000000IiyjAAC. So the best I could come up with to achieve what I want (and at the same time make the editors awair of it) was the following:

using System;
using System.Diagnostics.CodeAnalysis;
using EPiServer.Cms.TinyMce.Core;
using EPiServer.Framework;
using EPiServer.Framework.Initialization;
using EPiServer.Security;
using EPiServer.ServiceLocation;

namespace RegionOrebroLan.WorldWideWeb.Business.Initialization
{
	[ModuleDependency(typeof(TinyMceInitialization))]
	public class EditorInitialization : IConfigurableModule
	{
		#region Methods

		[SuppressMessage("Style", "IDE0050:Convert to tuple")]
		public virtual void ConfigureContainer(ServiceConfigurationContext context)
		{
			if(context == null)
				throw new ArgumentNullException(nameof(context));

			context.Services.Configure(configuration =>
			{
				configuration.Default()
					.AddPlugin("anchor", "spellchecker", "table")
					.BlockFormats("Paragraph=p;Header 2=h2;Header 3=h3;Header 4=h4")
					.StyleFormats(
						new {block = "p", classes = "introduction", selector = "p,h2,h3,h4", title = "Introduction"}
					)
					.Toolbar(
						"formatselect | styleselect | removeformat",
						"bold bullist numlist blockquote superscript | table | cut copy paste | undo redo",
						"anchor epi-link image epi-image-editor epi-personalized-content | searchreplace spellchecker"
					)
					.AddSettingsTransform("Administrators", (settings, content, propertyName) =>
					{
						var principal = ServiceLocator.Current.GetInstance<IPrincipalAccessor>().Principal;

						if(principal != null && principal.IsInRole("WebAdmins"))
							settings.AddPlugin("code").AppendToolbar("| code", 2);
					});
			});
		}

		public virtual void Initialize(InitializationEngine context) { }
		public virtual void Uninitialize(InitializationEngine context) { }

		#endregion
	}
}

Regards Hans

#210573
Edited, Nov 28, 2019 11:07