TinyMCE & Dialog Issue
TinyMCE & Dialog Issue
Hello All,
I've run across, what to me, appears to be a new issue with the Dialog
plugin when using the TinyMCE editor. (This was tested using Firefox
3.0.7 Win32)
The symptoms:
After showing a dialog which contains an initialized instance of the
tinyMCE editor, the editor is no longer functional.
The Test Case:
http://shellscape.org/jquery/tinyMCE%20Dialog%20Bug/
1. Let the page load completely.
2. Click the '1. Init Editor' button.
3. Click the '2. Show Dialog' button.
The Cause:
After an instance of the editor has been initialized (Step 2), the
html which is inserted into the document for the editor looks like
this:
<iframe style="width: 100%; height: 100px;" src='javascript:""'
id="_TextTest_ifr" frameborder="0">
<html>
<head xmlns="http://www.w3.org/1999/xhtml"><base
href="file:///C:/projects/Javascript/jQuery%20UI/Test%20Cases/tinyMCE%20Dialog%20Bug/"/>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>
<link rel="stylesheet"
mce_href="(truncated)/tinymce/themes/advanced/skins/default/content.css"
href="(truncated)/tinyMCE%20Dialog%20Bug/tinymce/themes/advanced/skins/default/content.css"/>
</head>
<body class="mceContentBody" id="tinymce" spellcheck="false" dir="ltr">
<br mce_bogus="1"/>
</body>
</html>
</iframe>
The important bits here are the <html>, <head> and <body> tags.
After clicking the 'Show Dialog' button, the html looks like this:
<html><head/><body/></html>
In my initial investigation of this, I tracked the problem down to
line 210 in ui.dialog.js. It would appear that
"uiDialog.appendTo('body')" is being called to ensure that the dialog
is at the top of the zIndex in the page. Once the element is moved,
the html of the iframe seems to 'reset'. There is also an issue of
element reference; tinyMCE is not a jQuery project and uses expandos
and the like to store element references. When this dialog is
re-appended to the body, those references seem to go missing.
(Afterall, we cant always assume that people will only be using script
developed with jQuery, with the dialog)
Is there a documented instance where this (re-appending to the body)
is necessary, and shouldnt just setting the zIndex inline solve the
issue?
Please share your thoughts and findings.
Thanks,
Andrew