TinyMCE 5.1.1 insert link form fields disabled

Question

My problem is exactly the same as found in this post:

TinyMCE 4 insert link form fields disabled

The only difference is that I am using tinyMCE version 5.1.1 and using jquery mobile. Basically I have initialized tinyMCE in a jquery mobile popup (see image link) and when I click on the icon to insert a link, none of the fields except the target are available for editing.
I have tried the code found in the previous post (tweaking it a little bit to target the tinyMCE css classes): This is what I have already tried:

                $(document).on('focusin', function(e) {
                if ($(e.target).closest(".tox-editor-container").length) {
                   console.log("e.stopImmediatePropagation()");
                   e.stopImmediatePropagation();
                   }
                });

"e.stopImmediatePropagation()" is printed in the console but none of the fields except the target are available for editing.

Not sure if it's relevant to jquery mobile, but in my case I was using Vuetify and the issue was resolvable by either editing focusin (like you tried here) or changing the z-index of Vuetify's dialog (https://stackoverflow.com/q/55780976). Maybe the issue can be resolved by playing with the jquery mobile popup's z-index? — Chris, Nov 29 '20 at 14:49

score 1 · Answer 1 · answered Jan 20 '21 at 01:22

If it is a problem linked to bootstrap, the solution is:

// Prevent Bootstrap dialog from blocking focusin
$(document).on('focusin', function(e) {
   if ($(e.target).closest(".tox-tinymce, .tox-tinymce-aux, .moxman-window, .tam-assetmanager-root").length) {
      e.stopImmediatePropagation();
   }
});

From: https://www.tiny.cloud/docs/integrations/bootstrap/#usingtinymceinabootstrapdialog

TinyMCE 5.1.1 insert link form fields disabled

1 Answers1