Quick start

1. Copy the plugin

Copy the folder plugin/bootstrapui/ from the package into the plugins/ folder of your TinyMCE, so that you have:

tinymce/
├── tinymce.min.js
└── plugins/
    └── bootstrapui/
        ├── plugin.min.js
        └── langs/

TinyMCE then finds the plugin by its name. If TinyMCE comes from a CDN or Tiny Cloud, put the folder anywhere on your server instead and see TinyMCE from a CDN or Tiny Cloud below.

2. Paste the init

This is the complete configuration with every button, menu item and context toolbar; the live demo runs the same. Change the selector and the two paths to your Bootstrap files, nothing else:

<script src="/tinymce/tinymce.min.js"></script>
<script>
tinymce.init({
  selector: '#content',                       // your <textarea>
  license_key: 'gpl',                         // TinyMCE 7 and 8 self-hosted (or your commercial key); TinyMCE 6 ignores it

  plugins: 'lists link table quickbars code bootstrapui',
  menubar: 'file edit view insert format table help',
  menu: {
    insert: {
      title: 'Insert',
      items: 'bootstrapuicontainer bootstrapuilayout bootstrapuibutton bootstrapuialert bootstrapuibadge bootstrapuicard bootstrapuilistgroup bootstrapuiprogress bootstrapuiaccordion bootstrapuispinner bootstrapuibuttongroup bootstrapuipagination bootstrapuibreadcrumb bootstrapuidropdown bootstrapuicollapse bootstrapuicarousel bootstrapuinav bootstrapuinavbar bootstrapuiscrollspy bootstrapuitable bootstrapuiclose bootstrapuicomponents bootstrapuiclasses | link inserttable | hr',
    },
  },
  toolbar: [
    'undo redo | styles | bold italic underline | alignleft aligncenter alignright | bullist numlist | link table tablemergecells tablesplitcells | code',
    'bootstrapui | bootstrapuicontainer bootstrapuibutton bootstrapuicomponents bootstrapuiclasses bootstrapuistyles | bootstrapuilayout bootstrapuirow bootstrapuicolumn | bootstrapuieditrow bootstrapuieditcolumn bootstrapuiduplicaterow bootstrapuiduplicatecolumn | bootstrapuileft bootstrapuiright bootstrapuiremovecolumn bootstrapuiremoverow bootstrapuipath bootstrapuistructure',
    'bootstrapuibutton bootstrapuibadge bootstrapuialert bootstrapuicard bootstrapuilistgroup bootstrapuitable bootstrapuifigure bootstrapuitypography bootstrapuiformcontrol bootstrapuiplaceholder bootstrapuiprogress bootstrapuispinner bootstrapuiclose | bootstrapuibuttongroup bootstrapuipagination bootstrapuibreadcrumb bootstrapuinav bootstrapuinavbar bootstrapuiscrollspy | bootstrapuiaccordion bootstrapuicollapse bootstrapuidropdown bootstrapuicarousel | bootstrapuitoast bootstrapuimodal bootstrapuioffcanvas bootstrapuitooltip bootstrapuipopover',
  ],
  quickbars_selection_toolbar: 'bold italic underline | quicklink blockquote | bootstrapuitypography | bootstrapuitablemenu tablemergecells tablesplitcells',
  quickbars_insert_toolbar: 'bootstrapuilayout quicktable | hr',
  table_toolbar: 'bootstrapuieditui bootstrapuitablecell bootstrapuitablemenu | tableinsertrowbefore tableinsertrowafter tabledeleterow | tableinsertcolbefore tableinsertcolafter tabledeletecol | tablemergecells tablesplitcells',
  table_resize_bars: false,                   // Bootstrap sizes tables with classes, not inline width/height
  contextmenu: 'link table bootstrapuilayout',

  content_css: ['default', '/assets/bootstrap.min.css'],   // Bootstrap in the editing area
  bootstrapui_css: '/assets/bootstrap.min.css',            // REQUIRED: Bootstrap for the dialog previews
  bootstrapui_js: '/assets/bootstrap.bundle.min.js',       // optional: "Play / open" in the previews
});
</script>

Open the page and you have a working editor. Click Components to see everything the plugin can insert, or follow Basic usage.

The plugin never loads Bootstrap on its own. If bootstrapui_css is missing it keeps working but tells you so in the editor, in the console and in every preview. bootstrapui_css and bootstrapui_js affect only the previews in dialogs; on the published page your website provides Bootstrap itself.

3. What differs between versions

TinyMCE from a CDN or Tiny Cloud

TinyMCE looks for plugins next to itself, which is not your server in this case. Put plugin/bootstrapui/ anywhere on your server and add (keep bootstrapui in plugins):

external_plugins: { bootstrapui: '/js/bootstrapui/plugin.min.js' },

Bootstrap 4.6

Replace the three Bootstrap lines with:

content_css: ['default', '/assets/bootstrap-4.6.2.min.css'],
bootstrapui_version: '4',
bootstrapui_css: '/assets/bootstrap-4.6.2.min.css',
bootstrapui_js: ['/assets/jquery.min.js', '/assets/bootstrap-4.6.2.bundle.min.js'],

jQuery must come first: the Bootstrap 4 bundle includes Popper but not jQuery, and the preview is an isolated iframe, so the jQuery from your page is not available in it. Buttons of components that Bootstrap 4 does not have (accordion, offcanvas, placeholder) disappear from the toolbar by themselves, so the rest of the init stays the same. Details are in Configuration.

Bundler (webpack, Vite)

Import the ES module from the package instead of copying the folder (adjust the path to where you keep it), then use the same tinymce.init:

import tinymce from 'tinymce';
import registerBootstrapUi from './vendor/bootstrapui/plugin.esm.js';
registerBootstrapUi(tinymce);

4. Fewer buttons

You do not need all of them. The smallest useful toolbar is the Bootstrap drop-down, which contains every component and grid tool:

plugins: 'lists table quickbars bootstrapui',
toolbar: 'undo redo | styles | bold italic | bootstrapui bootstrapuicomponents',

What each button does is listed in Configuration examples. The file example/tinymce-init.js in the package contains the same configuration as above, with a comment on every option.