Five New Optimizely Certifications are Here! Validate your expertise and advance your career with our latest certification exams. Click here to find out more

TinyMce StyleFormats + add wrapper to a selector

Vote:
0

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
Vote:
1

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
Vote:
0

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
* You are NOT allowed to include any hyperlinks in the post because your account hasn't associated to your company. User profile should be updated.