Customising the WYSIWYG Field Type with additional Redactor Plugin

Created 6 years ago by lachie_h

This is an informative post only. I spent a bit of time researching so I thought I'd post for posterity's sake.

I came across a situation where a client wanted to add some new buttons to the WYSIWYG field type. Luckily the Redactor site already includes an example of exactly what I wanted to do.

First thing I did was publish the field type config:

php artisan addon:publish anomaly.field_type.wysiwyg

Next, I added the Javescript file into the newly created resource folder:

/resources/{{project}}/addons/anomaly/wysiwyg-field_type/js/plugins/scriptbuttons.js

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

                this.button.addCallback(sup, this.scriptbuttons.formatSup);
                this.button.addCallback(sub, this.scriptbuttons.formatSub);

                // Set icons
                this.button.setIcon(sup, '<i class="re-icon-sup"></i>');
                this.button.setIcon(sub, '<i class="re-icon-sub"></i>');
            },
            formatSup: function()
            {
                this.inline.format('sup');
            },
            formatSub: function()
            {
                this.inline.format('sub');
            }
        };
    };
})(jQuery);

$(function()
{
    $('#redactor').redactor({
        plugins: ['scriptbuttons']
    });
});

Next I added the plugin into the config:

resources/{{project}}/addons/anomaly/wysiwyg-field_type/config/redactor.php

<?php return [
    ...
    'plugins' => [
        ...
        'scriptbuttons'   => [
            'icon'    => 'fa fa-superscript',
            'scripts' => [
                'resources::addons/anomaly/wysiwyg-field_type/js/plugins/scriptbuttons.js',
            ],
        ],
    ]
]

I also added the translation to the 'en' plugin file:

resources/{{project}}/addons/anomaly/wysiwyg-field_type/lang/en/redactor.php

<?php return [
    ...
    'plugin' => [
        ...
        'scriptbuttons' => 'Super/Subscript Buttons',
    ]
]

Now, when I create/edit a WYSIWYG field type, there is an option to add 'Super/Subscript Buttons'.