TinyMCE add custom html via styleformats

Vote:

Hi,

We are in process of migrating EpiServer 11 to Optimizely ver. 12. We have also got a front-end framework AngularJS which we are also migrating to VueJS.

In our TinyMceConfiguration we have this styleformat

services.Configure<TinyMceConfiguration>(config =>
            {
                // Add the advanced list styles, table, and code plugins
                // and append buttons for inserting and editing tables
                // and showing source code to the toolbar
                config.Default()
                    .AddPlugin("xxx")
                    .Toolbar(
                        "xxx")
                    .StyleFormats(
                        new { title = "Accordion heading", block = "h2", classes = "accordion-header", }
                    )
                ;
            });
            return services;

this generates following html

<h2 class="accordion-header">Hello World</h2>

The accordion-header class is used as AngularJS directive but this class can't be used in VueJS directive. For VueJS directive to work I need special attribute in Html tag

e.g

<h2 v-accordion class="accordion-header">Hello World</h2>

How can I add this special attribute to above html via TinyMCE styleformats or by someother way ?

I tried to add format like this but it didn't work. The attirbute should be added directly to h2 html tag

public static IServiceCollection AddTinyMceCustomizations(this IServiceCollection services)
        {
            services.Configure<TinyMceConfiguration>(config =>
            {
                // Add the advanced list styles, table, and code plugins
                // and append buttons for inserting and editing tables
                // and showing source code to the toolbar
                config.Default()
                    .AddPlugin("xxx")
                    .Toolbar(
                        "xxxxe")
                    .StyleFormats(
                        new { title = "Accordion heading", block = "h2", attributes = new Dictionary<string,string> { {"v-accordion",""}}, classes = "accordion-header", }
                    )
                ;
            });
            return services;
        }

Sorry if this is little bit out of the scope of Optimizely

#300075

Apr 13, 2023 20:43

Mark Stott

Vote:

I think it's down to using block rather than selector:

var arrowLink = new { title = "Arrow Link", selector = "a", classes = RichTextEditors.ArrowLinkClass };
var standOutText = new { title = "Standout Text", selector = "p", classes = RichTextEditors.StandoutTextClass };

settings.AddPlugin("table anchor")
		.BlockFormats(
			"Paragraph=p;Header 2=h2;Header 3=h3;Header 4=h4;Header 5=h5;Header 6=h6")
		.StyleFormats(arrowLink, standOutText)
		.Toolbar(
			"formatselect styleselect | epi-link anchor | bold italic underline | superscript subscript | bullist numlist | image epi-image-editor",
			"table tabledelete tableprops tablerowprops tablecellprops tableinsertrowbefore tableinsertrowafter tabledeleterow tableinsertcolbefore tableinsertcolafter tabledeletecol",
			"epi-personalized-content | removeformat | undo redo searchreplace | fullscreen help");

FYI: in later versions of CMS 12, TinyMCE is updated from v2 and you'll have some minor changes, specifically `formatselect` and `styleselect` become `blocks` and `styles` in the toolbars.

var arrowLink = new { title = "Arrow Link", selector = "a", classes = RichTextEditors.ArrowLinkClass };
var standOutText = new { title = "Standout Text", selector = "p", classes = RichTextEditors.StandoutTextClass };

settings.AddPlugin("table anchor")
		.BlockFormats(
			"Paragraph=p;Header 2=h2;Header 3=h3;Header 4=h4;Header 5=h5;Header 6=h6")
		.StyleFormats(arrowLink, standOutText)
		.Toolbar(
			"blocks styles",
			"epi-link anchor | bold italic underline | superscript subscript | bullist numlist | image epi-image-editor",
			"table tabledelete tableprops tablerowprops tablecellprops tableinsertrowbefore tableinsertrowafter tabledeleterow tableinsertcolbefore tableinsertcolafter tabledeletecol",
			"epi-personalized-content | removeformat | undo redo searchreplace | fullscreen help");

#300244

Apr 17, 2023 8:39