2

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.

4

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.

  • I will probably stop with that approach altogether. Seems like P&T replaceRedactorButton function in app/resources/js/richTextInput.js prevents me from replacing buttons such as link or image where Craft has some work to do to interface with redactor. The problem should exist with your plugin too I believe. – Jérôme Coupé Dec 8 '15 at 9:37
  • I found a way to get around this using setTimeout(), see github.com/carlcs/craft-redactorinlinestyles/blob/master/… – carlcs Dec 8 '15 at 10:52
  • Yep I guess that would work, thanks. Becoming a bit fidgety for my taste, though – Jérôme Coupé Dec 8 '15 at 14:35
  • 2
    I personally hate the all-text toolbar; I've found some users glossed over it completely, so thank you Christian for bringing Redactor back to its former glory. Should be noted your CP CSS just shows them on small screens though, removing that bit works great. – RitterKnight Dec 12 '15 at 20:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.