CODEWITHSUNDEEP
javascriptjqueryhtmltinymcecross-domain
Oliver Spryn
Oliver Spryn

Reputation: 17348

jQuery Load TinyMCE 4 On Demand

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.

Upvotes: 3

Views: 4627

Answers (3)

rapomon
rapomon

Reputation: 99

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
        });
    });
}

Upvotes: 5

user1904991
user1904991

Reputation: 140

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 comment 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.com/path/to/tinymce/tinymce.min.js";

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

Upvotes: 0

Rajesh Kumar
Rajesh Kumar

Reputation: 2503

change your code as following:

if (typeof tinymce == 'undefined') {
        $.getScript('//tinymce.cachefly.net/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.com/a/13361509/392526

Upvotes: 0

Related Questions