<p>I tried a few different solutions but didn’t find anything user friendly enough, and ended up writing a Redactor plugin that adds a button to toggle a class on any selected links.</p>

<pre class="lang-js prettyprint-override"><code>var RedactorPlugins = window.RedactorPlugins || {};

RedactorPlugins.toggleButton = function()
{
    return {
        init: function()
        {
            var button = this.button.add('toggle-button', 'Toggle Button');

            this.button.setAwesome('toggle-button', 'fa-minus-square-o');

            this.button.addCallback(button, function()
            {
                this.link.toggleClass('button');
                this.code.sync();
            });
        }
    };
};
</code></pre>

<p>There’s some extra styles to keep things tidy but the actual functionality is covered in the above-pasted snippet.</p>

CC BY-SA 3.0
2015-08-11T01:53:42.757Z
How do you implement this plug in within Craft?
Alan Miller
CC BY-SA 3.0
2015-08-20T01:16:03.487Z
I'll gladly send my warmest personal regard if you can describe how that's actually implemented.
Nick Benson
CC BY-SA 3.0
2015-08-24T15:35:39.450Z
@AlanMiller/@NickBenson: Hi both. I’ll add this to my list to share. It’s quite a simple plugin.
Joshua Baker
CC BY-SA 3.0
2015-08-05T11:19:24.677Z
2015-08-05T11:19:24.677Z
Joshua Baker
<p>If you only want to style how the link looks visually, and need a work-around, you could use my <a href="https://github.com/aelvan/RedactorStyles-Craft" rel="noreferrer">Redactor Styles for Craft</a> plugin. If you add an inline style to the plugins Styles JSON object like this:</p>

<pre><code>[
  {
    "btnName":"Action button", 
    "className":"btn-action", 
    "spanClass":"btn-action"
  }
] 
</code></pre>

<p>Depending on which order the user creates the link and marks the text/link and select style, you now can get the following markup from your rich text field:</p>

<pre><code>&lt;span class="btn-action"&gt;&lt;a href="http://loremipsum.net"&gt;A link&lt;/a&gt;&lt;/span&gt;
&lt;a href="http://loremipsum.net"&gt;&lt;span class="btn-action"&gt;A link&lt;/span&gt;&lt;/a&gt;
</code></pre>

<p>If this works for you or not depends on your design. Unless there are some styles on the  that can't be removed, you could style it so that it looks the same by using:</p>

<pre><code>.btn-action &gt; a,
a &gt; .btn-action { ... }  
</code></pre>

<p>You could also instruct your users to always create the link, then select the style, or the other way around. But, it's of course a very fragile solution. </p>

<p>Thinking of making a new plugin just for creating more advanced links, the built in one doesn't really cut it.</p>

CC BY-SA 3.0
2015-07-28T21:01:14.007Z
2015-07-28T21:27:24.213Z
2015-07-28T21:27:24.213Z
André Elvan
<p>For Craft 3 using Redactor 3, I have managed to create a small redactor plugin that toggles a class on all the links selected in redactor.</p>

<p>Here is how I did it.</p>

<ol>
<li><p><strong>Create your folders.</strong> Create a folder called <code>plugins</code> inside the <code>config/redactor/</code> folder. Inside the plugin folder create a folder for your plugin. Example I created a a folder called <code>toggleButton</code>. So the folder structure is <code>config/redactor/plugins/toggleButton</code>.</p></li>
<li><p><strong>Create your files.</strong> Create a your <code>js</code> file and your <code>css</code> file. It is important that the files are named the same as the folder. So in my example my files would be named <code>toggleButton.js</code> and <code>toggleButton.css</code>.</p></li>
<li><p><strong>Add you plugin to your redactor field.</strong> In your <code>config/redactor</code> folder you can add different redactor configs. For example I have Simple.json and Standard.json. This can then be selected in the craft admin, when you are adding your redactor field. In your selected config file add the following <code>"plugins": ["toggleButton"],</code>. </p></li>
</ol>

<p>Example of my Simple.json file:</p>

<pre><code>{
  "buttons": ["html", "link", "file"],
  "plugins": ["toggleButton"],
  "toolbarFixed": true
}
</code></pre>

<ol start="4">
<li><strong>Code your plugin.</strong> In you js file you want to create your redactor plugin code. In my example I add a button that toggles all selected links to have the class button.</li>
</ol>

