Using OpenTiny from the Tiny Cloud CDN 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 Tiny Cloud integration.

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

Setup

  1. 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.

  2. To source OpenTiny 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/6/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.

  3. Add an initialization point for OpenTiny, such as:

    <div>
      <textarea id="tiny"></textarea>
    </div>
  4. 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.