Switch to graphical buttons in Redactor 2

Question

I am trying to replace the text-based buttons in Redactor 2 with graphical ones as per this article on the imperavi website: https://imperavi.com/redactor/examples/buttons-default-icons/

I created a simple plugin loading a JS file (a copy and paste of the JS on the page above) and a CSS file (fontawesome.min.css). These two files and the fonts are in the resources/ folder of the plugin. Example of plugin file in this post: Can a plugin add JS or CSS to the control panel?

Everything seems to work fine: CSS file loaded in the head and JS file loaded right before the </body> tag.

My problem is that the JS loaded by my plugin comes before the main JS redactor file. Console barfs an error at me for trying to work with $.Redactor.prototype, which obviously does not exists yet.

Is there an easy way for my plugin to load the JS file at the end of the JS queue or at least after the main redactor JS file ?

EDIT 1:

Following Carl's advises below, I managed to get it working.

Basically, the approach is to create a RedactorPlugins object and populate it with what you need so it is available for redactor when it runs afterwards. The plugin you create that way can be used in your redactor config files.

Something like

if (!RedactorPlugins) var RedactorPlugins = {};

RedactorPlugins.iconbuttons = function()
{
  return {
      init: function ()
      {
          var icons = {
              'format': '<i class="fa fa-paragraph"></i>',
              'lists': '<i class="fa fa-list"></i>',
              'horizontalrule': '<i class="fa fa-minus"></i>',
              'image': '<i class="fa fa-picture-o"></i>',
              'link': '<i class="fa fa-link"></i>'
          };

          $.each(this.button.all(), $.proxy(function(i,s)
          {
              var key = $(s).attr('rel');

              if (typeof icons[key] !== 'undefined')
              {
                  var icon = icons[key];
                  var button = this.button.get(key);
                  alert(key + " - " + button + " - " + icon);
                  this.button.setIcon(button, icon);
              }

          }, this));
      }
  };
};

Once you have created a plugin loading this JS file and the CSS you need, you can tell Redactor to use that plugin in your redactor config files:

"plugins": [ "iconbuttons", "source" ]

EDIT 2:

I will probably abandon this altogether and roll with the default text-based version of redactor 2. It looks like this approach does not work with some buttons where Craft has to do some work. It seems that when the replaceRedactorButton function in craft/app/resources/js/RichTextInput.js is run, it removes buttons customisation.

Answer 1

You could use my plugin Redactor Icon Buttons.

It includes the icons from the (old) Redactor 10 editor and you can map icons to buttons via a iconMapping config setting. It also allows to use a custom icon set.

If you still want to write your own plugin, have a look at the source code of P&T’s Redactor Clips plugin.