You can also achieve this by only styleformat
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);
});
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
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):
Regards Hans