Forgot to mention that everything works fine in Chrome and IE.

If it helps, I am noticing the same problem on a page of mine.  We are using 3.3.8 (been trying to get our group to upgrade for months and months! ). 

It's very odd, and seems to at least partially have to do with themes.  In my investigation, I've noticed that whatever the first initialized TinyMCE instance has set as a theme gets placed on every other TinyMCE instance on the page, even if they have the same theme set in their settings.  For some reason, you can no longer click in those subsequent TinyMCE instances.

Note, while you can't click in the subsequent instances, you can interact with it by pressing buttons and stuff.  For example, if you click on the TinyMCE html toolbar button, you'll see the html and can change it, you just won't see it changing, but if you look at the underlying html using firebug, you'll see that it did change.   The theme is somehow causing TinyMCE to obscure what's actually in the TinyMCE window. 

One interesting thing is that if you resize one of these unresponsive windows, suddenly everything resets.  I'm assuming due to a redraw. TinyMCE then starts working normally.

Have same problem with 3.4.2, guess there is no way other than upgrade?

Seems to be solved by upgrading TinyMCE. Can't fix bugs on old versions of TinyMCE since I don't have a delorean time machine.

So upgrade or report the issue to the Gecko team since they seems to have broken something in the FF 11 release.

You can always checkout different versions at http://fiddle.tinymce.com
And ya, 3.4.9 is the latest stable release

Had this problem too, but it went away when I activated the wordcount plugin.

Start there methinks...

upgrading to last stable tinymce (3.4.9) solves the problem

Hey guys,

Same as Shimmoril, we've got some pretty heavy stuff coded around the editor, so it's a pretty major task to update the version.

I was able to isolate what piece of code solved the problem. The fix was introduced between 3.4.2 and 3.4.3 and I was able to make 3.4.2 work by updating the code of Editor.setupIframe to take into account the changes from 3.4.3 (the comment "We need to wait for the load event on Gecko" seems to confirm that such a problem was indeed solved there).

Replace the start of the setupIframe method by this:

setupIframe : function(filled) {
            var t = this, s = t.settings, e = DOM.get(t.id), d = t.getDoc(), h, b;

            // Setup iframe body
            if ((!isIE || !tinymce.relaxedDomain) && !filled) {
                // We need to wait for the load event on Gecko
                if (isGecko && !s.readonly) {
                    t.getWin().onload = function() {
                        window.setTimeout(function() {
                            var b = t.getBody(), undef;

                            // Editable element needs to have some contents or backspace/delete won't work properly for some odd reason on FF 3.6 or older
                            b.innerHTML = '<br>';

                            // Check if Gecko supports contentEditable mode FF2 doesn't
                            if (b.contentEditable !== undef) {
                                // Setting the contentEditable off/on seems to force caret mode in the editor and enabled auto focus
                                b.contentEditable = false;
                                b.contentEditable = true;

                                // Caret doesn't get rendered when you mousedown on the HTML element on FF 3.x
                                t.onMouseDown.add(function(ed, e) {
                                    if (e.target.nodeName === "HTML") {
                                        d.designMode = 'on'; // Render the caret

                                        // Remove design mode again after a while so it has some time to execute
                                        window.setTimeout(function() {
                                            d.designMode = 'off';
                                            t.getBody().focus();
                                        }, 1);
                                    }
                                });
                            } else
                                d.designMode = 'on';

                            // Call setup frame once the contentEditable/designMode has been initialized
                            // since the caret won't be rendered some times otherwise.
                            t.setupIframe(true);
                        }, 1);
                    };
                }

                d.open();
                d.write(t.iframeHTML);
                d.close();

                if (tinymce.relaxedDomain)
                    d.domain = tinymce.relaxedDomain;

                // Wait for iframe onload event on Gecko
                if (isGecko && !s.readonly)
                    return;
            }

            // It will not steal focus while setting contentEditable
            b = t.getBody();
            b.disabled = true;

            if (!isGecko && !s.readonly)
                b.contentEditable = true;

            b.disabled = false;

            t.schema = new tinymce.html.Schema(s);

The last line of the above is in both versions so you can use that to figure out how far to replace.

I haven't tested this extensively but hope it will help. Note that its simply between 3.4.2 and 3.4.3 so if you're coming from an older version you might need to tweak it.

Finally, I wouldn't really recommend doing this... if you can update TinyMCE to the last version, do it - what I describe here is pretty much last resort

Hey aknosis:

where exactly are you putting that?  i tried using it but my tinyMCE controls are still coming up blank!

Quick fix:
Put this in your header of your html page, where you show your editors,  after the tiny_mce.js </script>.

It forces the already loaded tinymce iframes to resize, and this problem is gone.

<script language="JavaScript">
  $(window).load(function() {
        forceTinyMceIframeResize();
    });
    function forceTinyMceIframeResize() {
        $('.mceEditor .mceIframeContainer iframe').each(function(i)
        {
            $(this).height($(this).height()+1);
        });
    }</script>

Last edited by remcov (2012-03-28 18:31:41)

You can copy past my solution after the init </script>, or in de html header of your page.
You don't have to use the onitit function.

It works for me...

WOw, this is super annoying.

I have been running the 3.2.7 install for years now with no problem.. now I have to go back to all my clients websites and update... ??

Really ?