Can't type in TinyMCE editor within a jQueryUI dialog box in joomla
I am using the joomla built in function to create a tinyMCE editor on a page within a jQuery dialog box. However, the dialog box appears and the tinyMCE editor is like its in read only mode.
This is the php built in function that echos out the editor:
<div id="PhoneCallCard" title="Phone Call Card" style="display:none;">
<?php
$editor = JFactory::getEditor();
echo $editor->display('commentz', $this->content, '600', '100', '60', '20', false);
?>
</div>
This is my jQuery implementation of opening that dialog box:
jQuery("#PhoneCallCard").dialog({
height:500,
width:800,
modal: true,
close: function(ev, ui){
jQuery('#tablepanelfightclubrequests .trSelected').removeClass('trSelected');
},
open:function({ //Everything I tried to activate the tinyMCE
//tinyMCE.activeEditor.getBody().setAttribute('contenteditable', false);
//tinyMCE.execCommand('mceRemoveControl',false,'commentz');
//tinyMCE.execCommand('mceAddControl',false,'commentz');
//tinyMCE.execCommand('mceFocus', false, 'commentz');
}});
I also found similar problem here Why can't I type in TinyMCE in my jQueryUI modal dialog? and here TinyMCE and JQuery dialog: TinyMCE read only when modal:true in the Dialog but both can't solve my problem
i was get same error like that too... my first code
$( "#f_edit_gallery" ).dialog({
autoOpen: false,
resizable: true,
show: "clip",
height:450,
width:850,
modal: true
});
after i delete option
show: "clip",
be like this
$( "#f_edit_gallery" ).dialog({
autoOpen: false,
resizable: true,
height:450,
width:850,
modal: true
});
tinyMCE run well after that
I got same problem and fix by load dialog when page load. For example:
jQuery(function() {
jQuery( "#dialog_desc" ).dialog({
modal: true,
width: 600,
height:500,
autoOpen: false,
});
}
when you want to open dialog:
jQuery( "#dialog_desc" ).dialog( "open" );
Hope this help!
You should load the editor after the dialog is loaded. What you can do is:
here is a sample code
use this code after the dialog open is triggered
if ((tinyMCE != undefined) && (tinyMCE.activeEditor != undefined)){
tinyMCE.activeEditor.remove();
setTimeout(function(){
tinyMCE.execCommand('mceAddControl', false, 'commentz');
},500);
}