Using the TinyMCE .zip package with the Bootstrap framework

Using TinyMCE with bootstrap does not require any special configuration.

The TinyMCE jQuery integration can be used with bootstrap. For information on using the jQuery integration, see: jQuery self-hosted integration.

This procedure creates a basic Bootstrap integration containing a TinyMCE editor.

Setup

In an HTML file, add a source script for Bootstrap JS.

If the project loads Bootstrap from https://www.bootstrapcdn.com/, use the script provided by the Bootstrap CDN, which includes the integrity and crossorigin attributes.
To source an independent deployment of TinyMCE, add the following source script to either the <head> or the end of the <body> of the HTML file, such as:
```
<script src="/path/to/tinymce.min.js"></script>
```
For information on self-hosting TinyMCE, see: Installing TinyMCE.
Add an initialization point for TinyMCE, such as:
```
<div>
  <textarea id="tiny"></textarea>
</div>
```

Add the TinyMCE init script.

<script>
  tinymce.init({
    selector: 'textarea#tiny'
  });
</script>

Using TinyMCE in a Bootstrap dialog

To render TinyMCE instances inside Bootstrap UI dialogs, add the following code:

Bootstrap 4 or below

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

Bootstrap 5 or above

// Prevent Bootstrap dialog from blocking focusin
document.addEventListener('focusin', (e) => {
  if (e.target.closest(".tox-tinymce, .tox-tinymce-aux, .moxman-window, .tam-assetmanager-root") !== null) {
    e.stopImmediatePropagation();
  }
});

This code is required because Bootstrap blocks all focusin calls from elements outside the dialog. For a working example, try this TinyMCE fiddle.