Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

TinyMCE 5.1.1 insert link form fields disabled

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.

like image 546
Gerardo Macari Avatar asked Jun 15 '26 13:06

Gerardo Macari


1 Answers

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

like image 109
Ludo Avatar answered Jun 18 '26 05:06

Ludo



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!