<p>This complexity is no longer necessary in Craft 3. You can simply add <code>"sup"</code> to your <code>buttons</code> array in your redactor config.</p>

CC BY-SA 4.0
2020-06-08T14:16:06.383Z
2020-06-08T14:16:06.383Z
James Smith
<p>I had a similar problem so created a plugin to add some of these extras to Redactor.</p>

<h2>Redactor Extras for Craft</h2>

<p><a href="https://github.com/elliotlewis/Redactor-Extras" rel="nofollow">https://github.com/elliotlewis/Redactor-Extras</a>
Available plugin are:</p>

<ul>
<li>Superscript and Subscript</li>
<li>Word count</li>
<li>Alignment</li>
<li>Custom plugin</li>
</ul>

CC BY-SA 3.0
2016-02-17T14:00:02.957Z
Works like a charm.
KSPR
CC BY-SA 3.0
2016-02-11T14:09:45.180Z
2016-02-11T14:09:45.180Z
Elliot Lewis
<p>The best way I assume would be to use the formattingAdd (see documentation <a href="https://imperavi.com/redactor/docs/settings/formatting/#s-formattingadd" rel="nofollow noreferrer">https://imperavi.com/redactor/docs/settings/formatting/#s-formattingadd</a>)</p>

<p>You can find that json file inside config/redactor/*.json.</p>

<p>In my example i am using</p>

<pre><code>"formattingAdd": {
      "superscript": {
          "title": "Superscript",
          "api": "module.inline.format",
          "args": {
              "tag": "sup"
          }
      }
   }
</code></pre>

<p>You can use that to do several things such adding styling to elements and that would become available on the "Format" button dropdown. </p>

<pre><code>"formattingAdd": {
      "superscript": {
          "title": "Superscript",
          "api": "module.inline.format",
          "args": {
              "tag": "sup"
          }
      },
    "blue-text": {
      "title": "Blue text",
      "api": "module.inline.format",
      "args": {
        "tag": "span",
        "class": "blue-text"
      }
    },
    "orange-text": {
      "title": "Orange text",
      "api": "module.inline.format",
      "args": {
        "tag": "span",
        "class": "orange-text"
      }
    },
      "white-text": {
          "title": "White text",
          "api": "module.inline.format",
          "args": {
              "tag": "span",
              "class": "white-text"
          }
      }
  }
</code></pre>

<p>Really powerful.</p>

CC BY-SA 4.0
2020-01-24T13:53:05.553Z
2020-01-24T13:53:05.553Z
Argy
<p>This isn't an answer, but I can't comment yet. </p>

<p>Craft is out-of-sync with the current version of the Redactor docs. Redactor is on version 10, while the latest Craft build is still on version 9.2.6.</p>

<p>There were a number of breaking changes and additions to version 10 of Redactor, but for some reason Redactor does not maintain a docs archive. So for the moment, we don't have a reliable source for Redactor docs.</p>

<p>See <a href="https://craftcms.stackexchange.com/a/4899/1027">this answer</a> for more from Craft on this.</p>

CC BY-SA 3.0
2014-12-02T09:02:03.417Z
Thanks for your hints. I guess I'll wait then. I don't want to alter core files.
KSPR
CC BY-SA 3.0
2014-12-03T11:28:09.543Z
Okay, so now redactor is on v10 within craft 2.3 Ist there a possible solution now without corefile editing?
KSPR
CC BY-SA 3.0
2014-12-02T06:07:13.233Z
2014-12-02T06:07:13.233Z
2017-04-13T12:51:00.303Z
Brian Whitton
<p>I had a similar problem and ended up creating my own fieldtype that extended a RichText field.</p>

<p>I think there is an oversight in Craft, where additional Redactor plugins aren't loaded even if they are specified in the config.json. But perhaps I'm missing something too?</p>

<p>A simple solution would be to hardcode the loading of the plugin in <strong>craft/app/fieldtypes/RichTextFieldType.php</strong>.</p>

<p>Within the function <strong>_includeFieldResources()</strong>:</p>

<p>add the line:</p>

<pre><code>craft()-&gt;templates-&gt;includeJsResource('lib/redactor/plugins/subsup.js');
</code></pre>

<p>after the default plugins specified.</p>

<p>Obviously modifying a core file is not recommended, but this should enable a temporary fix. I have built a plugin which autoloads js/css depending on what is specified in the config, but this isn't currently ready for general release. Let me know if your interested.</p>

CC BY-SA 3.0
2014-12-01T14:29:49.583Z
2014-12-01T14:29:49.583Z
George-Reactor
<p>I made another pretty easy solution:</p>

<pre><code>{{ entry.redactor | nl2br | replace({'/m3': '/m&lt;sup&gt;3&lt;/sup&gt;'}) | raw }}
</code></pre>

<p>It just replaces the units with the coresponding html markup. It works nice :) But you need to know which units are used.</p>

CC BY-SA 4.0
2018-08-27T13:17:11.913Z
2018-08-28T13:11:31.840Z
2018-08-28T13:11:31.840Z
KSPR
<p>Is there a possibility to ad a 'superscript' button to redactor?</p>

<p>Edit: I found an explanation here: <a href="https://craftcms.stackexchange.com/questions/2691/how-can-i-use-small-sub-sub-within-a-redactor-rich-text-field/2695#2695">How can I use &lt;small&gt; &lt;sub&gt; &lt;sub&gt; within a redactor/rich-text field?</a></p>

<p>But I can't get it to work.</p>

<p>I copy this snippet form: <a href="http://imperavi.com/redactor/examples/buttons-sup-and-sub/" rel="nofollow noreferrer">http://imperavi.com/redactor/examples/buttons-sup-and-sub/</a> to  <code>craft/app/resources/lib/redactor/plugins/subsup.js</code></p>

<pre><code>if (!RedactorPlugins) var RedactorPlugins = {};

RedactorPlugins.scriptbuttons = function()
{
    return {
        init: function()
        {
            var sup = this.button.add('superscript', 'Superscript');
            var sub = this.button.add('subscript', 'Subscript');

            // make your added buttons as Font Awesome's icon
            this.button.setAwesome('superscript', 'fa-superscript');
            this.button.setAwesome('subscript', 'fa-subscript');

            this.button.addCallback(sup, this.scriptbuttons.formatSup);
            this.button.addCallback(sub, this.scriptbuttons.formatSub);
        },
        formatSup: function()
        {
            this.inline.format('sup');
        },
        formatSub: function()
        {
            this.inline.format('sub');
        }
    };
}; 
</code></pre>

<p>Then I call the plugin in a custom.json file like this:</p>

<pre><code>{
    buttons: ['link','bold', 'italic','unorderedlist','orderedlist','image','html'],
    plugins: ['fullscreen', 'subsup'],
    toolbarFixedBox: true
}
</code></pre>

<p>But that results in nothing. What do I miss?</p>

CC BY-SA 3.0
2015-12-22T08:31:20.697Z
Is this now a thing? now that Redactor has been updated as well?
KSPR
CC BY-SA 3.0
2014-10-29T15:06:32.403Z
Nobody knows this? :(
KSPR
<redactor><plugin-redactorstyles>
Redactor - Superscript button
# Redactor - Superscript button

(Asked by: username_0 on 2014-10-22)

Is there a possibility to ad a 'superscript' button to redactor?
Edit: I found an explanation here: How can I use    within a redactor/rich-text field?
But I can't get it to work.
I copy this snippet form: http://imperavi.com/redactor/examples/buttons-sup-and-sub/ to  craft/app/resources/lib/redactor/plugins/subsup.js
if (!RedactorPlugins) var RedactorPlugins = {};

RedactorPlugins.scriptbuttons = function()
{
    return {
        init: function()
        {
            var sup = this.button.add('superscript', 'Superscript');
            var sub = this.button.add('subscript', 'Subscript');

            // make your added buttons as Font Awesome's icon
            this.button.setAwesome('superscript', 'fa-superscript');
            this.button.setAwesome('subscript', 'fa-subscript');

            this.button.addCallback(sup, this.scriptbuttons.formatSup);
            this.button.addCallback(sub, this.scriptbuttons.formatSub);
        },
        formatSup: function()
        {
            this.inline.format('sup');
        },
        formatSub: function()
        {
            this.inline.format('sub');
        }
    };
}; 

Then I call the plugin in a custom.json file like this:
{
    buttons: ['link','bold', 'italic','unorderedlist','orderedlist','image','html'],
    plugins: ['fullscreen', 'subsup'],
    toolbarFixedBox: true
}

But that results in nothing. What do I miss?

**Tags:** redactor, plugin-redactorstyles

> **Comments:**
> **username_0**: Nobody knows this? :(  
> **username_0**: Is this now a thing? now that Redactor has been updated as well?  

---

## 6 answers

### Answer by username_1 on 2020-06-08. Score: 2 | Accepted answer

This complexity is no longer necessary in Craft 3. You can simply add `"sup"` to your `buttons` array in your redactor config.


---

### Answer by username_2 on 2016-02-11. Score: 4

I had a similar problem so created a plugin to add some of these extras to Redactor.

## Redactor Extras for Craft

<https://github.com/elliotlewis/Redactor-Extras>
Available plugin are:

* Superscript and Subscript
* Word count
* Alignment
* Custom plugin

> **Comments:**
> **username_0**: Works like a charm.  

---

### Answer by username_3 on 2020-01-24. Score: 2

The best way I assume would be to use the formattingAdd (see documentation https://imperavi.com/redactor/docs/settings/formatting/#s-formattingadd)
You can find that json file inside config/redactor/*.json.
In my example i am using
"formattingAdd": {
      "superscript": {
          "title": "Superscript",
          "api": "module.inline.format",
          "args": {
              "tag": "sup"
          }
      }
   }

You can use that to do several things such adding styling to elements and that would become available on the "Format" button dropdown. 
"formattingAdd": {
      "superscript": {
          "title": "Superscript",
          "api": "module.inline.format",
          "args": {
              "tag": "sup"
          }
      },
    "blue-text": {
      "title": "Blue text",
      "api": "module.inline.format",
      "args": {
        "tag": "span",
        "class": "blue-text"
      }
    },
    "orange-text": {
      "title": "Orange text",
      "api": "module.inline.format",
      "args": {
        "tag": "span",
        "class": "orange-text"
      }
    },
      "white-text": {
          "title": "White text",
          "api": "module.inline.format",
          "args": {
              "tag": "span",
              "class": "white-text"
          }
      }
  }

Really powerful.


---

### Answer by username_4 on 2014-12-02. Score: 1

This isn't an answer, but I can't comment yet.

Craft is out-of-sync with the current version of the Redactor docs. Redactor is on version 10, while the latest Craft build is still on version 9.2.6.

There were a number of breaking changes and additions to version 10 of Redactor, but for some reason Redactor does not maintain a docs archive. So for the moment, we don't have a reliable source for Redactor docs.

See [this answer](https://craftcms.stackexchange.com/a/4899/1027) for more from Craft on this.

> **Comments:**
> **username_0**: Thanks for your hints. I guess I'll wait then. I don't want to alter core files.  
> **username_0**: Okay, so now redactor is on v10 within craft 2.3 Ist there a possible solution now without corefile editing?  

---

### Answer by username_5 on 2014-12-01. Score: 1

I had a similar problem and ended up creating my own fieldtype that extended a RichText field.
I think there is an oversight in Craft, where additional Redactor plugins aren't loaded even if they are specified in the config.json. But perhaps I'm missing something too?
A simple solution would be to hardcode the loading of the plugin in craft/app/fieldtypes/RichTextFieldType.php.
Within the function _includeFieldResources():
add the line:
craft()->templates->includeJsResource('lib/redactor/plugins/subsup.js');

after the default plugins specified.
Obviously modifying a core file is not recommended, but this should enable a temporary fix. I have built a plugin which autoloads js/css depending on what is specified in the config, but this isn't currently ready for general release. Let me know if your interested.


---

### Answer by username_0 on 2018-08-27. Score: 1

I made another pretty easy solution:
{{ entry.redactor | nl2br | replace({'/m3': '/m3'}) | raw }}

It just replaces the units with the coresponding html markup. It works nice :) But you need to know which units are used.


---

