[Solved]: TinyMCE not working well in Bootstrap modal
Bootstrap modal is a dialog box or a popup window that is displayed on top of the current page, blurring the rest of the page.
Modals are used to instantly capture the user's attention and invite their interaction with the web page by performing a specific action.
It's a common practice to have forms within a modal. If you have a form with a TinyMCE editor in a Bootstrap modal, you will most probably experience some issues with some of its features.
Viewing the content source code (View > Source code), inserting/editing a link, and inserting/editing an image on the TinyMCE editor are designed to open up new dialog boxes with input fields.
With TinyMCE editor in a Bootstrap modal, the fields in those dialog boxes are not writable so it becomes impossible to insert links and images in the content or to edit the content source code.
If you are experiencing these or other problems with the TinyMCE editor in a Bootstrap modal, the solutions in this article will help you solve them.
Fixing TinyMCE issues inside a Bootstrap modal
If you are using TinyMCE 6 and Bootstrap 5, add the Javascript code below to your page and that should work.
<script>
document.addEventListener('focusin', (e) => {
if (e.target.closest(".tox-tinymce-aux, .moxman-window, .tam-assetmanager-root") !== null) {
e.stopImmediatePropagation();
}
});
</script>
If you are using TinyMCE 5 or 6 on Bootstrap 3 or 4. You can add the code as below in jQuery and it will solve this problem for you.
<script>
$(function() {
$(document).on('focusin', function(e) {
if (e.target.closest(".tox-tinymce-aux, .moxman-window, .tam-assetmanager-root") !== null) {
e.stopImmediatePropagation();
}
});
});
</script>
If you are using TinyMCE 4 on Bootstrap 3 or 4, then the jQuery code below should fix the problem.
<script>
$(function() {
$(document).on('focusin', function(e) {
if ($(e.target).closest(".mce-window").length) {
e.stopImmediatePropagation();
}
});
});
</script>
Below is an example of the TinyMCE editor on a Bootstrap modal with the problem fixed. Launch the modal by clicking on the button below. Then open the source code option by navigating View > Source code or you can click on the ... button on the toolbar and open the link or image option.
You will note that the input fields in all these dialog boxes that open will be writable.
That's it!
By following this article, you will be able to fix your problems with the TinyMCE editor on Bootstrap modals. It's my hope that this article has helped you.
