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?

Answer 1

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

Answer 2

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

Answer 3

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 4

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 5

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.

Answer 6

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.