Bootstrap integration

How to override the built-in block on `focusin` in Bootstrap dialogs when using TinyMCE.

TinyMCE Bootstrap integration quick start guide

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 integration

This procedure creates a basic Bootstrap integration containing a TinyMCE editor based on our Basic example.

Procedure

In a 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.
Source TinyMCE from the Tiny Cloud or from a self-hosted location.
- Tiny Cloud
  
  To source TinyMCE from the Tiny Cloud, add the following script element to the <head> of the document:
```
  <script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
```
  Replace no-api-key in the source script (<script src=...) with a Tiny Cloud API key, which is created when signing up to the Tiny Cloud.
  
  Signing up for a Tiny Cloud API key will also provide a trial of the Premium Plugins.
- TinyMCE self-hosted
  
  To use 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-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.

A note about integrations

Important: This Integration is maintained by a third-party developer. Tiny Technologies, Inc. bears no responsibility for this integration, which is not covered by the Tiny Self-Hosted Software License Agreement. For issues related to the integration, contact the third-party project directly.

Was this article helpful? Yes - No

Well, that's awkward . Would you mind opening an issue or helping us out?

Thanks for the feedback!

Can't find what you're looking for? Let us know.

Except as otherwise noted, the content of this page is licensed under the Creative Commons BY-NC-SA 3.0 License, and code samples are licensed under the Apache 2.0 License.