Plone 5: why TinyMCE disable custom inline styles?

Question

I've an issue on TinyMCE and Plone 5 but I'm not sure if the core of the problem is in Plone CMS or TinyMCE.

I'm adding custom styles in the TinyMCE control panel configuration ("TinyMCE Settings" --> "Inline styles").

The new configuration is something like this:

Bold|bold|bold
Italic|italic|italic
Underline|underline|underline
Strikethrough|strikethrough|strikethrough
Superscript|superscript|superscript
Subscript|subscript|subscript
Code|code|code
Custom style|customClass|custom-class

Then the TinyMCE editor renders the menu correctly:

But the news entry is "disabled", clicking on it will do nothing. Inspecting the markup of the TinyMCE menu I find:

<div aria-checked="false" aria-disabled="true" role="menuitem" id="mceu_155" class="mce-menu-item mce-menu-item-preview mce-stack-layout-item mce-last mce-disabled" tabindex="-1">
    <i class="mce-ico mce-i-custom-class"></i>&nbsp;
    <span id="mceu_155-text" class="mce-text">Custom style</span>
</div>

So: TinyMCE is disabling it. The issue seems related to the class I'm using, not about the name I give or the missing icon. If I use a duplicate of another style, like...

...
Custom style|italic|custom-class

...it works. The same if I use another well know Plone class like...

...
Custom style|discreet|custom-class

... but someway other classes are not allowed.

Is this related to TinyMCE internals? Is TinyMCE someway "testing" the class to enable/disabled them? Or is this issue related to Plone?

Note that the syntax for inline styles stands for `Your Format Title|format_id|icon`. For block styles you just don't have the icon. So that's different from Plone 4's tinymce.xml where you'd specify `Your Format Title|tag|class`. That's why you need the additional JSON structure, there you define each format, keyed by its id. See https://github.com/davilima6/smdu.participacao/blob/master/src/smdu/participacao/profiles/default/registry.xml#L57-L96 — Davi Lima, Jun 22 '16 at 18:15

keul · Accepted Answer · 2015-11-26T17:51:15.113

After lot of debugging, loosing myself inside the mockup+Plone JSON conf+TinyMCE hell, I found a solution for that usecase:

Having additional and working inline style is a matter of both "Inline Styles" configuration...

...and "Formats" configuration...

So: you can easily configure this also through generic setup providing a registry.xml as follow:

<registry>

    <record name="plone.inline_styles" interface="Products.CMFPlone.interfaces.controlpanel.ITinyMCESchema" field="inline_styles">
        <value>
            <element>Bold|bold|bold</element>
            <element>Italic|italic|italic</element>
            <element>Underline|underline|underline</element>
            <element>Strikethrough|strikethrough|strikethrough</element>
            <element>Superscript|superscript|superscript</element>
            <element>Subscript|subscript|subscript</element>
            <element>Code|code|code</element>
            <element>Foo Bar Baz|foo|foo</element>
        </value>
    </record>

    <record name="plone.formats" interface="Products.CMFPlone.interfaces.controlpanel.ITinyMCESchema" field="formats">
        <value>{
    "clearfix": {
        "classes": "clearfix",
        "block": "div"
    },
    "discreet": {
        "inline": "span",
        "classes": "discreet"
    },
    "foo": {
        "inline": "span",
        "classes": "foo"
    }
}
</value>
    </record>

</registry>

NOTE: this is not related to the content of the "Formats" menu.

Styles there are automatically loaded from the ++plone++static/tinymce-styles.css stylesheets thanks to the TinyMCE importcss plugin.

See https://github.com/plone/Products.CMFPlone/issues/492 and https://github.com/plone/Products.CMFPlone/issues/1264 for more.

Glad I found this before I got any further into figuring out how to add custom styles! Wow, thanks for figuring this out! — Christina, Feb 12 '16 at 01:37
See also https://github.com/plone/Products.CMFPlone/issues/1264#issuecomment-368617473 - explaining how to customize the full content of the formats menu — sunew, Feb 26 '18 at 19:29

Plone 5: why TinyMCE disable custom inline styles?

1 Answers1