Question

I’m having trouble getting tinyMCE to work with the new jQuery 1.4.2 on IE6. In my project, we’ve been using tinyMCE with no problems with jQuery 1.3.2. But now the upgrade has brought on a weird problem. Whenever I click any button in the toolbar (whether it be a custom one or the standard ones like bold, italics), IE6 fires an unload event, caught by this function:

window.onbeforeunload = function() {
    alert("bad mce!");
    // normally used for a blockUI "loading new page" message
}

I’m seeing the same problem with the latest version of tinyMCE 3.3.2, in addition to older versions of tinyMCE. My tinyMCE init is pretty basic…

function initTinyMCE() {
        tinyMCE.init({
            mode: "specific_textareas",
            theme: "advanced",
            skin: "o2k7",
            editor_selector: "mceSimple",
            theme_advanced_buttons1: "bold,italic,underline,separator,bullist,backcolor,forecolor,undo,redo",
            theme_advanced_buttons2: "",
            theme_advanced_toolbar_location: "top",
            theme_advanced_toolbar_align: "left",
            onchange_callback: "NoteChanged",
            width: "100%",
            height: "520",
          }); 
}

This of course works fine in Firefox (unfortunately, target browser is IE6 (boo)). If I revert back to jquery 1.3.2, the problem goes away in IE6. Does anyone have any idea what could be causing this?

Answer 1

Well if anyone stumbles upon this problem in the future, I eventually found the solution (and forgot to post it here for a while).

There was a compatibility problem with jQuery UI. The TinyMCE was being put in a window using the dialog plugin. I stopped using the dialog plugin and used blockUI instead and that fixed it. Who would have guessed.