Option to add class to <a> in Redactor editor

Question

I am using the Redactor editor as part of Perch. I would like to give the editor the ability to (optionally) add the class of "button" to any <a> tag they add. This could be via an additional option in the existing Add a Link modal, or could be a separate button in the editor toolbar.

Does anyone have any guidance as to the best way to achieve this? Any pointers appreciated.

This is my current config setup:

config.plugins = [];
config.buttons = ['format','bold','italic','deleted','link','lists'];
config.formatting = ['p', 'blockquote', 'h2', 'h3', 'h4'];

Answer 1

You can use formattingAdd to create a custom set of formatting options for Formatting dropdown. This will allow you to add your own CSS classes.

formattingAdd: {
  'red-p-add': {
    title: 'Red Paragraph',
    api: 'module.block.format',
    args: {
      tag: 'p',
      class: 'red-styled',
    },
  },
}

Unfortunately, according to the Official Documentation:

formattingAdd can only be applied to block tags (p, pre, blockquote, div, heading, etc).

In other words, since <a> is an inline element (not a block element), if you are trying to create an option using built-in Redactor functionality, then it appears you are out of luck.

Answer 2

I'm not too familiar with Redactor, but perhaps you could you do it with a callback or pure JavaScript after the element loads.

<style>
  .my-custom-class-1 {
    background-color: red;
  }
  .my-custom-class-2 {
    font-size: 16px;
  }
  .my-custom-class-3 {
    font-family: Helvetica Neue, Helvetica, Arial;
  }
</style>

Not sure what is returned from link but if it the html element you may be able to add classes with a callback.

  $R('#content', {
    callbacks: {
      link: {
        inserted: function(link) {

          // use the classList API to remove and add classes
          link.classList.remove("my-custom-class-1");
          link.classList.add("my-custom-class-1");

          // add or remove multiple classes
          link.classList.add("my-custom-class-1", "my-custom-class-2", "my-custom-class-3");
          link.classList.remove("my-custom-class-1", "my-custom-class-2", "my-custom-class-3");

        }
      }
    }
  });

If the links have a custom id then you may be able to do this in pure JavaScript

  const link_1 = document.getElementById('linkId_1');
  const link_2 = document.getElementById('linkId_2');
  const link_3 = document.getElementById('linkId_3');

  // use the classList API to remove and add classes
  link_1.classList.remove("my-custom-class-1");
  link_1.classList.add("my-custom-class-1");

  // add or remove multiple classes
  link_1.classList.add("my-custom-class-1", "my-custom-class-2", "my-custom-class-3");
  link_1.classList.remove("my-custom-class-1", "my-custom-class-2", "my-custom-class-3");

Hope this helps! :)

Answer 3

As noted in other answers, formattingAdd can not be applied to a tags. Here's a plugin for the latest version of redactor that takes highlighted text/links and converts it into an a tag with a specific class you're after:

(function($R) {
  $R.add('plugin', 'button', {
    init: function(app) {
      this.app = app;
    },

    activate: function() {
      // Remove existing link if any
      this.app.api('module.link.unlink')

      // Add a tag with 'button' class
      this.app.inline.format({ tag: 'a', class: 'button' })
    }
  });
})(Redactor);

With that code defined and loaded, you then need some updates to the redactor json config to pull in the functionality:

// include the plugin to redactor's world
"plugins": ["button"],
...

"formattingAdd": [
  ...
  // add a "Button" option in the formatting dropdown,
  // but use it to trigger your own plugin's function
  {
    "api": "plugin.button.activate",
    "args": {
      "class": "button",
      "tag": "a"
    },
    "title": "Button"
  },
]

I attempted to throw a this.app.api('module.link.open') as the last line of the activate function, so the link modal would be opened up as soon as your link class was activated. It was nice, but I noticed some inconsistent behavior depending on the scope of the initial selection (worked well if just the text was selected, but if a DOM tag portion was also selected the whole thing broked).

Answer 4

I know this is a bit of an old question, but I got tired of coming across the same half-baked solutions in every old thread I came across.

I wrote a plugin that lets you configure a list of class names that content editors can choose from when adding / editing a link.

It works seamlessly in combination with the default Redactor link module.

https://github.com/simplicate-web/redactor-link-styles