title: IE8 tinyMCE .NET insert image
body: <p>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!</p>
  
  <p>Problem: Clicking the insert image button in the tinymce toolbar does nothing in IE8.</p>
  
  <p>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...</p>
  
  <p>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:</p>
  
  <pre><code>_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&lt;ne.length; i++)
          t._addAll(te, ne[i]);
      }
  },
  </code></pre>
  
  <p>the exact line of code being, </p>
  
  <pre><code>te = te.appendChild(dom.create(ne[0], ne[1]));
  </code></pre>
  
  <p>In IE8 te becomes null because te.appendChild returns nothing.</p>
  
  <p>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.</p>
  
  <p>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, </p>
  
  <pre><code>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
  </code></pre>
  
  <p>Here we can obviously see what went wrong. Of course te.appendChild returns nothing... it has NO RETURN STATEMENT!</p>
  
  <p>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. </p>
  
  <pre><code>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 &lt;object&gt; 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 &amp; 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
  </code></pre>