Hi,
I have seen this question before and I tried the suggested solutions but I cannot seem to get this to work properly. I could really use some help.
OK, basic issue. I have a jQueryUI modal dialog with a DIV in it which I am converting to a CKEditor object. The conversion happens in the create of the dialog. When I show the dialog, it almost shows perfect (the X in the close box doesn't show but that is low on my list of priorities). The only problem is that I cannot type in the editor at all.
I have looked at the various suggestions. Some have suggested changing config.baseFloatZIndex which I tried. No luck. Another suggestion was to create a patch js file for jQueryUI which I also tried. No luck there either.
I have been fighting this for three days with no luck.
I am using the latest versions of jQuery, jQueryUI and CKEditor (all downloaded within the last week).
Thanks for any assistance you can offer. Here's the code:
<!DOCTYPE html>
<html>
<head>
<title>A Simple Page with CKEditor</title>
<!-- Make sure the path to CKEditor is correct. -->
<script type="text/javascript" src="/jquery.js"></script>
<script type="text/javascript" src="/jqueryui/jquery-ui.js"></script>
<script type="text/javascript" src="/ckeditor/ckeditor.js"></script>
<link rel="stylesheet" type="text/css" href="/jqueryui/jquery-ui.min.css">
<link rel="stylesheet" type="text/css" href="/ckeditor/contents.css">
<script type="text/javascript">
function showCode(){
var myResults = CKEDITOR.instances.mbeditor.getData();
alert(myResults);
}
function showDialog(){
//alert('In showdialog()');
//$('#myForm').css("visibility", "visibile");
// CKEDITOR.config.baseFloatZIndex = 100000;
$('#myForm').dialog('open');
}
function showIndices(){
var myFormIdx = $('#myForm').zIndex();
myFormIdx = myFormIdx.toString();
alert('Div index is ' + myFormIdx);
var myFormIdx = $('#mbeditor').zIndex();
myFormIdx = myFormIdx.toString();
alert('Editor index is ' + myFormIdx);
}
</script>
<script type="text/javascript">
$(function() {
$( "#myForm" ).css("visibility", "hidden");
$( "#myForm" ).dialog({
auroResize: true,
autoOpen: false,
position: ['center','center'],
hide: 'slide',
show: 'slide',
height: 'auto',
width: 'auto',
modal: true,
title: "Edit Email",
create: function(){
$my_editor = CKEDITOR.replace("mbeditor");
},
buttons: {
"Save": function() {
$(this).dialog("close");
},
"Cancel": function() {
$(this).dialog("close");
},
}
});
$( "#myForm" ).css("visibility", "visible");
});
</script>
</head>
<body>
<div id="myForm" >
<form>
<textarea name="mbeditor" id="mbeditor" rows="10" cols="80">
This is my textarea to be replaced with CKEditor.
</textarea>
</form>
</div>
<input type="button" value="Code!" onclick="showCode();" />
<input type="button" value="OpenDialog" onclick="showDialog()" />
<input type="button" value="ShowZ" onclick="showIndices()" />
</body>
</html>
Thanks. All help is appreciated