<p>Here is my js code:</p>

<pre><code>(function($R) {
  $R.add('plugin', 'toggleButton', {
    translations: {
      en: {
        toggleButton: 'Button',
      },
    },
    init: function(app) {
      this.app = app;
      this.lang = app.lang;
      this.toolbar = app.toolbar;
      this.selection = app.selection;
    },
    // public
    start: function() {
      //Define the button object
      var btnObj = {
        title: this.lang.get('toggleButton'),
        api: 'plugin.toggleButton.toggle',
      };

      //Add the button to the toolbar
      this.$button = this.toolbar.addButton('toggleButton', btnObj);
    },
    toggle: function() {
      //This is what happens on when the button is clicked

      //Class that we will toggle
      var classToToggle = 'button';
      //Get all the links that are selected
      var selectedLinks = this.selection.getInlines({ all: true, tags: ['a'] });

      //Loop through all the links and toggle the class
      selectedLinks.forEach(function(element) {
        //Crossbrowser toggle class
        if (element.classList) {
          element.classList.toggle(classToToggle);
        } else {
          // For IE9
          var classes = element.className.split(' ');
          var i = classes.indexOf(classToToggle);

          if (i &gt;= 0) classes.splice(i, 1);
          else classes.push(classToToggle);
          element.className = classes.join(' ');
        }
      });
    },
  });
})(Redactor);
</code></pre>

<ol start="5">
<li><strong>Style your Button.</strong> In your css file you want to style the links with the class button to look like buttons. So that the author sees that they have become buttons.</li>
</ol>

<p>Here is my css code:</p>

