here’s the sample code (fully working – just copy to an empty html file and it will work):
<html>
<head>
<title></title>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/redmond/jquery-ui.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
<script type="text/javascript" language="javascript">
function Init()
{
var doc = document.getElementById("iView").contentWindow.document;
doc.designMode = "On"
doc.open()
doc.write("<html><head></head><body class='some-class'>Some test text</body></html>");
doc.close();
}
</script>
</head>
<body>
<div id="dlgDiv" style="width:202px; height:72px; border: solid 1px grey">
<iframe id="iView" style="width: 200px; height:70px" frameborder="0"></iframe>
</div>
<script type="text/javascript">
var dlg = null;
jQuery(document).ready(function() {
Init();
dlg = jQuery("#dlgDiv").dialog({
autoOpen: false,
bgiframe: true,
modal: true,
width: 400
})
dlg.dialog('open');
})
</script>
</body>
</html>
Now, when I run this in IE, I can edit contents of iframe; also using IE Developer Toolbar I can see that body of iframe preserves class “some-class” I specified.
But, when running this in FF, iframe is not editable, and when inspecting its DOM with firebug, i see that iframe’s body is empty and has no class. So looks like for FF dialog makes a shallow copy of the div instead of using the div itself (dlgDiv) for dialog, or something like that…
Basically that means that NONE of javasript based rich text editors would work in a jQuery dialog in FF (and btw Google Chrome as well) – thats a big bad issue (I have tried two so far and that’s how I started looking into this issue)!
Any ideas/comments/suggestions on how I could approach this, are highly appreciated!
Thank you,
Andrey
the init should be after the open