1 Topic by tupton

  • tupton
  • Member
  • Offline
  • Registered: 2010-09-21
  • Posts: 8

Topic: Dynamically load tiny_mce.js after window.load

I'm having some trouble dynamically loading the tiny_mce.js file that's normally included via a script tag on the page that you want a TinyMCE editor.

I want to include this file dynamically, *after* the page has loaded. It seems that if this file is loaded after the window.load event has passed, TinyMCE can't work correctly: render() doesn't execute because Event.domLoaded is false (because _pageInit hasn't been called) but the document 'init' event will never happen because the tiny_mce.js source was loaded after the page was loaded.

I have included a small example that shows what I want to do.

<html>      
<head>
    <script id="tinymce" type="text/javascript"></script>
    <script type="text/javascript">
    function loadTinyMce() {
        document.getElementById('tinymce').src = '<path>/tiny_mce/tiny_mce_src.js';
    }           

    function setup() {                                                                                                                                                                              
        tinyMCE.init({
            mode : "none",
        });     

        var ed = new tinymce.Editor('content', {
            theme : "advanced",

            theme_advanced_toolbar_location: "top",
            theme_advanced_toolbar_align : "left",
            theme_advanced_statusbar_location : "bottom",
            theme_advanced_resizing : true,
        });
        ed.render();
    }
    </script>
</head>
<body>
    <textarea id="content" style="width:100%"></textarea>
    <a href="javascript:loadTinyMce();">Load TinyMCE</a><br />
    <a href="javascript:setup();">Setup TinyMCE</a><br />
</body>
</html>

In the above example HTML page, I want to be able to click the first link to load TinyMCE after the page has finished loading, and then click the second link to actually start using TinyMCE on the page. You can see that if you click the second link first, you get an error. If you attempt to load TinyMCE first by clicking the first link, you don't get any errors when clicking the second link, but nothing happens because TinyMCE hasn't been properly initialized.

2 Reply by OlivierW

  • OlivierW
  • Member
  • Offline
  • From: Lyon, France
  • Registered: 2009-07-18
  • Posts: 93

Re: Dynamically load tiny_mce.js after window.load

Hello,

Are you sure that your method to load the javascript really works (I've never tried this way) ? You could use a HTTP debugger (fiddler by example) to check if tiny_mce_src.js is really loaded when you click your link.

To dynamically load a javascript you could check the "Dynamic Javascript Insertion" paragraph here : http://www.hunlock.com/blogs/Howto_Dyna … pt_And_CSS

Olivier wink

PC Tuning - Radio dance, Let's Go Zik
O2 Graphics, web agency in Saint-Etienne, France

OlivierW's Website

3 Reply by tupton

  • tupton
  • Member
  • Offline
  • Registered: 2010-09-21
  • Posts: 8

Re: Dynamically load tiny_mce.js after window.load

The issue is that tinymce is reliant upon the window.load event firing to initialize itself. The above method of dynamically loading Javascript was chosen specifically for this example and is not germane to the actual problem. In practice, we use a different method to dynamically load scripts. The key here is "dynamic loading," i.e. "loading a script after the initial page load," regardless of the method used.

Last edited by tupton (2010-09-24 22:34:10)

4 Reply by Alex Tracer

  • Alex Tracer
  • Member
  • Offline
  • Registered: 2010-11-02
  • Posts: 3

Re: Dynamically load tiny_mce.js after window.load

I've met same problem: if I insert "tiny_mce.js" into document after "load" event then the script never works because Event.domLoaded is false and never changes to true. Any solutions so far?

5 Reply by spocke

  • spocke
  • Administrator
  • Offline
  • From: Sweden, Skellefteå
  • Registered: 2004-11-25
  • Posts: 14,345

Re: Dynamically load tiny_mce.js after window.load

Check the jQuery plugin or the gzip compressors both can lazy load tinymce.

Best regards,
Spocke - Main developer of TinyMCE

spocke's Website

6 Reply by Alex Tracer

  • Alex Tracer
  • Member
  • Offline
  • Registered: 2010-11-02
  • Posts: 3

Re: Dynamically load tiny_mce.js after window.load

spocke wrote:

Check the jQuery plugin or the gzip compressors both can lazy load tinymce.

Unfortunately both options were not suitable for me.


Found a solution here: "Real" dynamic loading

I'm just calling this function before inserting TinyMCE script into document.

    function initTinyMCEDynamicLoading() {
            // Setup some variables to make tiny load with ajax request
            window.tinyMCEPreInit = {};
            window.tinyMCEPreInit.suffix = '';
            window.tinyMCEPreInit.base = jsPath + 'tiny_mce/'; // SET PATH TO TINYMCE HERE
            // Tell TinyMCE that the page has already been loaded
            window.tinyMCE_GZ = {};
            window.tinyMCE_GZ.loaded = true;
    }

Last edited by Alex Tracer (2010-11-02 20:48:32)