[Quick Tip] Custom redactor editors by using the editor-config attribute

Let's make a simple content template with 3 different configurations, "content", "simple" and "minimal":

<perch:content id="text_minimal" type="textarea" label="Minimal" html="true" editor="redactor" editor-config="minimal" />
<perch:content id="text_simple" type="textarea" label="Simple" html="true" editor="redactor" editor-config="simple" />
<perch:content id="text_full" type="textarea" label="Content" html="true" editor="redactor" editor-config="content" />

Now we'll define a custom js object where we specify the config values, I put it in the plugins/editors/_config.inc file:

<!-- Custom CSS/JavaScript -->
<script>
// Define editors config options
var PerchEditorOptions = {
  redactor: {
    content: {
      buttons: ['html', 'formatting', 'bold', 'italic', 'unorderedlist', 'orderedlist', 'link', 'file'],
      minHeight: 200
    },
    simple: {
      buttons: ['html', 'bold', 'italic', 'unorderedlist', 'orderedlist', 'link'],
      minHeight: 120
    },
    minimal: {
      buttons: ['bold', 'italic', 'link'],
      minHeight: 80
    }
  }
};
</script>

We need to change the redactor editors setup, so we'll make a few changes in the plugins/editors/redactor/_config.inc file:

<script type="text/javascript" charset="utf-8">
$(function() {
  // Modify Redactor global defaults
  (function() {
    var defaults = {
      imageUpload: 'PERCH_LOGINPATH/addons/plugins/editors/redactor/perch/upload.php?filetype=image',
      fileUpload: 'PERCH_LOGINPATH/addons/plugins/editors/redactor/perch/upload.php',
      cleanStyleOnEnter: true,
      removeComments: true,
      buttonSource: true
    };

    for (var option in defaults)
      $.Redactor.opts[option] = defaults[option];
  })();

  var set_up_redactor = function() {
    $('textarea.redactor:not([data-init])').each(function(i,o) {
      var self = $(o);
      var uploadFields = {
          'width'  :  self.attr('data-width')||'',
          'height' :  self.attr('data-height')||'',
          'crop'   :  self.attr('data-crop')||'',
          'quality':  self.attr('data-quality')||'',
          'sharpen':  self.attr('data-sharpen')||'',
          'density':  self.attr('data-density')||'',
          'bucket' :  self.attr('data-bucket')||'default'
        };
      var config = {},
          editorConfig = self.attr('data-editor-config') || null;

      // defined in addons/plugins/ui/_config.inc
      var options = PerchEditorOptions['redactor'] || {};

      if (options.hasOwnProperty(editorConfig)) {
        config = options[editorConfig];
      }
      config.uploadFileFields = config.uploadImageFields = uploadFields;

      self.wrap('<div class="editor-wrap" style="float:left;"></div>');
      self.redactor(config);
      self.attr('data-init', true);
    });
  };

  set_up_redactor();
  $(window).on('Perch_Init_Editors', function() { set_up_redactor(); });
});
</script>

First we modified some global options that are shared by all instances and change them so we won't have to specify and repeat them in our custom config.

Here's a screenshot of the three editors:

Hope it helps.