Tweak TinyMCE Window after opening

Question

I have this annoying thing that although is not a blocker-blocker, is very annoying. Let me explain.

I have this code inside of a MCE plugin:

var theWindow = editor.windowManager.open({
  html: '<iframe id="iframeID" src="iframeURL" frameborder="0"></iframe>',
  buttons: [
    {
      text: 'Cancel',
      subtype: 'secondary'

    },
    {
      text: 'Submit',
      onclick: 'submit',
      subtype: 'primary mySubmitButton'
    }
  ],
});

$('#iframeID').on('load', function(){
  selectedSnippets.on('change', function(e){
    theWindow.statusbar.$el.find('.mySubmitButton .mce-txt').text(text);
  });
});

(I avoided the plugin declaration and the code that will trigger the window opening for brevity)

Ok, so this works, the window is opened, it does have a title, a footer and two buttons on this footer.

My issue now is this: how do I update the text on the footer buttons? I mean I could simply do it with js. That works, but the problem is the buttons are positioned absolute and computed on first render:

So, my question is: how the hell do I re-render those buttons? The documentation of TinyMCE doesn't really help (or I may not know what/where to look for).

And as a subquestion: how to disable one button?

Thanks!

Answer 1

I managed to re-render the buttons in two steps in a probably not-so-clean way:

// you will need to run this for each **updated** button
theWindow.statusbar._items[0].$el.find('.mce-txt').text('my long value goes here');
theWindow.statusbar._items[0].updateLayoutRect(); 

// You will need to call this once
theWindow.statusbar.reflow()

I still have no idea how to disable/enable buttons though :)