Change configuration of button on windowManager TinyMCE

Question

I have made a file manager for image upload on tinyMCE, and get form upload and list of image from another file (attachment_path). First I have successed to get image url and put to field_name when I select an image. But now I want change disable button (Insert) to false when select an image and put a url of image to button (use custom attribute).

script on index_path :

file_browser_callback: function(field_name, url, type, win) {
        tinymce.activeEditor.windowManager.open({
          title: 'My File Manager',
          file: "<%= attachments_path %>",
          width: 450,
          height: 305,
          resizable : "no",
          inline : "yes",
          close_previous : "no",
          buttons: [{
              text: 'Insert',
              classes: 'widget btn primary first abs-layout-item',
              disabled: true,
              onclick: 'close',
              id: 'insertButton'
          }, {
              text: 'Close',
              onclick: 'close',
              window : win,
              input : field_name
          }]
        }, {
            oninsert: function(url) {
                win.document.getElementById(field_name).value = url; 
            },
            onselect: function() {
                // 
            }
        });

        return false;
    }

Here's script when select an image (on attachment_path ):

$('a[data-rel="colorbox"]').on('click', function(e){
     e.preventDefault();
     var url = $(this).find('img:first').attr('src');
     // top.tinymce.activeEditor.windowManager.getParams().oninsert(url);
     top.tinymce.activeEditor.windowManager.getParams().onselect();
});

I was able to find http://www.tinymce.com/wiki.php/api4:class.tinymce.WindowManager but I can't find for set configuration of buttons.

Picture for workflow

when button set to disabled: true :

<div id="insertButton" class="mce-disabled mce-widget mce-btn mce-primary mce-first mce-abs-layout-item" tabindex="-1" aria-labelledby="insertButton" role="button" aria-disabled="true" style="left: 319px; top: 10px; width: 56px; height: 28px;">
   <button role="presentation" type="button" tabindex="-1" style="height: 100%; width: 100%;">Insert</button>
</div>

when button set to disabled: false :

<div id="insertButton" class="mce-widget mce-btn mce-primary mce-first mce-abs-layout-item" tabindex="-1" aria-labelledby="insertButton" role="button" aria-disabled="false" style="left: 319px; top: 10px; width: 56px; height: 28px;">
   <button role="presentation" type="button" tabindex="-1" style="height: 100%; width: 100%;">Insert</button>
</div>

So, I try to remove class and change attribute on onselect function and it's works to able click insert button but when I click that, the modal not close.

onselect: function() {
  var adiv = $('#insertButton').closest('div');
  adiv.removeClass('mce-disabled');
  adiv.attr('aria-disabled', 'false');
}

Answer 1

Give the button some kind of a unique identifier such as Id and then enable the button from the callback. For example, you can do:

file_browser_callback: function(field_name, url, type, win) {
    tinymce.activeEditor.windowManager.open({
      title: 'My File Manager',
      file: "<%= attachments_path %>",
      width: 450,
      height: 305,
      resizable : "no",
      inline : "yes",
      close_previous : "no",
      buttons: [{
          text: 'Insert',
          classes: 'widget btn primary first abs-layout-item',
          id: 'uniqueid',
          disabled: true,
          onclick: 'close'
      }, {
          text: 'Close',
          onclick: 'close',
          window : win,
          input : field_name
      }]
    }, {
        oninsert: function(url) {
            win.document.getElementById(field_name).value = url; 
        },
        onselect: function() {
            // 
        }
    });

    return false;
}

then in the callback do this:

$('a[data-rel="colorbox"]').on('click', function(e){
     e.preventDefault();
     $('#uniqueid').removeAttr('disabled');
     var url = $(this).find('img:first').attr('src');
     // top.tinymce.activeEditor.windowManager.getParams().oninsert(url);
     top.tinymce.activeEditor.windowManager.getParams().onselect();
});

Answer 2

You can access the buttons at the bottom of the dialog with win.statusbar. It's got an items() method which returns a tinymce.ui.Collection.

To enable and disable the first button ("Insert" in your case), you could use

// Enable the button
win.statusbar.items().eq(0).disabled(false);
// Disable the button
win.statusbar.items().eq(0).disabled(true);

For the second button, replace 0 with 1, and so on.

This is, as far as I can tell, completely undocumented. I had to read the code in one of the included plugins to work out how to achieve it.