Forum

Thread tagged as: Question

Help with customising Redactor toolbar with minimal buttons

I have been reading through the "Custom configurations for default editors" instructions at the bottom of this page: https://docs.grabaperch.com/api/editors/ and trying to figure out how I can go about customising the redactor toolbar to only include certain buttons. The instructions are quite clear for how to add toolbar plugins to allow additional buttons (such as a source code button), but I am not managing to figure out how I can do something slightly different and reduce the amount of buttons to have a very simple toolbar. There is some good information here: https://imperavi.com/redactor/docs/toolbar/ but I can't figure out how to adapt this to work with the editor within Perch 3. Any help would be greatly appreciated...

Some background info: The site in question is built with Perch 2, and uses a simplified configuration of Redactor toolbar (i.e. with only a bold, italic and list button) which I managed to do following these instructions: http://forum.grabaperch.com/forum/12-08-2015-quick-tip-custom-redactor-editors-by-using-the-editor-config-attribute?page=1 . I now need to upgrade to Perch 3, and now that Redactor ships with Perch 3 as a default editor, my previous configurations wont work... So before going ahead with the upgrade, I need to figure out how I can continue to have a toolbar with the minimal button configuration...

anna patience

anna patience 0 points

  • 3 weeks ago
Drew McLellan

Drew McLellan 2282 points
Perch Support

Your get() function is passed a config variable. That's the current config which you can modify or just replace. So you could just return the minimal set you want:

return {
    buttons: ['bold', 'italic']
};

Thanks Drew. So can my config.js file would literally just be:

Perch.UserConfig.redactor = function(){

return { buttons: ['bold', 'italic'] };

}();

Is there a way to have multiple button configurations for different instances of the toolbar (i.e. on some textarea fields I want the user to be able to add a list, on others I don't, so would ideally have a couple of toolbar configurations)?

Drew McLellan

Drew McLellan 2282 points
Perch Support

No, you need to define the get() and load() functions as per the documentation.

That example would be an example return value from get().

OK - would I do something like this? In the documentation example there is a lot of code I don't understand so not sure if I am leaving important bits out - or if it can be as simple as the below. Really appreciate your help - as you can tell this goes a bit beyond my technical capabilities but since I have the Perch 2 version set up to have the simplified toolbar I really need to figure this out so that when I upgrade things wont change for my client.


Perch.UserConfig.redactor = function(){ return { 'get': get, 'load': load, buttons: ['bold', 'italic'] }; }();
Drew McLellan

Drew McLellan 2282 points
Perch Support

No, you need to return your configuration from the get() method.

I'm not back in the office until next week, but I can put together an example then.

OK thank you very much!

Drew McLellan

Drew McLellan 2282 points
Perch Support

A simple example would look like this:

Perch.UserConfig.redactor = function(){

  var get = function(profile, config, field) {
    return { buttons: ['bold', 'italic'] }
  };

  var load = function(cb) {
      cb();
  };

  return  {
    'get': get,
    'load': load
  }

}();