Integrate wildcard.media with TinyMCE in Plone 5.2

1

wildcard.media allows to integrate Videos into other pages with TinyMCE. You add a image and link that to the video. Then you wrap the link image with something like <span class="wcvideo">...</span>. That works fine.

But: Adding the span with the new css-class via TinyMCE does not work. I tried to add the style to the field inline_styles in http://localhost:8080/Plone/@@tinymce-controlpanel but the format in TinyMCE stays greyed out.

The only way I got the whole thing to work is to repurpose the bold-button by adding
"bold": {"inline": "span", "classes": "wcvideo" } to the field formats.

We used to be able to something like this: name | htmltag | css-class
Does anyone have a working example?

Related to:

I use Plone 5.2rc5 and the branch python3 of wildcard.media.

2

Working in a 5.1.4 Installation, maybe in 5.2:

<?xml version="1.0"?>
<registry
    xmlns:i18n="http://xml.zope.org/namespaces/i18n"
    i18n_domain="my.addon">

  <record
    name="plone.other_settings"
    interface="Products.CMFPlone.interfaces.controlpanel.ITinyMCESchema"
    field="other_settings">
    <value>{&#13;
                "style_formats" : [&#13;
                    {&#13;
                        "title" : "Bild mit Titel",&#13;
                        "inline" : "img",&#13;
                        "attributes" : {&#13;
                            "class": "captioned"&#13;
                         }&#13;
                    },&#13;
{&#13;
                        "title" : "Videobox",&#13;
                        "block" : "p",&#13;
                        "attributes" : {&#13;
                            "class": "wcvideo-container"&#13;
                         }&#13;
                    }                    &#13;
                ],&#13;
                "style_formats_merge": "True"&#13;
            }</value>
  </record>
  
</registry>

This is only for the "Embedded New Styles in TinyMCE" not for a Working WCMedia Example.

3

@1letter Thanks! That worked nicely for me.

  <record name="plone.other_settings"
          interface="Products.CMFPlone.interfaces.controlpanel.ITinyMCESchema"
          field="other_settings">
    <value>{
"style_formats" : [
  {
    "title" : "Video",
    "block" : "span",
    "attributes" : {
      "class": "wcvideo"
    }
  }
],
"style_formats_merge": "True"}
    </value>
  </record>
4

I updated the example above since it needs to be a span, not a p