<pre><code>a.button {
  display: inline-block;
  box-sizing: border-box;
  font-size: 14px;
  text-align: center;
  padding: 10px 20px 9px 20px;
  cursor: pointer;
  outline: none;
  border: none;
  vertical-align: middle;
  text-decoration: none;
  zoom: 1;
  position: relative;
  color: #29323d !important;
  border-radius: 2px;
  background: #eaf0f4;
  background-image: linear-gradient(#f3f6f9, #eaf0f4);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
  margin-right: 5px;
  margin-bottom: 4px;
  text-decoration: none !important;
}

a.button:hover {
  outline: none;
  color: #fff !important;
  background: #449aef !important;
}
</code></pre>

<p>Now you and your authors can easily make links in to buttons in your redactor field. Then it is up to you how you use that in the frontend.</p>

<p>References:</p>

<ul>
<li><a href="https://github.com/craftcms/redactor" rel="nofollow noreferrer">https://github.com/craftcms/redactor</a></li>
<li><a href="https://docs.craftcms.com/v3/changes-in-craft-3.html#rich-text-fields" rel="nofollow noreferrer">https://docs.craftcms.com/v3/changes-in-craft-3.html#rich-text-fields</a></li>
<li><a href="https://imperavi.com/redactor/examples/" rel="nofollow noreferrer">https://imperavi.com/redactor/examples/</a></li>
</ul>

CC BY-SA 4.0
2019-09-23T18:22:37.523Z
This works perfectly, thank you! If you're using HTML Purifier, you may also need to update it to allow classes on links. My purifier config looks like this: "HTML.Allowed": "a[href|class], br, p, b, strong, em, i, ul, ol, li, h2, h3, h4"
Dalton Rooney
CC BY-SA 4.0
2018-10-10T08:46:46.887Z
2018-10-10T08:46:46.887Z
Martin Stigzelius
<p>I don't think this is possible using <code>formattingAdd</code>.  From Redactor's <a href="http://imperavi.com/redactor/docs/settings/formatting/#setting-formattingAdd" rel="nofollow">docs</a>:</p>

<blockquote>
  <p>formattingAdd can only be applied to p, pre, blockquote and header tags.</p>
</blockquote>

CC BY-SA 3.0
2015-07-30T18:31:41.237Z
Thanks for the response, Brad. I’m not sure what your relationship is like with the Redactor ream but it’d be great to have access to this functionality in future.
Joshua Baker
CC BY-SA 3.0
2015-07-30T21:39:55.710Z
You've probably got as much influence with them as we do. :)
Brad Bell
CC BY-SA 3.0
2015-07-28T17:38:23.507Z
2015-07-28T17:38:23.507Z
Brad Bell
<p>I know this is a bit of an old question and has already been answered, but I took some of the solutions here a step further and wrote a plugin that lets you configure a list of class names that content editors can choose from when adding / editing a link.</p>
<p>It works seamlessly in combination with the default Redactor link module and doesn't require adding any additional buttons to the toolbar.</p>
<p><a href="https://github.com/simplicate-web/redactor-link-styles" rel="nofollow noreferrer">https://github.com/simplicate-web/redactor-link-styles</a></p>
<p><a href="https://i.sstatic.net/e1EGn.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/e1EGn.png" alt="screenshot of redactor link plugin with link style dropdown" /></a></p>

CC BY-SA 4.0
2021-08-21T16:52:08.733Z
2021-08-21T16:52:08.733Z
stevecomrie
<p>I’m trying to implement <strong>different hyperlink styles</strong> within a rich-text field by adding formatting options via a Redactor config file.</p>

<pre class="lang-js prettyprint-override"><code>"formattingAdd": [
  {
    "title": "Button",
    "tag": "a",
    "class": "button"
  }
]
</code></pre>

<p>This isn’t working as expected though. The above, for example, adds a <code>&lt;span&gt;</code> around or within the <code>&lt;a&gt;</code> tag, occasionally removing the <code>&lt;a&gt;</code> tag altogether.</p>

<p><strong>Is there a way to add classes to hyperlinks within a rich-text field?</strong></p>

<p><em>Note: This rich-text field is already within a containing Matrix field, so that’s not an option.</em></p>

<redactor><richtext>
Rich-Text/Redactor hyperlink classes
# Rich-Text/Redactor hyperlink classes

(Asked by: username_0 on 2015-07-22)

I’m trying to implement different hyperlink styles within a rich-text field by adding formatting options via a Redactor config file.
"formattingAdd": [
  {
    "title": "Button",
    "tag": "a",
    "class": "button"
  }
]

This isn’t working as expected though. The above, for example, adds a  around or within the  tag, occasionally removing the  tag altogether.
Is there a way to add classes to hyperlinks within a rich-text field?
Note: This rich-text field is already within a containing Matrix field, so that’s not an option.

**Tags:** redactor, richtext


---

## 5 answers

### Answer by username_0 on 2015-08-05. Score: 3 | Accepted answer

I tried a few different solutions but didn’t find anything user friendly enough, and ended up writing a Redactor plugin that adds a button to toggle a class on any selected links.
var RedactorPlugins = window.RedactorPlugins || {};

RedactorPlugins.toggleButton = function()
{
    return {
        init: function()
        {
            var button = this.button.add('toggle-button', 'Toggle Button');

            this.button.setAwesome('toggle-button', 'fa-minus-square-o');

            this.button.addCallback(button, function()
            {
                this.link.toggleClass('button');
                this.code.sync();
            });
        }
    };
};

There’s some extra styles to keep things tidy but the actual functionality is covered in the above-pasted snippet.

> **Comments:**
> **username_1**: How do you implement this plug in within Craft?  
> **username_2**: I'll gladly send my warmest personal regard if you can describe how that's actually implemented.  
> **username_0**: @AlanMiller/@NickBenson: Hi both. I’ll add this to my list to share. It’s quite a simple plugin.  

---

### Answer by username_3 on 2015-07-28. Score: 6

If you only want to style how the link looks visually, and need a work-around, you could use my Redactor Styles for Craft plugin. If you add an inline style to the plugins Styles JSON object like this:
[
  {
    "btnName":"Action button", 
    "className":"btn-action", 
    "spanClass":"btn-action"
  }
] 

Depending on which order the user creates the link and marks the text/link and select style, you now can get the following markup from your rich text field:
A link
A link

If this works for you or not depends on your design. Unless there are some styles on the  that can't be removed, you could style it so that it looks the same by using:
.btn-action > a,
a > .btn-action { ... }  

You could also instruct your users to always create the link, then select the style, or the other way around. But, it's of course a very fragile solution. 
Thinking of making a new plugin just for creating more advanced links, the built in one doesn't really cut it.


---

### Answer by username_4 on 2018-10-10. Score: 4

For Craft 3 using Redactor 3, I have managed to create a small redactor plugin that toggles a class on all the links selected in redactor.
Here is how I did it.

Create your folders. Create a folder called plugins inside the config/redactor/ folder. Inside the plugin folder create a folder for your plugin. Example I created a a folder called toggleButton. So the folder structure is config/redactor/plugins/toggleButton.
Create your files. Create a your js file and your css file. It is important that the files are named the same as the folder. So in my example my files would be named toggleButton.js and toggleButton.css.
Add you plugin to your redactor field. In your config/redactor folder you can add different redactor configs. For example I have Simple.json and Standard.json. This can then be selected in the craft admin, when you are adding your redactor field. In your selected config file add the following "plugins": ["toggleButton"],. 

Example of my Simple.json file:
{
  "buttons": ["html", "link", "file"],
  "plugins": ["toggleButton"],
  "toolbarFixed": true
}


Code your plugin. In you js file you want to create your redactor plugin code. In my example I add a button that toggles all selected links to have the class button.

Here is my js code:
(function($R) {
  $R.add('plugin', 'toggleButton', {
    translations: {
      en: {
        toggleButton: 'Button',
      },
    },
    init: function(app) {
      this.app = app;
      this.lang = app.lang;
      this.toolbar = app.toolbar;
      this.selection = app.selection;
    },
    // public
    start: function() {
      //Define the button object
      var btnObj = {
        title: this.lang.get('toggleButton'),
        api: 'plugin.toggleButton.toggle',
      };

      //Add the button to the toolbar
      this.$button = this.toolbar.addButton('toggleButton', btnObj);
    },
    toggle: function() {
      //This is what happens on when the button is clicked

      //Class that we will toggle
      var classToToggle = 'button';
      //Get all the links that are selected
      var selectedLinks = this.selection.getInlines({ all: true, tags: ['a'] });

      //Loop through all the links and toggle the class
      selectedLinks.forEach(function(element) {
        //Crossbrowser toggle class
        if (element.classList) {
          element.classList.toggle(classToToggle);
        } else {
          // For IE9
          var classes = element.className.split(' ');
          var i = classes.indexOf(classToToggle);

          if (i >= 0) classes.splice(i, 1);
          else classes.push(classToToggle);
          element.className = classes.join(' ');
        }
      });
    },
  });
})(Redactor);


Style your Button. In your css file you want to style the links with the class button to look like buttons. So that the author sees that they have become buttons.

Here is my css code:
a.button {
  display: inline-block;
  box-sizing: border-box;
  font-size: 14px;
  text-align: center;
  padding: 10px 20px 9px 20px;
  cursor: pointer;
  outline: none;
  border: none;
  vertical-align: middle;
  text-decoration: none;
  zoom: 1;
  position: relative;
  color: #29323d !important;
  border-radius: 2px;
  background: #eaf0f4;
  background-image: linear-gradient(#f3f6f9, #eaf0f4);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
  margin-right: 5px;
  margin-bottom: 4px;
  text-decoration: none !important;
}

a.button:hover {
  outline: none;
  color: #fff !important;
  background: #449aef !important;
}

Now you and your authors can easily make links in to buttons in your redactor field. Then it is up to you how you use that in the frontend.
References:

https://github.com/craftcms/redactor
https://docs.craftcms.com/v3/changes-in-craft-3.html#rich-text-fields
https://imperavi.com/redactor/examples/

> **Comments:**
> **username_5**: This works perfectly, thank you! If you're using HTML Purifier, you may also need to update it to allow classes on links. My purifier config looks like this: "HTML.Allowed": "a[href|class], br, p, b, strong, em, i, ul, ol, li, h2, h3, h4"  

---

### Answer by username_6 on 2015-07-28. Score: 2

I don't think this is possible using `formattingAdd`. From Redactor's [docs](http://imperavi.com/redactor/docs/settings/formatting/#setting-formattingAdd):

> formattingAdd can only be applied to p, pre, blockquote and header tags.

> **Comments:**
> **username_0**: Thanks for the response, Brad. I’m not sure what your relationship is like with the Redactor ream but it’d be great to have access to this functionality in future.  
> **username_6**: You've probably got as much influence with them as we do. :)  

---

### Answer by username_7 on 2021-08-21. Score: 2

I know this is a bit of an old question and has already been answered, but I took some of the solutions here a step further and 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 and doesn't require adding any additional buttons to the toolbar.

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

[![screenshot of redactor link plugin with link style dropdown](https://i.sstatic.net/e1EGn.png)](https://i.sstatic.net/e1EGn.png)


---

