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/ajax/libs/jquery/2.0.2/jquery.min.js'></script>
...

jQuery:

...
if (typeof TinyMCE == 'undefined') {
  $.getScript('//tinymce.cachefly/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.

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./ajax/libs/jquery/2.0.2/jquery.min.js'></script>
...

jQuery:

...
if (typeof TinyMCE == 'undefined') {
  $.getScript('//tinymce.cachefly/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.

• javascript
• jquery
• html
• tinymce
• cross-domain

Share Improve this question Follow asked Jul 16, 2013 at 23:16 Oliver SprynOliver Spryn 17.4k3333 gold badges105105 silver badges200200 bronze badges 3

• I am not very familiar with tinymce4, but for version 3.x there is an example to be found here: tinymce./tryit/3_x/load_on_demand.php Usually it should work the same way for more recent versions, – Thariama Commented Jul 17, 2013 at 8:56
• Have you checked error in console? – Rajesh Kumar Commented Jul 17, 2013 at 9:52
• @RajeshKumar "The JavaScript console does not show any errors." – Oliver Spryn Commented Jul 17, 2013 at 14:27

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

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

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

change your code as following:

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

It is working for me. more info https://stackoverflow./a/13361509/392526

Quote from original question:

Any idea on how I can get TinyMCE to initialize?

There is a problem with JQuery.getScript and tinyMCE, which I think is causing your trouble. It took me a day to figure it out, so I thought I should mention on it here.

1. $.getScript both adds and removes the script you're loading, executing it's content in the process. So, by the time your success function runs tinymce.init, the script tag no longer exists within your document.
2. tinymce.init on the other hand, looks through your document for that specific script tag in order to learn the base url to all its files. If it doesn't find it, it will get it from document.location instead.

I can't say what is the best way to solve this little problem. I found the following to do the trick for me (tinymce 4.2.7):

Open tinymce.min.js and search for the ment line ...

            // Get base where the tinymce script is located

Look a few lines down where you'll find the statement ...

            src = scripts[i].src;

... which should be altered to ...

            src = "http://yourdomain./path/to/tinymce/tinymce.min.js";

I've identified the cause. But I'm not very happy with my solution. Maybe someone else will e up with a better one.