Custom plugin buttons not displaying in redactor toolbar

Well, I thought I'd see the custom list of buttons returned here:

if (profile == 'txtedit') {
return { buttons: ['bold','italic','underline','deleted','alignment','link','lists','table','image'] }
}

when I include editor-config="txtedit" in my template.

But instead what happens is I only get a basic set of buttons: bold, italic, underline, deleted,link, and lists. The custom plugin buttons for "alignment" and "table" are not included on my editor toolbar. Also, the "image" button is not included even though it is not one of the custom plugins I added, but I did include in my custom list of buttons.

If I remove the editor-config attribute from my template, all buttons including plugins are shown. That is what I want in most cases where the editor will be, but there are some cases where I want to exclude the video and the format buttons. This is what I was hoping to accomplish with the editor-config attribute.

Yes, I believe so.

If I change the sequence of the buttons I listed or remove one of the buttons from the list that is showing, the changes do reflect on the editor toolbar immediately upon a page refresh.

I thought it was only an issue with my added plugins, but the same issue happens with image too. If I list only the buttons below that are not displaying, then no toolbar is displayed. If I list image alone, no toolbar is displayed either.

return { buttons: ['alignment','table', 'image'] }

If I list the same as above, but add bold to the list, then only bold appears on the toolbar.

I get no errors in my console no matter what changes I make to the list.

Sorry Drew, I'm not sure I understand.

How should I update config.plugins?

Ok, I think I understand the problem now, but still not sure how to resolve.

Would I need to change this:

if (profile == 'txtedit') {
return { buttons: ['bold','italic','underline','deleted','alignment','link','lists','table','image'] }
}

to this?

if (profile == 'txtedit') {
 config.buttons: ['bold','italic','underline','deleted','alignment','link','lists','table','image']
}

I updated the code, but unfortunately, now it seems to be behaving as expected when the editor-config attribute is removed from my template.

All buttons and plugins are now displaying. The button list I defined is being ignored all together.

Sorry Drew, but its still not working for me.

This is what I have at the moment:

Perch.UserConfig.redactor = function(){

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

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

    if (profile == 'txtedit') {
    config.buttons = ['bold','italic','underline','deleted','link','lists','alignment','table','image'];
    }

    return config;
  };

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

      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', cb);
          });
        });
    } else {
      cb();
    }
  };

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

}();

What is happening at this point seems to be nothing at all.

If I comment out the buttons listed, like this:

    if (profile == 'txtedit') {
    //config.buttons = ['bold','italic','underline','deleted','link','lists','alignment','table','image'];
    }

The result is exactly the same toolbar with all buttons. What I want txtedit to do is remove video and formatting. The result should look like the list of buttons in my config.js file.

The plugins are working fine. I just can't seem to get the toolbar to display my custom list of buttons.

Hi Joshua,

After a lot of trial and error, I came to the conclusion that adding plugins automatically added a button for each plugin. And that Redactor started with a default set of 9 buttons. So I defined my custom editor configs by a combination of: - defining the specific plugins for each config - and HIDING buttons from the default 9

Here's my addons/plugins/editors/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('alignment') === -1) config.plugins.push('alignment');
        if (config.plugins.indexOf('table') === -1) config.plugins.push('table');
        if (config.plugins.indexOf('video') === -1) config.plugins.push('video');
        if (config.plugins.indexOf('imagemanager') === -1) config.plugins.push('imagemanager');
        if (config.plugins.indexOf('filemanager') === -1) config.plugins.push('filemanager');
        if (config.plugins.indexOf('underline') === -1) config.plugins.push('underline');

        // adding plugins automatically loads a button for each plugin
        // so default toolbar config increases from usual default of 9 buttons (format, bold, italic, deleted, lists, image, file, link, horizontalrule)
        // .. to 14 buttons
        // Define customised editor configs by what buttons should be hidden (from the original default of 9 buttons) and which specific plugins (from those listed above) should be loaded
        if (profile == 'content') {
            // do nothing; all required buttons and plugins are loaded by default
        }
        if (profile == 'simple') {
         return { 
            buttonsHide: ['format', 'deleted', 'horizontalrule'],
            plugins: ['source', 'underline']
          }
        }
        if (profile == 'minimal') {
         return { 
            buttonsHide: ['format', 'deleted', 'lists', 'horizontalrule'],
            plugins: ['underline']
          }
        }

        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/underline.js', function() {
                                    jQuery.getScript(Perch.path + '/addons/plugins/editors/redactor-plugins/filemanager.js', cb);
                                });
                            });
                        });
                    });
                });
            });
        } else {
            cb();
        }

    };

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

}();

