Customizing the Plone TinyMCE "Formats" menu is difficult (impossible?)

[keul]

I found this issue debugging the customization of the "Format" --> "Inline" submenu (see http://stackoverflow.com/questions/33828391/plone-5-why-tinymce-disable-custom-inline-styles).

Here what I think is impossible to be customized:

Ideally @vangheem reported the way to go in this ticket: https://github.com/plone/Products.CMFPlone/issues/492

What is know: the importcss TinyMCE plugin scans the ++plone++static/tinymce-styles.css which is more or less empty. See also the importcss reference. This is the piece of JSON configuration sent to TinyMCE:

...
'importcss_file_filter': u'http://localhost:8080/Plone/++plone++static/tinymce-styles.css',
...

The theme's manifest.cfg have a (not very documented) whay to add new styles there:

tinymce-styles-css = /++theme++my-theme/my-custom-menu-styles.css

So the JSON became this:

...
'importcss_file_filter': u'http://localhost:8080/Plone/++plone++static/tinymce-styles.css,http://localhost:8080/Plone/++theme++my-theme/my-custom-menu-styles.css',
...

For what I can see, also debugging TinyMCE internal, this is broken. I don't think that importcss supports two or more comma-separated CSS files. The result I get is a broken menu where all of the additional styles disappeared.

If this is true: I think that a way to override the default tinymce-styles.css is needed. Right now:

• you can't omit tinymce-styles.css: is harcoded.
• there's not way to override a plone:static resource (I tried z3c.jbot without success).

[jensens]

can this be considered as a regression, because in 4.3 this was possible?

[keul]

@jensens yes, it was possible, although TinyMCE was a lot different (no category, but a single dropdown menu)

[agitator]

do we have any working workaround?

[cekk]

I had the same problem yesterday. A (ugly) workaround could be patch this method

A possible fix, could be a field like "content_css" that allows to set manually a list of stylesheets, and if empty doesn't show anything.

[sunew]

Regarding overriding the tinymce-styles.css stylesheet:

This is a tinymce feature - see here: https://www.tinymce.com/docs/plugins/importcss/#importcss_file_filter

All tinymce settings can be overridden via the other_settings value - it is loaded as the last, setting new values or overriding any previously defined values - see https://github.com/plone/Products.CMFPlone/blob/master/Products/CMFPlone/patterns/tinymce.py#L226

Set it in the plone control panel under advanced->other settings, or via generic setup as below:

<record name="plone.other_settings" interface="Products.CMFPlone.interfaces.controlpanel.ITinyMCESchema" field="other_settings">
  <value>
{
  "importcss_file_filter": "++plone++my.staticfolder/tinymce-styles.css"
}
  </value>
</record>

But this is not enough - for this to take effect, the stylesheet to be loaded: You need to include it in the content_css tinymce setting too. This can be done via the theme manifest.cfg:

[theme]
...
tinymce-content-css = /++theme++ufm-intranet-2017/less/theme-compiled.css,/++plone++my.staticfolder/tinymce-styles.css

Put the tinymce-styles.css in your module in a static folder and verirfy you can load it directly in the browser.

Is the stylesheet really needed? Maybe we can achieve all it does by defining 'formats', and using these formats in the 'style_formats' setting. See below.

Regarding the formats menu in general: It can be configured also via the other_settings field, with the style_formats configuration. But be this will override any other format settings from the headers field etc. So here you need to dump the full standard configuration as json (I did it via a debugger session), and modify it.

Here is an example, where i restrict headers to h2, h3, h4, and move the headers to the top level of the formats menu to avoid having the user to navigate down two levels of dropdowns:

  <record name="plone.other_settings" interface="Products.CMFPlone.interfaces.controlpanel.ITinyMCESchema" field="other_settings">
    <value>
{
  "content_style": "body { padding: 10px; }  .accordion-text { display: block !important; }",
  "style_formats": [
    {
      "items": [
        {
          "format": "p",
          "title": "Paragraph"
        },
        {
          "format": "pre",
          "title": "Pre"
        }
      ],
      "title": "Block"
    },
    {
      "items": [
        {
          "format": "bold",
          "icon": "bold",
          "title": "Bold"
        },
        {
          "format": "italic",
          "icon": "italic",
          "title": "Italic"
        },
        {
          "format": "underline",
          "icon": "underline",
          "title": "Underline"
        },
        {
          "format": "strikethrough",
          "icon": "strikethrough",
          "title": "Strikethrough"
        },
        {
          "format": "superscript",
          "icon": "superscript",
          "title": "Superscript"
        },
        {
          "format": "subscript",
          "icon": "subscript",
          "title": "Subscript"
        },
        {
          "format": "code",
          "icon": "code",
          "title": "Code"
        }
      ],
      "title": "Inline"
    },
    {
      "items": [
        {
          "classes": "listing",
          "selector": "table",
          "title": "Listing"
        },
        {
          "classes": "invisible-grid",
          "selector": "table",
          "title": "Invisible Grid"
        }
      ],
      "title": "Tables"
    },
    {"title": "Quick access custom format",
     "inline": "span",
     "attributes": {
        "class": "custom-css-class"
      }
    },
    {
      "format": "h2",
      "title": "Header 2"
    },
    {
      "format": "h3",
      "title": "Header 3"
    },
    {
      "format": "h4",
      "title": "Header 4"
    }
  ],
  "importcss_file_filter": "++plone++my.staticfolder/tinymce-styles.css"
}
</value>
  </record>

I suggest closing this issue?

[pbauer]

I confirm that this works but I'm not happy with this solution yet because it only works if you have a custom theme. A field content_css would be a nice solution to this issue but it would be best if there was a way to override a individual plone:static resource. Glancing at the code in plone.resource and z3c.jbot that seems to be no easy task though.

[stevepiercy]

I just ran into this issue myself. Is there any way to do this without a custom theme? I assume that most Plone sites have custom themes, so maybe it's not a big deal.

I would be happy with a content_css field.

[iham]

@sunew thanks for your hint:

this is still a problem with no easy solution.

but i found one way: "importcss_file_filter": "no-tinymce-styles.css"

the file does not exist and therefore none of those formats are added. without errors or bad requests - don't ask me why. idk (null, false or "" didn't do the trick)

