TinyMCE add custom CSS-Class for Headings, Blocks [SOLVED]

Plone Support Add-on Development
1

Hi,
after digging through Plone, and Mockup.
How can I add a custom Heading (header_styles), or Block (block_styles) CSS-Classes?

This is how I did it in Plone4

Accordion Heading|h2|css-accordion-heading

But since mockup the last part is used as icon for TinyMCE-Dropdown-Icon (Source)

And as far as I have tried, "Formats" arent also not working...

Plone 5.1-latest

2

In the registry.xml you can put some Editor-Config-Values:

<!-- register custom css settings for editor -->
<record
  name="plone.other_settings"
  interface="Products.CMFPlone.interfaces.controlpanel.ITinyMCESchema"
  field="other_settings">
        
  <field type="plone.registry.field.Text">
    <default/>
    <description>Editor Settings, push JSON to Configure the Editor, Read Docs!</description>
    <required>False</required>
    <title>Other Settings</title>
  </field>
  <value>
    {
      "style_formats" : [
        {
          "title" : "Video",
          "inline" : "span",
          "attributes" : {
            "class": "wcvideo"
          }
        },
       { "title": "Image Responsive", "selector": "img", "classes" : "img-responsive" },
       { "title": "Link Download", "selector": "a", "classes" : "link-list link-download" },
       { "title": "Link Member", "selector": "a", "classes" : "link-list link-network" },
       { "title": "Link Activity", "selector": "a", "classes" : "link-list link-activity" },
       { "title": "Link Join Us", "selector": "a", "classes" : "link-list link-join-us" }
     ],
     "style_formats_merge": "True"
   }
 </value>
 </record>
1 Like
3

Thank you, works perfect - now I have found it (Documentation)

1 Like
4

When migrating TinyMCE from 5 to 6, remember that (doc:https://www.tiny.cloud/docs/tinymce/latest/user-formatting-options/#style_formats_merge ) style_formats_merge: "True" must be changed to style_formats_merge: true, otherwise merging does not works.

1 Like