Mark,

Hi and thank you so much for sharing!

I was actually going to reach out to you today to ask about this. Its working perfectly, except I notice my image and file buttons not being included although they are default buttons too.

Would these two buttons be the imagemanager and filemanager plugins you added in your script?

Joshua,

I'm assuming you've actually uploaded the imagemanager and filemanager plugins: /addons/plugins/editors/redactor-plugins/imagemanager.js and /addons/plugins/editors/redactor-plugins/filemanager.js?

If so, I don't know why that's not working. Is your template code exactly the same as mine?

By the way, I decided to add the imagemanager and filemanager as plugins, because I thought this might allow me to disable the asset manager, which I feel is better for my clients. In fact, that did not work as I'd hoped. So you could definitely experiment: - using the imagemanager and filemanager plugins - or removing those plugins and simply using the default Redactor image and file buttons

Mark,

No I did not have the imagemanager or filemanager plugins added, I was just curious to know if I needed them because my image and file buttons are not showing unless I leave the default buttons. As soon as I enable a custom button list, these two buttons disappear.

I did find that using buttonsHide or buttons will work, but only when combined with plugins, so for example this is giving me the custom buttons I want:

if (profile == 'txtedit') {
  return {
    buttons:['bold','italic','underline','lists','outdent','indent','link'],
    plugins:['alignment','table'],
  };
}

The problem is that no matter the configuration I use, if its not the default, the image and file buttons do not appear.

I believe these buttons are customized to work with the assets app, so that's where I'm hoping Drew will be able to help with what I'm missing.

I also did the following and am able to get the button lists I want, except of course for image and file. This is essentially what I want to do. If the editor config is set return my custom list, otherwise return all buttons including plugins, except for format.

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

    if(profile == 'txtedit') {
      return {
        buttons: ['bold','italic','underline','lists','link'],
        plugins: ['alignment','table']
      }

    }else{

      return {
        buttonsHide: ['format'],
        plugins: ['alignment','table','video']
      }

    }

  };

I just need to figure out how to include the image and file buttons in any custom config.

Any ideas?

Try adding the imagemanager and filemanager plugins.

Mark thanks. I did try this and the buttons showed, but they were not linked to the Assets app, which I need to have. For now I'm just using the txtedit profile for areas where I only want text editing and no media, and then the full default toolbar list for all other areas.

Drew, how can I include the image and file buttons in a custom config? I've tried a number of configs, including the changes you had suggested, but as a result I either get:

• the default toolbar with all buttons and plugins - so no custom config, or
• the custom config in various ways but always without the image and file buttons

Please help.

Joshua, did you find the solution for image and file? I am facing the same problems as you described.... Thanks for your reply!

Martin,

Hi, I left this post opened because I'm hoping to hear back from Drew.

I have no solution yet unfortunately. What I've had to do is use the default config and only use a custom config for text only, so no file or image buttons, even though I can include custom buttons in either case.

The image/file buttons do appear if added as custom buttons, like adding the table or video buttons, but they do not use the Assets app. Since the image/file buttons have been customized by Perch to work with assets, I can only hope for a solution from Perch as well.

At least now I know I'm not the only one who ran into this issue. Hopefully Drew will be able to help. Sorry, I wish I had a solution.