Forum

Thread tagged as: Question, Redactor

Redactor: customising editor buttons; disabling asset manager

I'm using Redactor in Perch 3. I've added a few Redactor plugins (source, table, alignment) as described here: https://docs.grabaperch.com/api/editors/

  1. I'd like to customise which buttons are displayed - for example setting up different Redactor options like "content", "simple", "minimal" as described here: https://forum.grabaperch.com/forum/12-08-2015-quick-tip-custom-redactor-editors-by-using-the-editor-config-attribute (applies to the Redactor add-on in Perch 2).

Is there a way of customising the buttons for Redactor in Perch 3?

  1. Redactor in Perch 3 uses the Asset Manager for image and file uploads. Is there a way to disable that for textareas edited using Redactor? I know for any image field, I can specify disable-asset-panel="true". Is there a similar method that can be used in textareas?
Mark Melling

Mark Melling 0 points

  • 4 years ago
Drew McLellan

Drew McLellan 2638 points
Perch Support

4 years ago

setting up different Redactor options like "content", "simple", "minimal"

See "Editor configuration sets" in the docs you linked to.

Is there a way of customising the buttons for Redactor in Perch 3?

Yes, they're all just plugins, so you customise them exactly as you are doing. If you don't want our asset plugin, you can replace it with one of the defaults.
Mark Melling

Mark Melling 0 points

4 years ago

Hi Drew,

Thanks for the reply, but I'm not getting this at all. I've got a textarea field set up to load a "minimal" config of Redactor.

<perch:content id="text" type="textarea" label="Text." editor="redactor" editor-config="minimal" html="true" imagewidth="960" imageheight="720" />

The "Editor configuration sets" part of the doc refers to PERCH_EDITOR_CONFIG in your _config.inc file. I just don't get what needs to be included in _config.inc to set up a customised Redactor configuration.

In Perch 2 with Redactor as an add-on, I had this in _config.inc

var PerchEditorOptions = {
  redactor: {
    content: {
      buttons: ['html', 'formatting', 'bold', 'italic', 'underline', 'deleted', 'unorderedlist', 'orderedlist', 'table', 'outdent', 'indent', 'alignment', 'image', 'video', 'file', 'link', 'horizontalrule'],
      minHeight: 200
    },
    simple: {
      buttons: ['html', 'bold', 'italic', 'unorderedlist', 'orderedlist', 'link'],
      minHeight: 120
    },
    minimal: {
      buttons: ['bold', 'italic', 'link'],
      minHeight: 80
    }
  }
};
</script>

How do I set up the same options in Perch 3?
Drew McLellan

Drew McLellan 2638 points
Perch Support

4 years ago

There is not _config.inc any more.

The first argument to Perch.UserConfig.redactor.get() is the name of the profile you've selected in the editor-config attribute. Use that to branch your code and supply different configs.
Mark Melling

Mark Melling 0 points

4 years ago

Thanks Drew. So I'm assuming this needs to go in addons/plugins/editors/config.js. I've amended this to add various plugins and then attempted to set up the different configs of the Redactor editor. Here's my entire config.js:

Perch.UserConfig.redactor = function() {

    var get = function(profile, config, field) {

        if (config.plugins.indexOf('source') === -1) config.plugins.push('source');
        if (config.plugins.indexOf('table') === -1) config.plugins.push('alignment');
        if (config.plugins.indexOf('table') === -1) config.plugins.push('table');
        if (config.plugins.indexOf('source') === -1) config.plugins.push('video');
        if (config.plugins.indexOf('table') === -1) config.plugins.push('imagemanager');
        if (config.plugins.indexOf('table') === -1) config.plugins.push('filemanager');

        // Define editors config options
        if ('PERCH_EDITOR_CONFIG' == 'content') {
          return { buttons: ['html', 'formatting', 'bold', 'italic', 'underline', 'deleted', 'unorderedlist', 'orderedlist', 'table', 'outdent', 'indent', 'alignment', 'image', 'video', 'file', 'link', 'horizontalrule'] }
        }
        if ('PERCH_EDITOR_CONFIG' == 'simple') {
          return { buttons: ['html', 'bold', 'italic', 'unorderedlist', 'orderedlist', 'link'] }
        }
        if ('PERCH_EDITOR_CONFIG' == 'minimal') {
          return { buttons: ['bold', 'italic', 'link'] }
        }

        return config;
    };


    var load = function(cb) {
        if (typeof jQuery.Redactor.prototype.source == 'undefined') {

            jQuery.getScript(Perch.path + '/addons/plugins/editors/redactor-plugins/source.js', function() {
                jQuery.getScript(Perch.path + '/addons/plugins/editors/redactor-plugins/alignment.js', function() {
                    jQuery.getScript(Perch.path + '/addons/plugins/editors/redactor-plugins/table.js', function() {
                        jQuery.getScript(Perch.path + '/addons/plugins/editors/redactor-plugins/video.js', function() {
                            jQuery.getScript(Perch.path + '/addons/plugins/editors/redactor-plugins/imagemanager.js', function() {
                                jQuery.getScript(Perch.path + '/addons/plugins/editors/redactor-plugins/filemanager.js', cb);
                            });
                        });
                    });
                });
            });
        } else {
            cb();
        }
    };

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

}();

This isn't changing the buttons. Can you point me in the right direction with the code defining the editor config options?
Drew McLellan

Drew McLellan 2638 points
Perch Support

4 years ago

When you have this:

if ('PERCH_EDITOR_CONFIG' == 'content')

That will always be false. Those two strings are not the same. They'll never be the same. I think you want this:

if (profile == 'content')