TinyMCE opened in jqueryUI modal dialog

Question

When using tinyMCE in a jqueryUI modal dialog, I can't use the hyperlink or 'insert image' features.

Basically, after lots of searching, I've found this:

http://www.tinymce.com/develop/bugtracker_view.php?id=5917

The weird thing is that to me it seams less of a tinyMCE issue and more of a jqueryUI issue since the problem is not present when jqueryUI's modal property is set to false.

With a richer form I saw that what happens is that whenever the tinyMCE loses focus, the first element in the form gets focus even if it's not the one focused / clicked.

Does some JavaScript guru have any idea how I might be able to keep the dialog modal and make tinyMCE work?

Answer 1

This fixed it for me when overriding _allowInteraction would not:

$(document).on('focusin', function(e) {
    if ($(event.target).closest(".mce-window").length) {
        e.stopImmediatePropagation();
    }
});

I can't really take credit for it. I got it from this thread on the TinyMCE forums. (They have moved their bugtracker to github. tinymce/issues/703 is the corresponding github issue.)

Answer 2

It seems there are no propper solution for this issue yet. This is kind of a hack but it really worked for me. Every time you open the Dialog remove the text area and re add it like following,

var myDialog = $('#myDialog');
var myTextarea = myDialog.find('textarea');
var clonedTextArea = myTextarea.clone(); // create a copy before deleting from the DOM
var myTextAreaParent = myTextarea.parent(); // get the parent to add the created copy later

myTextarea.remove(); // remove the textarea

myDialog.find('.mce-container').remove(); // remove existing mce control if exists

myTextAreaParent.append(clonedTextArea); // re-add the copy

myDialog.dialog({
   open: function(e1,e2){
        setTimeout(function () {
             // Add your tinymce creation code here
       },50);
   }
});

myDialog.dialog('open');

Answer 3

This seems to fix it for me, or at least work around it (put it somewhere in your $(document).ready()):

$.widget('ui.dialog', $.ui.dialog, {
    _allowInteraction: function(event) {
        return ($('.mce-panel:visible').length > 0);
    }
});