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?

score 7 · Answer 1 · edited Jan 24 '18 at 13:59

7

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.)

edited Jan 24 '18 at 13:59

danN

26
1
8

answered Jul 17 '13 at 16:42

Bradley Mountford

8,195
4
41
41

I can confirm this works where the _allowInteraction didn't work for me. Thanks alot! – Pascal Cloverfield Sep 30 '14 at 12:46
2

shouldn't it be $(e.target) ... not $(event.target) ... ??? or is "event" defined somewhere else? – MG123 Feb 02 '17 at 04:06

score 0 · Answer 2 · answered Aug 07 '14 at 06:00

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

score -1 · Answer 3 · answered Jul 01 '13 at 15:05

-1

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

answered Jul 01 '13 at 15:05

strikernl

55
5
14

TinyMCE opened in jqueryUI modal dialog

3 Answers3

Linked