Proper Way Of Modifying Toolbar After Init in TinyMCE
<p>I am extending a cloud-hosted LMS with javascript. Therefore, we can add javascript to the page, but cannot modify the vendor javascript for different components.</p>

<p>The LMS uses tinyMCE frequently. The goal is to add a new button on to the toolbar of each tinyMCE editor.</p>

<p>The problem is that since the tinyMCE modules are initialized in the vendor's untouchable code, we cannot modify the init() call. Therefore, we cannot add any text on to the "toolbar" property of the init() object.</p>

<p>So I accomplished this in a moderately hacky way:</p>

<pre class="lang-js prettyprint-override"><code>tinyMCE.on('AddEditor', function(e){
  e.editor.on('init', function(){
    tinyMCE.ui.Factory.create({
      type: 'button',
      icon: 'icon'
    }).on('click', function(){
      // button pressing logic
    })
    .renderTo($(e.editor.editorContainer).find('.mce-container-body .mce-toolbar:last .mce-btn-group &gt; div')[0])
  });
});
</code></pre>

<p>So this works, but needless to say I am not totally comfortable having to look for such a specific location in the DOM like that to insert the button. Although this works, I do not believe it was the creator's intention for it to be used like this.</p>

<p>Is there a proper way to add the button to a toolbar, after initialization, if we cannot modify the initialization code?</p>