CODEWITHSUNDEEP
csstinymceepiserver
Eashan
Eashan

Reputation: 438

TinyMCE "EditMenuName" css property is not working after upgrading Episerver to version 11.5

After upgrading Episerver to version 11.5, the TinyMCE feature of being able to set custom names for menu items in a drop down is no longer working.

The special custom CSS attribute called EditMenuName is not working I guess. those menu items only showing particular CSS class names. not the names which are provided as "EditMenuName" attributes.

How do I get this feature working again?

Upvotes: 3

Views: 814

Answers (1)

Johan Petersson
Johan Petersson

Reputation: 1027

There is no support for this. What you can do instead is to add these items to the style_formats, please see https://www.tinymce.com/docs/configure/content-formatting/#style_formats. More information on how you can customize the editor https://world.episerver.com/documentation/developer-guides/CMS/add-ons/customizing-the-tinymce-editor-v2/.

Here's an example configuration:

config
.Default()
.Schema(TinyMceSchema.Html5Strict)
.ContentCss("/gui/css/base.css")
.AddPlugin("link table paste code contextmenu")
.Toolbar(
    "styleselect undo redo pastetext removeformat searchreplace code fullscreen",
    "bold italic numlist bullist outdent indent table epi-link unlink image epi-image-editor epi-personalized-content")
.StyleFormats(
    new { title = "Paragraph", format = "p" },
    new { title = "Header 2", format = "h2" },
    new { title = "Header 3", format = "h3" },
    new { title = "Header 4", format = "h4" },
    new
    {
        title = "Inline",
        icon = "forecolor",
        items = new[]
        {
            new { title = "Strikethrough", format = "strikethrough", icon = "strikethrough" },
            new { title = "Superscript", format = "superscript", icon = "superscript" },
            new { title = "Subscript", format = "subscript", icon = "subscript" },
            new { title = "code", format = "code", icon = "code" }
        }
    },
    new
    {
        title = "Blocks",
        icon = "template",
        items = new[]
        {
            new { title = "Blockquote", format = "blockquote" },
            new { title = "Preformatted", format = "pre" },
        }
    },
    new
    {
        title = "Images",
        icon = "image",
        items = new[]
        {
            new { title = "Left", selector = "img", classes = "left", icon = "alignleft" },
            new { title = "Right", selector = "img", classes = "right", icon = "alignright" },
            new { title = "Full-width", selector = "img", classes = "fullwidth", icon = "alignjustify" }
        }
    },
    new
    {
        title = "Tables",
        icon = "table",
        items = new[]
        {
            new { title = "Left", selector = "table", classes = "left", icon = "alignleft" },
            new { title = "Right", selector = "table", classes = "right", icon = "alignright" },
            new { title = "Full-width", selector = "table", classes = "fullwidth", icon = "alignjustify" }
        }
    });

Upvotes: 3

Related Questions