Add custom style to TinyMCE not working

Don't miss out Virtual Happy Hour this Friday (April 26).

Try our conversational search powered by Generative AI!

AI OnAI Off

Home / Forums / Developers (Main Products) Forum / Developer to developer /

Add custom style to TinyMCE not working

Mark A

Vote:

Hi,

With reference to the two articles below I'm trying to add custom styles to the TinyMCE editor. My preference is global but I've tested a single property and see the same result in both. Basically the Formats list is shown but there are no options in the list

https://docs.developers.optimizely.com/content-cloud/v12.0.0-content-cloud/docs/custom-style-formats

https://world.optimizely.com/blogs/jon-sexton/dates/2021/6/more-on-custom-style-formats-in-tinymce/

I have the code below in the initialization module.

Am I missing something really obvious? I assume yes!

                context.Services.Configure<TinyMceConfiguration>(config =>
                {
                    string row1 = "undo redo separator epi-personalized-content epi-link unlink anchor separator cut copy paste pastetext pasteword separator fullscreen image epi-image-editor media searchreplace separator table separator code";
                    string row2 = "bold italic alignleft  aligncenter alignright alignjustify separator epiquote bullist numlist separator indent outdent formatselect styleselect separator fontselect fontsizeselect forecolor backcolor subscript superscript removeformat";

                    config.Default()
                    .AddPlugin("media wordcount anchor code table paste importcss textcolor")
                    .Toolbar(row1, row2)
                    .AddSetting("width", 1000)
                    .AddSetting("height", 300)
                    .AddSetting("image_caption", true)
                    .AddSetting("image_advtab", true)
                    .StyleFormats(
                        new { title = "Center quote", inline = "span", classes = "js-editor-quote" });
                });

#289167

Oct 13, 2022 16:08

Paul Gruffydd

Vote:

Hi,

From a quick look, I suspect the issue is that you're using the importcss plugin which is probably conflicting with setting the available style formats directly. I'd try removing that from the "AddPlugin()" definition.

#289603

Oct 14, 2022 9:22

Mark A

Vote:

Thanks @Paul,

Yes that has fixed it. If we are adding custom css classes to the list would we need to define the CSS file in the .ContentCss setting? We currently don't have this set. If we set this will we then need to add in the importcss plugin again?

#289605

Oct 14, 2022 9:54

Paul Gruffydd

Vote:

Hi Mark.

Technically you don't need to provide a CSS file to include custom formats in the format list however, if you don't, elements with that format applied may not be visibly different from any other element or text in the editor so I'd say it's a good idea to include a CSS file using ContentCss. Even if you do add your own stylesheet, you wouldn't need the importcss plugin.

#289761

Oct 14, 2022 13:25

Mark A

Vote:

Thanks Paul, much appreciated!

#289781

Oct 14, 2022 13:30

This topic was created over six months ago and has been resolved. If you have a similar question, please create a new topic and refer to this one.