Can't add original style to Plone5 tinyMCE

Plone Support Theming
1

With Plone 4.x, I cloud add original style, such as extra H2 style, to TinyMCE 'Style" setting.

But in Plone5 TinyMCE 'Style' setting box has gone. I tried to add my original style to 'Header styles' and 'Body styles' box but It only works with 'inline' elements not work with block elements.

How can I add class to Plone5 TinyMCE?

For example, enter 'Heading|h2|foo' transformed to

.

Thank you.

2

In Plone 4 we had TinyMCE 3. In Plone 5 we upgraded to TinyMCE 4, which works with a new concept called formats and a new syntax for inline styles, which is Your Custom Format Title|custom_format_id|custom_icon. For block styles you omit the last part, that is, the icon. As you observed, that's different from Plone 4's tinymce.xml where you specify Your Format Title|tag|class.

So after you associate format titles and format ids, you need to define what that format id means. You can do that using the Formats textarea field. There's already a JSON structure in that field, so you'd add an entry after discreet, ending with something like:

{
    "clearfix": {
        "classes": "clearfix", 
        "block": "div"
    }, 
    "discreet": {
        "inline": "span", 
        "classes": "discreet"
    },
    "format_id": {
        "inline": "span", 
        "classes": "one or-more-css-classes that-will-be-applied"
    }
}

You can learn all the available options in https://www.tinymce.com/docs/configure/content-formatting/#formatparameters

3

Add the following Record to your registry.xml with your own Style-Definitions:

<record
  interface="Products.CMFPlone.interfaces.controlpanel.ITinyMCESchema"
  prefix="plone"
  field ="other_settings">
  <value purge="False">
  {
    "style_formats" : [
      {
        "title" : "Paragraph Blue",
        "block" : "p",
        "attributes" : {
          "class": "highlight-blue"
        }
      },
      {
        "title" : "Paragraph clearfix",
        "block" : "p",
        "attributes" : {
          "class": "clearfix"
        }
      }],
    "style_formats_merge": "True"
  }
  </value>
</record>
1 Like
4

I made a PR to update the docs on this.

5

Is it possible to add more styles to images, too ?

( .image-left-with-border, .image-right-with-popup, etc )

6

Please Test, but i don't know really:

{
  "title" : "Image Left",
  "inline" : "img",
  "attributes" : { "class": "image-left" }
}
7

Thank you guys for a lot of input.
I'll try them.

8

I could add my original style definition to TInyMCE successfully.
Thank you, Davi updating information page.

Plone community is always 'Super' ! Thank you all !

1 Like