Preferred method to add a class to an anchor tag <a> in TinyMCE? [SOLVED]

Plone Support
,
1

I want to allow users to insert links with a class in the TinyMCE editor <a class="btn btn-primary">, where I stole CSS from Twitter Bootstrap's buttons.

Before I reinvent the wheel, is there a preferred or recommended method to do so? I found a couple of suggestions.

2

I would add that as an entry in formats in the registry. https://docs.plone.org/develop/plone/forms/wysiwyg.html#customizing-tinymce-options has some examples

Something like the following should work, though I haven't tested it. Add this to your registry.xml and apply the profile.

  <value key="block_styles" purge="False">
    <element>Button Primary|button_primary</element>
  </value>
  <value key="inline_styles" purge="False">
    <element>Button Primary|button_primary|button_primary</element>
  </value>
  <value key="formats">
  {
    [...] copy in existing blob here [...]
    "button_primary": {
      "block": "a",
      "classes": "btn btn-primary"
    }
  }
  </value>
</records>
1 Like
3

Is there a preferred method to editing a resource's registry.xml?

I found Site Setup > Configuration Registry, and filtered by Products.CMFPlone.interfaces.controlpanel.ITinyMCESchema. I edited the record, and it seems to have been updated, but does not take effect in TinyMCE Formats menu. Do I need to restart or reload something?

I also tried exporting Products.CMFPlone.interfaces.controlpanel.ITinyMCESchema.xml, editing that, and importing it. Same result. Record appears updated, but no change to TinyMCE Formats menu.

4

I figured it out.

  1. Use a custom theme (or a copy of the Barceloneta theme).
  2. Site Setup > Theming > Modify Theme
  3. Create an empty CSS file in the theme resource directory, say /static/tinymce-styles.css.
  4. Modify /manifest.cfg by appending a comma and the filepath of this empty CSS file to tinymce-content-css. For example for a copy of Barceloneta theme:
    tinymce-content-css = /++theme++custom/less/barceloneta-compiled.css,/++theme++custom/static/tinymce-styles.css
  5. Create a new LESS file to contain custom styles, say /less/custom.less. For this I stole the btn styles from Twitter Bootstrap 4, but I had to vendor them in as tbbtn to avoid style conflicts in Barceloneta.
  6. Open /less/barceloneta.plone.less, and add these two lines to the end:
    //*// Customizations
@import "custom.less";
  7. Tools > Build CSS
  8. In Site Setup > TinyMCE Settings > Advanced, paste the following:
    {
  "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"
    },
    {
      "items": [
        {
          "selector": "a",
          "classes": "tbbtn tbbtn-primary",
          "title": "Primary"
        },
        {
          "selector": "a",
          "classes": "tbbtn tbbtn-secondary",
          "title": "Secondary"
        }
      ],
      "title": "Buttons"
    },
    {"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"
    },
    {
      "block": "div",
      "classes": "clearfix",
      "title": "clearfix"
    },
    {
      "classes": "discreet",
      "inline": "span",
      "title": "discreet"
    }
  ],
  "style_formats_merge": "True",
  "importcss_file_filter": "++theme++custom/static/tinymce-styles.css"
}

Now I can add text, hyperlink it, and apply a button primary or secondary style to the link.

1 Like