Can't type in TinyMCE editor within a jQueryUI dialog box in joomla

Question

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

score 2 · Answer 1 · answered Oct 16 '13 at 10:07

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!

score 1 · Answer 2 · answered May 27 '13 at 11:01

You should load the editor after the dialog is loaded. What you can do is:

Load the editor as you are doing now using $editor->display method
Before opening the jquery ui dialog, detach the editor
Display UI dialog and load editor again with slight time delay so that editor loads after dialog.

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);
}

score 1 · Answer 3 · edited May 29 '13 at 16:47

1

You need settimeout when active TinyMCE, because, it need time waiting when dialog init.

for example :

$("#PositionShowDialog").dialog({
modal: true,
open: setTimeout('Change_TextareaToTinyMCE_OnPopup("#elementId");', 1000),
width: width,
......

If tinymce is loaded but you cannot type in it (like disabled) . You need set more time to setTimeout .

Sorry, my english skin not good

edited May 29 '13 at 16:47

VirtualTroll

3,077
1
30
47

answered May 29 '13 at 16:24

Bui Minh Ngoc

11
1

score 1 · Accepted Answer · answered Feb 26 '14 at 00:35

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

score 0 · Answer 5 · edited Aug 28 '15 at 17:23

A small correction from the answer of Nagarjun makes the script work for me :

if ((tinyMCE != undefined) && (tinyMCE.activeEditor != undefined)){  
  tinyMCE.activeEditor.remove();  
  $("#dialogId").dialog('open');  
  setTimeout(function(){  
    tinyMCE.execCommand('mceAddControl', false, 'commentz');  
  },500);  
}

ie : I need to remove tinyMCE before open the dialog and launch the timeout

Can't type in TinyMCE editor within a jQueryUI dialog box in joomla

5 Answers5