Question

Solution: The problem below was caused by a Divx javascript that overwrote a core javascript function. Thanks to aeno for discovering this and shame on the Divx coder who did that!

Problem: Clicking the insert image button in the tinymce toolbar does nothing in IE8.

Description: Bear with me here. I don’t think the issue is with tinymce and it’s probably the fault of IE8, but I need help from someone wiser than me in solving the final piece of the puzzle to figure out who is responsible for this…

So basically I’m using tinyMCE with Visual Studio 2010 and I get the problem as described above. So I switch to the tinyMCE source code to debug this. The problem seems to happen in this piece of the code in the inlinepopups/editor_plugin_src.js, line 358:

_addAll : function(te, ne) {
    var i, n, t = this, dom = tinymce.DOM;

    if (is(ne, 'string'))
        te.appendChild(dom.doc.createTextNode(ne));
    else if (ne.length) {
        te = te.appendChild(dom.create(ne[0], ne[1]));

        for (i=2; i<ne.length; i++)
        t._addAll(te, ne[i]);
    }
},

the exact line of code being,

te = te.appendChild(dom.create(ne[0], ne[1]));

In IE8 te becomes null because te.appendChild returns nothing.

To give some background on the the code, te is a DOM.doc.body object and ne seems to be a json object containing the structure of the inline popup object that needs to be created.

So back to the code.. this works with all other browsers no problem. So I step into the function appendChild and I’m brought to some “JScript – script block [dynamic]” file that does the unthinkable. It overrides the doc.body.appendChild function… You can see it below,

code cut out
...
    var appendChildOriginal = doc.body.appendChild;
    doc.body.appendChild = function(element)
    {
        appendChildOriginal(element);
        var tag = element.tagName.toLowerCase();

        if ("video" == tag)
        {
            ProcessVideoElement(element);
        }
    }
...
code cut out

Here we can obviously see what went wrong. Of course te.appendChild returns nothing… it has NO RETURN STATEMENT!

So the final piece to this puzzle is wtf is this dynamic script block? I can’t for the love of god figure out where this script block is coming from (VS2010 is not helping). My deepest suspicions are that this is IE8 in built? Can anyone shed some light on this? Below I’m providing a little bit more of this mysterious script block in case anyone can figure out where it’s from. I can promise you something right now, it doesn’t belong to any of the scripts in our project since we’ve done a search and we turn up with nothing.

var doc;
var objectTag = "embed";

// detect browser type here
var isInternetExplorer = (-1 != navigator.userAgent.indexOf("MSIE"));
var isMozillaFirefox = (-1 != navigator.userAgent.indexOf("Firefox"));
var isGoogleChrome = (-1 != navigator.userAgent.indexOf("Chrome"));
var isAppleSafari = (-1 != navigator.userAgent.indexOf("Safari"));

// universal cross-browser loader
if (isInternetExplorer)
{
   // use <object> tag for Internet Explorer
   objectTag = "object";
   // just execute script
   ReplaceVideoElements();
}
else if (isMozillaFirefox)
{
    // listen for the 'DOMContentLoaded' event and then execute script
   function OnDOMContentLoadedHandled(e)
   {
       ReplaceVideoElements();
   }

   window.addEventListener("DOMContentLoaded", OnDOMContentLoadedHandled, false);
}
else if (isGoogleChrome)
{
   // just execute script
   ReplaceVideoElements();
}
else if (isAppleSafari)
{
    // listen for the 'DOMContentLoaded' event and then execute script
function OnDOMContentLoadedHandled(e)
{
       ReplaceVideoElements();
}
window.addEventListener("DOMContentLoaded", OnDOMContentLoadedHandled, false);
}

function MessageHandler(event)
{
    //window.addEventListener("load", OnLoad, false);
}

// replacing script
function ReplaceVideoElements()
{
    if (isMozillaFirefox)
    {
        doc = window.content.document;
    }
    else
    {
        doc = document;
    }

    // set up DOM events for Google Chrome & Mozilla Firefox
    if (isMozillaFirefox || isGoogleChrome || isAppleSafari)
    {
        doc.addEventListener("DOMNodeInserted", onDOMNodeInserted, false);
        doc.addEventListener("DOMNodeInsertedIntoDocument", onDOMNodeInsertedIntoDocument, false);
    }
    // HACK : override appendChild, replaceChild, insertBefore for IE, since it doesn't support DOM events
    if (isInternetExplorer)
    {
        var appendChildOriginal = doc.body.appendChild;
        doc.body.appendChild = function(element)
        {
            appendChildOriginal(element);
            var tag = element.tagName.toLowerCase();

            if ("video" == tag)
            {
                ProcessVideoElement(element);
            }
        }

        var replaceChildOriginal = doc.body.replaceChild;
        doc.body.replaceChild = function(element, reference)
        {
            replaceChildOriginal(element, reference);
            var tag = element.tagName.toLowerCase();

            if ("video" == tag)
            {
                ProcessVideoElement(element);
            }
        }

        var insertBeforeOriginal = doc.body.insertBefore;
        doc.body.insertBefore = function(element, reference)
        {
            insertBeforeOriginal(element, reference);
            var tag = element.tagName.toLowerCase();

            if ("video" == tag)
            {
                ProcessVideoElement(element);
            }
        }
    }
...
code cut out

Answer 1

HI,

I’m dealing with the exact same problem occuring when opening a prettyPhoto gallery…
I have no idea where this “script block” is coming from, but it definitely causes the error.

So, does anyone know anything on this suspicious script block?

Thanks,
aeno

edit:
A little more googling shed some light onto it: The mentioned script block comes from the DivX plugin that’s installed in InternetExplorer. Deactivating the DivX plugin suddenly solved the problem and prettyPhoto opens quite smooth 🙂

Now I have to figure out whether the DivX developers have bug tracker…