Redactor - Superscript button

Question

Is there a possibility to ad a 'superscript' button to redactor?

Edit: I found an explanation here: How can I use <small> <sub> <sub> 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?

Is this now a thing? now that Redactor has been updated as well? — KSPR, Dec 22 '15 at 08:31

score 4 · Answer 1 · answered Feb 11 '16 at 14:09

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

answered Feb 11 '16 at 14:09

Elliot Lewis

337
1
9

Works like a charm. – KSPR Feb 17 '16 at 14:00

score 2 · Answer 2 · answered Jan 24 '20 at 13:53

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.

score 2 · Accepted Answer · answered Jun 08 '20 at 14:16

2

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

answered Jun 08 '20 at 14:16

James Smith

5,154
14
15

KSPR · Answer 4 · 2018-08-28T13:11:31.840

1

I made another pretty easy solution:

{{ entry.redactor | nl2br | replace({'/m3': '/m<sup>3</sup>'}) | raw }}

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

edited Aug 28 '18 at 13:11

answered Aug 27 '18 at 13:17

KSPR

3,786
2
29
52

score 1 · Answer 5 · answered Dec 01 '14 at 14:29

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.

score 1 · Answer 6 · edited Apr 13 '17 at 12:51

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 for more from Craft on this.

edited Apr 13 '17 at 12:51

Community

1

answered Dec 02 '14 at 06:07

Brian Whitton

220
1
7

Thanks for your hints. I guess I'll wait then. I don't want to alter core files. – KSPR Dec 02 '14 at 09:02
Okay, so now redactor is on v10 within craft 2.3 Ist there a possible solution now without corefile editing? – KSPR Dec 03 '14 at 11:28

Redactor - Superscript button

6 Answers6

Redactor Extras for Craft