CODEWITHSUNDEEP
jqueryjquery-uitinymce
Yang
Yang

Reputation: 8711

TinyMCE doesn't work within jquery ui modal dialog, why?

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?

Upvotes: 4

Views: 3421

Answers (2)

rweavere
rweavere

Reputation: 350

Based on Symbal's response, this is the solution that worked for me. Whenver you open the dialog, first check to see if tinymce is set on your text area, if it is remove it, then apply tinymce to the text area.

$("#Dialog").dialog({             
    open: function(){
        if($('#wysiwyg').tinymce() != undefined)
        {
            $('#wysiwyg').tinymce().remove();
        }
        $("#wysiwyg").tinymce({
            // Location of TinyMCE script
            script_url: "/js/tiny_mce/tiny_mce.js"
        });
    }
});

I'm using tinymce version 3.

Upvotes: 1

Symbal
Symbal

Reputation: 370

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

Upvotes: 5

Related Questions