Forum

Thread tagged as: Question, Problem

Customize Redactor 3 in Perch 3.1

I've used a customized version of Redactor 3 in Perch 3.0.x. Using it in Perch 3.1 fails, no plugins are visible. What do I have to change in my config.js? Probably it's because the built-in version is showing the plugins inside the textarea? Here's my 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('table');

    config.buttons = ['format', 'bold', 'lists', 'link', 'file', 'image'];
    config.formatting = ['p', 'blockquote', 'h3'];

    return config;
  };

  var load = function(cb) {
    if (typeof jQuery.Redactor.prototype.source == 'undefined') {
        jQuery.getScript(Perch.path+'/addons/plugins/editors/redactor-plugins/table.js', function(){
        jQuery.getScript(Perch.path+'/addons/plugins/editors/redactor-plugins/source.js', cb);    
      }); 

    } else {
      cb();
    }
  };

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

}();

Many thanks for your help!

Martin Stettler

Martin Stettler 0 points

  • 3 years ago
Drew McLellan

Drew McLellan 2638 points
Perch Support

It should be largely the same. Have you updated your plugins for Redactor 3?

I was using already Redactor 3 before, so this can't be the problem. I just tried your example you posted here: https://forum.grabaperch.com/forum/06-28-2017-help-with-customising-redactor-toolbar-with-minimal-buttons:

Perch.UserConfig.redactor = function(){

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

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

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

}();

As this works well, I think the problem has to do how the plugins are loaded. Have you got an idea?

Drew McLellan

Drew McLellan 2638 points
Perch Support

Have you removed your custom version of Redactor 3 in order to use the one that now comes with Perch 3.1?

I only have the config.js-file inside the editors-folder and a folder «redactor-plugins» with my additonal plugins. I use no other redactor files.

Drew McLellan

Drew McLellan 2638 points
Perch Support

Can you show us the code you're using that isn't working?

It's the one I posted above in my first thread. Thanks for checking this!

Drew McLellan

Drew McLellan 2638 points
Perch Support

Remove this check:

if (typeof jQuery.Redactor.prototype.source == 'undefined') {
}

Great, that made it, thanks a lot! :-) I appreciate your holiday support really a lot.

Hi Martin,

Is there any chance you could post your finished config.js?

Thanks.

Martin,

Actually - I figured it out. I wasn't sure how to code the load part of the code (the bottom half of your code sample at the top of this post) following Drew's advice about removing the if ... else. This seems to work:

var load = function(cb) {
  // loading plugins
  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/counter.js', cb);
      });
    });
  });
};

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

}();

Hi Mark Sorry for the delay, I was in meetings. Although it seems that you found a solution, I put here a working example of my config.js.

Perch.UserConfig.redactor = function(){

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

if (config.plugins.indexOf('widget') === -1) config.plugins.push('widget');
if (config.plugins.indexOf('table') === -1) config.plugins.push('table');

config.buttons = ['html', 'format', 'bold', 'italic', 'lists', 'link', 'file', 'image'];
config.formatting = ['p', 'h3', 'h4'];

return config;
};

var load = function(cb) {
jQuery.getScript(Perch.path+'/addons/plugins/editors/redactor-plugins/table.js', function(){
jQuery.getScript(Perch.path+'/addons/plugins/editors/redactor-plugins/widget.js', cb); 
}); 

cb();
};

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

}();

Martin - thanks again!