Superscript or Subscript button

Redactor
#1

How do I add a Superscript/Subscript button to the toolbar? I would like the user to be able to press the button and get the selected copy be surrounded by a or tags.

#2

That requires a custom plugin at the moment. This code should work:

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

                // make your added buttons available as Font Awesome's icon
                this.button.setAwesome('superscript', 'icon icon-superscript');
                this.button.setAwesome('subscript', 'icon icon-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');
            }
        };
    };
})(jQuery);

Add that code into a file (e.g. assets/components/redactor/custom/scriptbuttons.js) and refer to it in the redactor.additionalPlugins system setting like scriptbuttons:/assets/components/redactor/custom/scriptbuttons.js

It’s supported natively in Redactor 3 when we finish that.

1 Like
#3

Many thanks Mark. That worked perfectly