Fixed Quick edit - blank page (Firefox)

[Adam Howard]

This is happening here on XenForo.com. Its also happening on every XenForo website. It started with only Firefox Nightly, but its making its way to Firefox Aurora now as well (in the last update).

So this is rolling down the pipe in their development.

So whatever has changed is preventing the text in "quick edit" (as I call it) from displaying. It show for a second and then vanishes. As if one of the images or some css is hiding it.

 

[Mike]

It actually looks like the entire document inside the iframe itself is being wiped out. It doesn't appear in Firebug, but it does generally seem to appear when calling getContent().

 

[Mike]

Unfortunately, I haven't been able to find a workaround (in TinyMCE) or even get a reduced test case. Unfortunately, it appears to just be a regression within Firefox. It will be a moot (or at least very different) point in 1.2 obviously.

Changing the version of TinyMCE in patch release is not an option due to the amount of potential breakage from that.

So it's not ideal, but for now, the only option is to disable inline editor for FF 23.

 

[Adam Howard]

Unfortunately, I haven't been able to find a workaround (in TinyMCE) or even get a reduced test case. Unfortunately, it appears to just be a regression within Firefox. It will be a moot (or at least very different) point in 1.2 obviously.

Changing the version of TinyMCE in patch release is not an option due to the amount of potential breakage from that.

So it's not ideal, but for now, the only option is to disable inline editor for FF 23.

Thank you Mike for looking into this. Looking forward to 1.2

 

[cclaerhout]

This problem occurs with all versions of TinyMCE on Gecko browsers after the version 3.4.3 of TinyMCE. Its comes from the Gecko designMode AND jQueryTools (overlay) AND TinyMCE.

A quick solution is to apply this kind of fix. Unfortunately, it doesn't work with the nightly build of Firefox mentioned by Adam. The solution then is to understand why this problem really occurs: the inline edit is loaded using the overlay of jQueryTools. Since it's JavaScript, TinyMCE is certainly loaded as soon as the template is loaded but the overlay has only started to be built. If you insert some console alerts in a TinyMCE plugin and in the onBeforeLoad & onLoad callbacks of the jQueryTools XenForo Overlay, the order will be the following:

1. TinyMCE plugin (no matter which event is used)
2. JQT onBeforeLoad
3. JQT onLoad

So it confirms the TinyMCE plugin is loaded whereas the overlay is not even yet created which seems to mess the designMode. So a workaround to that problem is to remove the current editor in the JQT onBeforeLoad callback and to load it in the JQT onLoad callback. Something like this (the code below is using the MCE 4 syntax, it would need to be converted):

        XenForo._overlayConfig.onBeforeLoad = function(e){
            console.log('onBeforeLoad');
            if(window.tinyMCE && $(this.getTrigger()).hasClass('edit')){
                XenForo._overlayConfig.activeMCE = $(tinyMCE.activeEditor.getElement()).attr('id');
                tinyMCE.execCommand('mceRemoveEditor', false, XenForo._overlayConfig.activeMCE);
            };
        };
 
        XenForo._overlayConfig.onLoad = function(e){
            console.log('onLoad');
            if(window.tinyMCE && $(this.getTrigger()).hasClass('edit')){
                tinyMCE.execCommand('mceAddEditor', true, XenForo._overlayConfig.activeMCE);
                delete XenForo._overlayConfig.activeMCE;
            };
        };

The conditional could also include a browser check (tinymce.isGecko) since other browsers don't have this problem.
I've directly modified the object XenForo._overlayConfig because it was the easiest to do from a TinyMce plugin. Of course it can be done at the source.

Edit: simpler code (no need to use the onLoad callback).

        XenForo._overlayConfig.onBeforeLoad = function(e){
            if(window.tinyMCE && tinymce.isGecko && $(this.getTrigger()).hasClass('edit')){
                $ov = this.getOverlay();
                if($ov.find('.bbCodeEditorContainer').length == 0){
                    var id = $(tinyMCE.activeEditor.getElement()).attr('id');
                    tinyMCE.execCommand('mceRemoveEditor', false, id);
                    tinyMCE.execCommand('mceAddEditor', true, id);
                }
            };
        };

The check of the RTE Bb Code mode might be improved.

 

[cclaerhout]

Code Modified (I can't edit the previous post - great!)

            XenForo._overlayConfig.onBeforeLoad = function(e){
                if(window.tinyMCE && tinymce.isGecko && $(this.getTrigger()).hasClass('edit')){
                    $ov = this.getOverlay();
                    $mceTextarea = $(tinyMCE.activeEditor.getElement());
                   
                    if(!$mceTextarea.attr('disabled')){
                        var id = $mceTextarea.attr('id');
                        tinyMCE.execCommand('mceRemoveEditor', false, id);
                        tinyMCE.execCommand('mceAddEditor', true, id);
                        tinyMCE.activeEditor.focus();
                    }
                };
            };

 

[bottiger]

Code Modified (I can't edit the previous post - great!)

            XenForo._overlayConfig.onBeforeLoad = function(e){
                if(window.tinyMCE && tinymce.isGecko && $(this.getTrigger()).hasClass('edit')){
                    $ov = this.getOverlay();
                    $mceTextarea = $(tinyMCE.activeEditor.getElement());
                  
                    if(!$mceTextarea.attr('disabled')){
                        var id = $mceTextarea.attr('id');
                        tinyMCE.execCommand('mceRemoveEditor', false, id);
                        tinyMCE.execCommand('mceAddEditor', true, id);
                        tinyMCE.activeEditor.focus();
                    }
                };
            };

What file do you put this in?

 

[cclaerhout]

What file do you put this in?

Any JS file that would be loaded with the editor template. This fix (or almost) has been included in that addon (must be activated inside its options)

 

[bottiger]

Any JS file that would be loaded with the editor template. This fix (or almost) has been included in that addon (must be activated inside its options)

Thanks this seems to help but the toolsbars and wysiwyg is missing.

Also when you try to reopen it, it says: TypeError: tinyMCE.activeEditor is undefined

$mceTextarea = $(tinyMCE.activeEditor.getElement());

 

[cclaerhout]

Thanks this seems to help but the toolsbars and wysiwyg is missing.

Also when you try to reopen it, it says: TypeError: tinyMCE.activeEditor is undefined

$mceTextarea = $(tinyMCE.activeEditor.getElement());

Just a tip but I don't want to spend time one this since an addon already does this: insert your JS code/file after the init of MCE. The best to do is to create a basic MCE plugin with this code in it.
Edit: for reference, I put this file here. Search in it "jQueryTools Fix Plugin for XenForo overlays". You will find the code but only for MCE4 and not MCE3. The event system is not the same between the two systems. Check the TinyMCE API for this.

 

[bubbl3]

If anyone is interested, i was able to fix the "bug" adding this code from cclaerhout at the end of /js/tinymce/tiny_mce.js :

            XenForo._overlayConfig.onBeforeLoad = function(e){
                if(window.tinyMCE && tinymce.isGecko && $(this.getTrigger()).hasClass('edit')){
                    $ov = this.getOverlay();
                    $mceTextarea = $(tinyMCE.activeEditor.getElement());
                 
                    if(!$mceTextarea.attr('disabled')){
                        var id = $mceTextarea.attr('id');
                        tinyMCE.execCommand('mceRemoveEditor', false, id);
                        tinyMCE.execCommand('mceAddEditor', true, id);
                        tinyMCE.activeEditor.focus();
                    }
                };
            };