1

Topic: firefox 11 and multiple tinymce instances

I can't seem to get tinymce to work in firefox properly.  The first instance works fine but the 2nd, 3rd etc I can't seem to edit anything.  ie the content area isn't selectable.

I noticed that there was at least a couple other guys having a similar (same?) issue:
http://our.umbraco.org/forum/core/general/29843-TinyMCE-Bug-in-Firefox-11

Any ideas on what might be going wrong?

2

Re: firefox 11 and multiple tinymce instances

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

3

Re: firefox 11 and multiple tinymce instances

kbolton wrote:

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

You forgot to mention your TinyMCE version!

Greetings from Germany,

Felix Riesterer.
(-> about me and this forum <-)

4

Re: firefox 11 and multiple tinymce instances

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! sad ). 

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.

5

Re: firefox 11 and multiple tinymce instances

FYI, I unilaterally upgraded our tinymce installation to 3.5b2 and the problem resolved.

6

Re: firefox 11 and multiple tinymce instances

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

7

Re: firefox 11 and multiple tinymce instances

I have this problem with 3.4.2 as well.   


It appears that pages with multi mce controls are all showing up without their text except for the bottom one.

Is there any resolution or workaround for this?  I can't just arbitrarily upgrade tinyMCE on an enterprise application!

8

Re: firefox 11 and multiple tinymce instances

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. smile

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

Best regards,
Spocke - Main developer of TinyMCE

9

Re: firefox 11 and multiple tinymce instances

spocke wrote:

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. smile

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


are there any breaking changes i should be aware of when upgrading from 3.4.2?  does 3.4.9 solve this issue? and is it the latest stable release?

10

Re: firefox 11 and multiple tinymce instances

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

11

Re: firefox 11 and multiple tinymce instances

If you are already on the 3.4.x branch you should be fine. We made some major changes to the core between 3.3 and 3.4 the same happens now in 3.5 but it's backwards compatible some custom plugins might have issues between 3.x versions.

Best regards,
Spocke - Main developer of TinyMCE

12

Re: firefox 11 and multiple tinymce instances

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

Start there methinks...

13

Re: firefox 11 and multiple tinymce instances

I'm on 3.3.8 and got this problem aswell when having 2 instances of TinyMCE.
I solved this by loading the two instances via function... using setTimeout().

Ofc low values coz I dont want my users to wait tongue but enough to let the first instance load completely.

Tudo CMS - Snabbt. Användarvänligt. Enkelt.
http://www.tudo.se

14

Re: firefox 11 and multiple tinymce instances

upgrading to last stable tinymce (3.4.9) solves the problem

15

Re: firefox 11 and multiple tinymce instances

spocke wrote:

If you are already on the 3.4.x branch you should be fine. We made some major changes to the core between 3.3 and 3.4 the same happens now in 3.5 but it's backwards compatible some custom plugins might have issues between 3.x versions.

We're running into this problem on Firefox 11 running TinyMCE v. 3.4.1. We have made heavy mods to this version and so cannot upgrade easily. A quick fix would be appreciated.

tudo wrote:

I'm on 3.3.8 and got this problem aswell when having 2 instances of TinyMCE.
I solved this by loading the two instances via function... using setTimeout().

Can you elaborate on this fix tudo? I've tried adding a timeout but it's not fixing the issue.

16

Re: firefox 11 and multiple tinymce instances

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 smile

17

Re: firefox 11 and multiple tinymce instances

I have the same issue - modification to TinyMCE makes upgrading time consuming. I've temporarily solved the issue (I'm on 3.3.9.2 jQuery) by adding the following to my settings:

oninit: function(){ $('.mceIframeContainer iframe').css('height',''); }

This causes the iframe to redraw which seems to fix the problem (you could probably modify any style on the iframe and it would fix it.

18

Re: firefox 11 and multiple tinymce instances

Hey aknosis:

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

19

Re: firefox 11 and multiple tinymce instances

oninit is a setting you can pass to tinyMCE.init. It is a callback that gets executed after the editors are initialized.

http://www.tinymce.com/wiki.php/Configuration:oninit

20

Re: firefox 11 and multiple tinymce instances

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)

21

Re: firefox 11 and multiple tinymce instances

Hmm... this approach of finding all the iframes and increasing their height doesn't seem to be working for me when I use it for my oninit function:

oninit: function() { 
    $('.mceEditor .mceIframeContainer iframe').each(function(i) {
        $(this).height($(this).height()+1);
    });
}

On a page with 3 WYSIWYGs, only the last one is editable. For the first two, I still need to resize them by dragging the bottom right corner before their content appears and the box becomes editable.

22

Re: firefox 11 and multiple tinymce instances

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...

23

Re: firefox 11 and multiple tinymce instances

I found that depending on the time the page takes to load it could not work with that solution (resizing the editor).
If you add a timeout (currently it works fine for me with 3 seconds) it will resize the windows that are not working, the only downside is that the editor will be greyed out for a brief moment but at least it gets fixed.

24

Re: firefox 11 and multiple tinymce instances

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 ?

25

Re: firefox 11 and multiple tinymce instances

pvincent - can you explain exactly where you put the timeout? I tried using one as mentioned above, but it didn't help. Thanks.