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

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.

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

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.

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

Plone Foundation Code of Conduct