so you can get rid of them without having a theme or static resource yourself.

this is still an ugly hack imho, and no hardcoded styles like this would be awesome to be added via a content_css field in the tinymce control-panel settings.

[pbauer]

Fixed in https://github.com/zopefoundation/z3c.jbot/pull/12

[iham]

@pbauer

just to be sure...

the usage on this particular case would then be:

1. have a jbot directory registered (wherever you have a configure.zcml in your package and your "overrides" directory)

   
   <include package="z3c.jbot" file="meta.zcml" />

<browser:jbot directory="overrides" layer="my.package.interfaces.addon-or-browser-layer" />

2. add add the tinymce-styles.css by giving it the correct name
```plone.staticresources.static.tinymce-styles.css```
3. add/remove styles as needed there.

correct?

looking forward using this <3

[iham]

@pbauer another question rising:

according to plones 5.2 released versions.cfg (https://dist.plone.org/release/5.2/versions.cfg) z3c.jbot is pinned to version 0.8. is there a reason to stick to a 2 year old release?

[mauritsvanrees]

@iham I already updated z3c.jbot to 1.0.0 on coredev a month ago. Can now be updated to 1.1.0.

[pbauer]

@iham correct. plone.staticresources.static.tinymce-styles.css is the right name for that file and I just tested that it actually works fine.

[iham]

@mauritsvanrees and @pbauer

thats awesome! thanks for your fast input, guys!

i will use that approach as soon as it is standard (when plone will use 1.1.0+ of jbot)

[pbauer]

I already use it in production. There is no reason not to update your own version-pinns.