CODEWITHSUNDEEP
htmlcssstylestinymce
Qorey
Qorey

Reputation: 13

TinyMCE some custom text styles aren't selectable and some are

EDIT: Repeatable Fiddle for review: https://fiddle.tiny.cloud/P2haab

I am having an issue where I created a custom styles formats configuration option and my text styles sometimes work and sometimes do not work. Below is my current style_formats for reference:

style_formats: [
    { title: 'Table Row or List Styles' },
    { title: 'Light Gray', selector: 'tr,ul,ol', classes: 'bg__ltgray' },
    { title: 'Light Blue', selector: 'tr,ul,ol', classes: 'bg__ltblue' },
    { title: 'Light Teal', selector: 'tr,ul,ol', classes: 'bg__ltteal' },
    { title: 'Light Purple', selector: 'tr,ul,ol', classes: 'bg__ltpurple' },
    { title: 'List Styles' },
    { title: 'Dark Teal Text', selector: 'ul,ol', classes: 'text__dkteal' },
    { title: 'Dark Purple Text', selector: 'ul,ol', classes: 'text__dkpurple' },
    { title: 'Dark Blue Text', selector: 'ul,ol', classes: 'text__dkblue' },
    { title: 'Text Styles' },
    { title: 'White Text', inline: 'span', classes: 'text__white' },
    { title: 'Dark Blue Text', inline: 'span', classes: 'text__dkblue' },
    { title: 'Medium Blue Text', inline: 'span', classes: 'text__medblue' },
    { title: 'Dark Green Text', inline: 'span', classes: 'text__dkgreen' },
    { title: 'Dark Teal Text', inline: 'span', classes: 'text__dkteal' },
    { title: 'Dark Purple Text', inline: 'span', classes: 'text__dkpurple' },
    { title: 'Dark Blue Gray Text', inline: 'span', classes: 'text__dkbluegray' },
    { title: 'Medium Blue Gray Text', inline: 'span', classes: 'text__medbluegray' },
    { title: 'Dark Gray Text', inline: 'span', classes: 'text__dkgray' },
    { title: 'Medium Gray Text', inline: 'span', classes: 'text__medgray' },
],
paste_block_drop: false,
content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
                    + '.bg__ltgray {background-color: #ededee;}.bg__dkgray {background-color: #a5a7a9;}.bg__dkblue {background-color: #1a315b;}.bg__ltblue {background-color: #cdd6df;}.bg__medblue {background-color: #33587d;}.bg__dkgreen {background-color: #0a492c;}.bg__ltteal {background-color: #ceebeb;}.bg__dkteal {background-color: #00b9ad;}.bg__ltpurple {background-color: #e0d4e1;}.bg__dkpurple {background-color: #652767;}.bg__dkbluegray {background-color: #4b6e8c;}.bg__ltbluegray {background-color: #dbe2e8;}.bg__medbluegray {background-color: #6e8aa3;}.bg__dkgray {background-color: #a5a7a9;}.bg__medgray {background-color: #b9b7bb;}'
                    + '.text__white {color: #ffffff;} .text__dkblue {color: #1a315b;} .text__medblue {color: #33587d;} .text__dkgreen {color: #0a492c;} .text__dkteal {color: #00b9ad;} '
                    + '.text__dkpurple { color: #652767;} .text__dkbluegray { color: #4b6e8c; } .text__medbluegray { color: #6e8aa3; } .text__dkgray { color: #a5a7a9; } '
                    + '.text__medgray { color: #b9b7bb; } '

As you can see, all of the text styles are exactly the same, however, the user is only able to select a couple options out of the list, the others will show an unavailable mouse cursor, similar to if you try to use a list or table style when there is not a table or list to apply the style to.

Specifically, these are the colors that are and are not selectable:

I cannot find any rhyme or reason why these other styles cannot be applied. I've included a screenshot showing the mouse cursor when I attempt to apply one of the styles that does not work. Am I missing something in the configuration that would specifically limit these colors/style selections?

TinyMCE Styles Issue

Upvotes: 1

Views: 83

Answers (2)

Tiny Lincoln
Tiny Lincoln

Reputation: 1102

The Text Styles that are unselectable all share titles with List Styles:

  • Dark Teal Text
  • Dark Purple Text
  • Dark Blue Text

These List Styles will only be selectable if list content is present (as intended). However, because they share titles with Text Styles, and the title is used as the identifier for the format, the former (List Style) is overriding the latter (Text Style) in the dropdown menu.

In TinyMCE 5.6.0, the name field was added for formats which should resolve this while allowing for duplicate titles. Here is a Tiny Fiddle example using code from above:

https://fiddle.tiny.cloud/O2haab/2

Note the addition of the name property, for example:

{ name: 'text-dark-purple', title: 'Dark Purple Text', inline: 'span', classes: 'text__dkpurple' },

If you are not yet on TinyMCE 5.6.0, a workaround would be to edit the titles so there are no duplicates across different kinds of formats.

Upvotes: 1

Eric J Nesser
Eric J Nesser

Reputation: 36

It appears that the names of your styles must be globally unique and "Dark Blue Text" -- for example -- appears both in "List Styles" and "Text Styles." Changing one of the instances to be unique resolves the issue.

I would think that the name of the styles should only be unique in the section they appear, but this may just be a limitation with this version of TinyMCE.

Upvotes: 1

Related Questions