---
title: "Using the TinyMCE .zip package with the Bootstrap framework"
description: "A guide on integrating a .zip version of TinyMCE into the Bootstrap framework."
canonical_url: "https://www.tiny.cloud/docs/tinymce/latest/bootstrap-zip/"
md_url: "https://www.tiny.cloud/docs/tinymce/latest/bootstrap-zip/index.md"
version: "latest"
last_updated: "2026-09-28T23:15:30Z"
tokens: 601
---
# 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](../jquery-pm/).
This procedure creates a basic Bootstrap integration containing a TinyMCE editor.
## Setup
1. In an HTML file, add a source script for Bootstrap JS.
If the project loads Bootstrap from [https://www.bootstrapcdn.com/](https://www.bootstrapcdn.com/), use the script provided by the [Bootstrap CDN](https://www.bootstrapcdn.com/), which includes the `integrity` and `crossorigin` attributes.
2. To source an independent deployment of TinyMCE, add the following source script to either the `` or the end of the `` of the HTML file, such as:
```html
```
For information on self-hosting TinyMCE, see: [Installing TinyMCE](../installation/).
3. Add an initialization point for TinyMCE, such as:
```html
```
4. Add the TinyMCE init script.
```html
```
> **Note:** The `gpl` license key is for self-hosting TinyMCE under the GNU General Public License (GPL). To use a commercial license, or to include premium plugins, replace `gpl` with a valid license key. For details, see [Setting the license](../license-key/#setting-the-license).
## Using TinyMCE in a Bootstrap dialog
To render TinyMCE instances inside Bootstrap UI dialogs, add the following code:
**Bootstrap 4 or below**
```js
// 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**
```js
// 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](http://fiddle.tiny.cloud/gRgaab).