Answers.Body: <p>You could use my plugin <a href="https://github.com/carlcs/craft-redactoriconbuttons" rel="nofollow">Redactor Icon Buttons</a>.</p>
  
  <p>It includes the icons from the (old) Redactor 10 editor and you can map icons to buttons via a <code>iconMapping</code> config setting. It also allows to use a custom icon set.</p>
  
  <p>If you still want to write your own plugin, have a look at the source code of P&amp;T’s <a href="https://github.com/pixelandtonic/RedactorClips/blob/master/redactorclips/resources/clips.js" rel="nofollow">Redactor Clips</a> plugin.</p>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-12-08T09:37:56.010Z
Answers.Text: 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.
Answers.UserDisplayName: Jérôme Coupé
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-12-08T10:52:26.527Z
Answers.Text: I found a way to get around this using [`setTimeout()`](https://developer.mozilla.org/de/docs/Web/API/WindowTimers/setTimeout), see https://github.com/carlcs/craft-redactorinlinestyles/blob/master/redactorinlinestyles/resources/redactorinlinestyles.js#L89
Answers.UserDisplayName: carlcs
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-12-08T14:35:36.527Z
Answers.Text: Yep I guess that would work, thanks. Becoming a bit fidgety for my taste, though
Answers.UserDisplayName: Jérôme Coupé
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-12-12T20:54:55.397Z
Answers.Text: 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.
Answers.UserDisplayName: RitterKnight
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-12-08T08:30:57.103Z
Answers.LastActivityDate: 2016-07-10T11:13:48.457Z
Answers.LastEditDate: 2016-07-10T11:13:48.457Z
Answers.UserDisplayName: carlcs
Body: <p>I am trying to replace the text-based buttons in Redactor 2 with graphical ones as per this article on the imperavi website:
  <a href="https://imperavi.com/redactor/examples/buttons-default-icons/" rel="nofollow noreferrer">https://imperavi.com/redactor/examples/buttons-default-icons/</a></p>
  
  <p>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 <code>resources/</code> folder of the plugin. Example of plugin file in this post: 
  <a href="https://craftcms.stackexchange.com/questions/267/can-a-plugin-add-js-or-css-to-the-control-panel">Can a plugin add JS or CSS to the control panel?</a></p>
  
  <p>Everything seems to work fine: CSS file loaded in the head and JS file loaded right before the <code>&lt;/body&gt;</code> tag.</p>
  
  <p>My problem is that the JS loaded by my plugin comes <em>before</em> the main JS redactor file. Console barfs an error at me for trying to work with <code>$.Redactor.prototype</code>, which obviously does not exists yet.</p>
  
  <p>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 ? </p>
  
  <p><strong>EDIT 1:</strong></p>
  
  <p>Following Carl's advises below, I managed to get it working.</p>
  
  <p>Basically, the approach is to create a <code>RedactorPlugins</code> 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.</p>
  
  <p>Something like</p>
  
  <pre><code>if (!RedactorPlugins) var RedactorPlugins = {};
  
  RedactorPlugins.iconbuttons = function()
  {
    return {
        init: function ()
        {
            var icons = {
                'format': '&lt;i class="fa fa-paragraph"&gt;&lt;/i&gt;',
                'lists': '&lt;i class="fa fa-list"&gt;&lt;/i&gt;',
                'horizontalrule': '&lt;i class="fa fa-minus"&gt;&lt;/i&gt;',
                'image': '&lt;i class="fa fa-picture-o"&gt;&lt;/i&gt;',
                'link': '&lt;i class="fa fa-link"&gt;&lt;/i&gt;'
            };
  
            $.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));
        }
    };
  };
  </code></pre>
  
  <p>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:</p>
  
  <pre><code>"plugins": [ "iconbuttons", "source" ]
  </code></pre>
  
  <p><strong>EDIT 2:</strong></p>
  
  <p>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 <code>replaceRedactorButton</code> function in <code>craft/app/resources/js/RichTextInput.js</code> is run, it removes buttons customisation.</p>
  
Tags: <plugins><redactor>
Title: Switch to graphical buttons in Redactor 2
ThreadText: # Switch to graphical buttons in Redactor 2
  
  (Asked by: username_0 on 2015-12-08)
  
  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?](https://craftcms.stackexchange.com/questions/267/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.
  
  **Tags:** plugins, redactor
  
  
  ---
  
  ## 1 answers
  
  ### Answer by username_1 on 2015-12-08. Score: 4 | Accepted answer
  
  You could use my plugin [Redactor Icon Buttons](https://github.com/username_1/craft-redactoriconbuttons).
  
  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](https://github.com/pixelandtonic/RedactorClips/blob/master/redactorclips/resources/clips.js) plugin.
  
  > **Comments:**
  > **username_0**: 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.  
  > **username_1**: I found a way to get around this using [`setTimeout()`](https://developer.mozilla.org/de/docs/Web/API/WindowTimers/setTimeout), see https://github.com/username_1/craft-redactorinlinestyles/blob/master/redactorinlinestyles/resources/redactorinlinestyles.js#L89  
  > **username_0**: Yep I guess that would work, thanks. Becoming a bit fidgety for my taste, though  
  > **username_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.  
  
  ---
  
  