Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-08-11T01:53:42.757Z
Answers.Text: How do you implement this plug in within Craft?
Answers.UserDisplayName: Alan Miller
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-08-20T01:16:03.487Z
Answers.Text: I'll gladly send my warmest personal regard if you can describe how that's actually implemented.
Answers.UserDisplayName: Nick Benson
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-08-24T15:35:39.450Z
Answers.Text: @AlanMiller/@NickBenson: Hi both. I’ll add this to my list to share. It’s quite a simple plugin.
Answers.UserDisplayName: Joshua Baker
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-08-05T11:19:24.677Z
Answers.LastActivityDate: 2015-08-05T11:19:24.677Z
Answers.UserDisplayName: Joshua Baker
Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-07-28T21:01:14.007Z
Answers.LastActivityDate: 2015-07-28T21:27:24.213Z
Answers.LastEditDate: 2015-07-28T21:27:24.213Z
Answers.UserDisplayName: André Elvan
Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2019-09-23T18:22:37.523Z
Answers.Text: 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"
Answers.UserDisplayName: Dalton Rooney
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2018-10-10T08:46:46.887Z
Answers.LastActivityDate: 2018-10-10T08:46:46.887Z
Answers.UserDisplayName: Martin Stigzelius
Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-07-30T18:31:41.237Z
Answers.Text: 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.
Answers.UserDisplayName: Joshua Baker
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-07-30T21:39:55.710Z
Answers.Text: You've probably got as much influence with them as we do. :)
Answers.UserDisplayName: Brad Bell
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-07-28T17:38:23.507Z
Answers.LastActivityDate: 2015-07-28T17:38:23.507Z
Answers.UserDisplayName: Brad Bell
Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2021-08-21T16:52:08.733Z
Answers.LastActivityDate: 2021-08-21T16:52:08.733Z
Answers.UserDisplayName: stevecomrie
Body: <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>
  
Tags: <redactor><richtext>
Title: Rich-Text/Redactor hyperlink classes
ThreadText: # 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.
  
  ```js
  "formattingAdd": [
    {
      "title": "Button",
      "tag": "a",
      "class": "button"
    }
  ]
  
  ```
  
  This isn’t working as expected though. The above, for example, adds a `<span>` around or within the `<a>` tag, occasionally removing the `<a>` 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.
  
  ```js
  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**: @username_1/@username_2: 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](https://github.com/aelvan/RedactorStyles-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:
  
  ```
  <span class="btn-action"><a href="http://loremipsum.net">A link</a></span>
  <a href="http://loremipsum.net"><span class="btn-action">A link</span></a>
  
  ```
  
  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.
  
  1. **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`.
  2. **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`.
  3. **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
  }
  
  ```
  
  4. **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);
  
  ```
  
  5. **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, username_6. 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)
  
  
  ---
  
  