jQuery Load TinyMCE 4 On Demand

Question

I am trying to use jQuery to load TinyMCE 4 on-demand from a CDN with no avail. I would like avoid loading TinyMCE when the page loads since it is a (relatively) bulky set of scripts, and instead I plan to trigger loading it when the user clicks a button. Here is what I have:

HTML:

...
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js'></script>
...

jQuery:

...
if (typeof TinyMCE == 'undefined') {
  $.getScript('//tinymce.cachefly.net/4/tinymce.min.js', function() {
    alert('Loaded!');

    tinymce.init({
      selector: 'textarea',
      plugins: [
        'autolink contextmenu image link table'
      ],
      menubar: false,
      statusbar: false,
      toolbar: false
    });
  });
}
...

I can see that jQuery does indeed fetch the script, as I can see the network activity in my inspector. The callback method is called, as I can see the Loaded! dialog appear, but TinyMCE dies not initialize. The JavaScript console does not show any errors.

Any idea on how I can get TinyMCE to initialize?

Thank you for your time.

Answer 1

Tinymce can not resolve baseURL when loading dinamically, so we have to hardcode it.
Add the following:

if (typeof tinymce == 'undefined') {
    $.getScript('//tinymce.cachefly.net/4/tinymce.min.js', function () {
        window.tinymce.dom.Event.domLoaded = true;
        tinymce.baseURL = "//tinymce.cachefly.net/4";
        tinymce.suffix = ".min";
        tinymce.init({
            selector: 'textarea',
            plugins: ['autolink contextmenu image link table'],
            menubar: false,
            statusbar: false,
            toolbar: false
        });
    });
}