1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Fixed Quick edit - blank page (Firefox)

Discussion in 'Resolved Bug Reports' started by Adam Howard, May 19, 2013.

  1. Adam Howard

    Adam Howard Well-Known Member

    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.


    Capture.PNG
     
  2. Mike

    Mike XenForo Developer Staff Member

    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().
     
    Adam Howard likes this.
  3. Mike

    Mike XenForo Developer Staff Member

    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 and SneakyDave like this.
  4. Adam Howard

    Adam Howard Well-Known Member

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

    cclaerhout Well-Known Member

    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):
    Code:
            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).
    Code:
            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.
     
    Divvens, Pereira and shenmuee like this.
  6. cclaerhout

    cclaerhout Well-Known Member

    Code Modified (I can't edit the previous post - great!)
    Code:
                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();
                        }
                    };
                };
    
     
    bubbl3 and shenmuee like this.
  7. bottiger

    bottiger Active Member

    What file do you put this in?
     
  8. cclaerhout

    cclaerhout Well-Known Member

    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)
     
  9. bottiger

    bottiger Active Member

    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());
     
  10. cclaerhout

    cclaerhout Well-Known Member

    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.
     
    Last edited: Aug 25, 2013
  11. bubbl3

    bubbl3 Active Member

    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 :
    Code:
                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();
                        }
                    };
                };
     

Share This Page