TinyMce StyleFormats + add wrapper to a selector

Dileep D

Vote:

Is there a way to add a span wrapper with style attributes and classes for an image selector using TinyMce Configurations. I want to be able to select and image and wrap it in a span element.

#337075

Feb 28, 2025 15:58

Binh Nguyen Thi

Vote:

Hi,

You can do that by modifying your TinyMCE configuration in Startup.cs

Here is an example code:

services.Configure<TinyMceConfiguration>(config =>
{
config.InheritSettingsFromAncestor = true;
config.Default()
.Toolbar("styles | bold italic underline | epi-link anchor | image epi-image-editor epi-personalized-content | bullist numlist outdent indent | epi-dnd-processor | removeformat | fullscreen code")
.StyleFormats(
new
{
title = "Wrap Image",
block = "span",
selector = "img",
classes = "image-wrapper",
styles = new
{
display = "inline-block",
border = "2px solid red",
padding = "5px"
}
});
});

#337142

Edited, Mar 07, 2025 9:23

Dileep D

Vote:

I am not sure what I missed earlier but I couldn't get this to work so I went the hard route of creating an external plugin for this issue. However trying your example also seems to work. I will go ahead and replace my external plugin code with this. Thank you.

#337146

Mar 07, 2025 22:13