TinyMCE open in jqueryUI modal dialog

Question

When using tinyMCE in the jqueryUI modal dialog box, I cannot use hyperlink functions or "insert image".

Basically, after many searches, I found this:

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

The strange thing is that for me this is less than a problem with minyMCE and a problem with jqueryUI, since there is no problem when the jqueryUI modal property is set to false.

In a richer form, I saw that it happens that whenever tinyMCE loses focus, the first element in the form receives focus, even if it is not focused / pressed.

Are there any JavaScript gurus with any ideas on how I can keep the dialog modal and make tinyMCE work?

Answer 1

This is fixed for me when the _allowInteraction override will not:

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

I can not believe it. I got it from this thread on the TinyMCE forums . (They translated their bugtracker into github. Tinymce / issues / 703 is the corresponding github issue.)

Answer 2

There seems to be no suggestion on this issue yet. This is kind of a hack, but it really worked for me. Each time you open a dialog box, delete the text area and add it as shown below,

 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 be fixed for me, or at least get around it (put it somewhere in your $ (document) .ready ()):

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