Using the OpenTiny .zip package with the Bootstrap framework

Using OpenTiny with bootstrap does not require any special configuration.

The OpenTiny 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 OpenTiny 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 OpenTiny, 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 OpenTiny, see: Installing OpenTiny.
Add an initialization point for OpenTiny, such as:
```
<div>
  <textarea id="tiny"></textarea>
</div>
```

Add the OpenTiny init script.

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

Using OpenTiny in a Bootstrap dialog

To render OpenTiny 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 OpenTiny fiddle.