TinyMCE include crashes IE8

Posted by dkris on Stack Overflow See other posts from Stack Overflow or by dkris
Published on 2010-05-28T07:57:25Z Indexed on 2010/05/28 8:02 UTC
Read the original article Hit count: 509

Filed under:

JavaScript

|

tinymce

|

ie8

I am trying to open a popup onclick using a function call as shown below.

<a id="forgotPasswordLink" href="#" onclick="openSupportPage(document.getElementById('forgotPasswordLink').innerHTML);"> Some Text </a>

I am creating the HTML for the pop up page on the fly and also including the TinyMCE source file over there.

The code is as shown below:

<script type="text/javascript">
<!--
    function openSupportPage(unsafeSupportText) {
        var features="width=700,height=400,status=yes,toolbar=no,menubar=no,location=no,scrollbars=yes";            
        var winId=window.open('','Test',features);
        winId.focus();
        winId.document.open('text/html','replace');
        winId.document.write('<html><head><title>' + document.title + '</title><link rel="stylesheet" href="./css/default.css" type="text/css">\n');
        winId.document.write('<script src="./js/tiny_mce/tiny_mce.js" type="text/javascript" language="javascript">Script_1</script>\n');
        winId.document.write('<script src="./js/support_page.js" type="text/javascript" language="javascript">Script_2</script>\n');
        winId.document.write('</head><body onload="inittextarea()">\n');/*function call which will use the TinyMCE source file*/
        winId.document.write('  \n');
        winId.document.write('<p>&#160;</p>');
        var hiddenFrameHTML = document.getElementById("HiddenFrame").innerHTML;
        hiddenFrameHTML = hiddenFrameHTML.replace(/&amp;/gi, "&");
        hiddenFrameHTML = hiddenFrameHTML.replace(/&lt;/gi, "<");
        hiddenFrameHTML = hiddenFrameHTML.replace(/&gt;/gi, ">");
        winId.document.write(hiddenFrameHTML); 
        winId.document.write('<textarea id="content" rows="10" style="width:100%">\n');
        winId.document.write(document.getElementById(top.document.forms[0].id + ":supportStuff").innerHTML);
        winId.document.write('</textArea>\n');
        var hiddenFrameHTML2 = document.getElementById("HiddenFrame2").innerHTML;
        hiddenFrameHTML2 = hiddenFrameHTML2.replace(/&amp;/gi, "&").replace(/&lt;/gi, "<").replace(/&gt;/gi, ">");
        winId.document.write(hiddenFrameHTML2); 
        winId.document.write('</body></html>\n');
        winId.document.close();
    }
// -->
</script>

The

support.js

file contains the following.

function inittextarea() {
    tinyMCE.init({
        elements : "content",
        mode : "exact",
        theme : "advanced",
        readonly : true,
        setup : function(ed) {
            ed.onInit.add(function() {
                tinyMCE.activeEditor.execCommand("mceToggleVisualAid");
            });
        }
    });
}

The problem arises when the onclick event is fired and the pop up opens up, IE8 stops responding and seems to hang. It is working fine on Chrome, Firefox and Safari.

I feel that the issue is because of TinyMCE script inclusion because on commenting the lines that include the tiny_mce.js and the support_page.js, the popup renders with no issues.

I am also using the latest TinyMCE release.

Please let me know why this is happening and what could be the resolution.

Developer IT