Question

Assume that jquery.js, jquery-ui.js, jquery-tinymce.js are already loaded. And tinyMCE object is instantiated.
So here’s script with markup:

<script type="text/javascript">

  $(functon() {

  $("#AddComment").click(function(){

     $("#Dialog").dialog({
        modal :  true,
        show  : "fade",
        hide  : "fade",
        buttons : {
           OK : function(){
              // some ajax requests...
           }

       }
     });

  });

  });

</script>

<div id="Dialog" style="display: none;">
  <textarea id="wysiwyg"></textarea>
</div>


<button id="AddComment">Add comment</button>

But it works as expected without dialog (when textarea (tinymce activeeditor) on page)

By “Does not work” I mean that, when dialog is shown (modal dialog ~modal div) it’s impossible to click on “whitearea” and add|edit|remove content

So the question is: Why doesn’t TinyMCE work within modal div?

Answer 1

I had this problem.

For starters, I strongly recommend you instantiate tinymce after the modal dialog is on screen. I found that tinyMCE would try to take up the “most effective” amount of space on screen so is in effect invisible and/or the whole screen depending on how the modal box is set up.

There is something else though, you might notice that after closing the dialog box, your ability to interact with the page is disabled within the area tinyMCE was present! It is possible that your page is already experiencing this behaviour.

What fixed the problem for me (although not so elegant but, after pulling out my hair) I chose to destroy the dialog box and be sure to hide tinymce after the form had recieved a pass response from the server.

There are two commands to use for this

1. Nuke the dialog box from orbit

   $('#modal-dialog').dialog('destroy');
   

2. Check for presence of tinymce and hide it if found

   if ($(".textarea").length) {
       $('.textarea').tinymce().hide();
   };