TinyMCE and Bootstrap Modals -- Works only one time
Following the official TinyMCE advice / Sarath Ak's answer above doesn't seem to work for the combination of Bootstrap 4 and TinyMCE 5. One minor change is required to make this solution work again: you will need to change the jQuery closest()
lookup to select .tox
instead of .mce-window
.
$(document).on('focusin', function(e) {
if ($(e.target).closest(".tox").length) {
e.stopImmediatePropagation();
}
});
you can try this
// Prevent Bootstrap dialog from blocking focusin
$(document).on('focusin', function(e) {
if ($(e.target).closest(".mce-window").length) {
e.stopImmediatePropagation();
}
});
https://www.tinymce.com/docs/integrations/bootstrap/
I found that using the below when the modal is closed works perfectly fine:
$('#modalOne').on('hide.bs.modal', function () {
tinyMCE.editors=[];
});
The solution didn't work for me with TinyMCE 5 and Bootstrap 4. In the end I followed Abdur's link and had to use the remove method.
$('#modalOne').on('hide.bs.modal', function () {
// scope the selector to the modal so you remove any editor on the page underneath.
tinymce.remove('#modalOne textarea');
});