Configuration
| Option | Type | Required | Description |
|---|---|---|---|
bootstrapui_css |
string or string[] | yes | URL of Bootstrap CSS used in dialog previews. An array lets you add your own theme after Bootstrap. Without it the plugin still runs, but reports the missing option in the editor, in the console and in every preview. |
bootstrapui_js |
string or string[] | no | URL of bootstrap.bundle.min.js, or an array of URLs; the scripts are added to the preview in the order given. Needed only for Play / open in the previews of interactive components. With Bootstrap 4, put jQuery before the bundle, see below. |
bootstrapui_image_picker |
(callback, editor) => void |
no | Your file manager. Called from the Card and Figure dialogs; call callback(url) with the chosen image. |
bootstrapui_version |
'5' or '4' |
no | Bootstrap series used on your website. Defaults to 5. With 4 the dialogs use Bootstrap 4 class names and data attributes (data-toggle instead of data-bs-toggle) and hide what that series does not have, see Bootstrap 4. The plugin reports an unknown value. |
bootstrapui_grid_defaults |
object | no | Column classes the grid designer applies for each column count, e.g. { 4: 'col-12 col-sm-6 col-xl-3' }. Counts you leave out use the built-in set (for example 4 → col-12 col-md-6 col-lg-3). |
bootstrapui_styles |
boolean or object | no | Bootstrap classes in TinyMCE’s Styles menu and the bootstrapuistyles button. Defaults to true; false turns it off; an object { groups, breakpoints, title } narrows it down, see Styles menu. |
language |
string | no | Standard TinyMCE option. English and Czech (cs) are built in; Slovak, German, Spanish, French, Brazilian Portuguese, Italian and Polish (sk, de, es, fr, pt_BR, it, pl) load from langs/. See Translation. |
Options of TinyMCE the plugin relies on
| Option | Why |
|---|---|
content_css |
Put your Bootstrap CSS here too, otherwise the editing area looks different from the preview. |
plugins: 'table' |
The Bootstrap table dialog defers to TinyMCE’s table toolbar for rows, columns and merging. |
table_toolbar |
Add bootstrapuieditui bootstrapuitablecell bootstrapuitablemenu so the Bootstrap table settings are reachable from the table’s floating toolbar. |
table_resize_bars: false |
Resize handles write inline width/height, which can limit the table’s responsive behaviour. |
toolbar with styles |
TinyMCE’s Styles drop-down shows the Bootstrap group (or add the bootstrapuistyles button). |
plugins: 'quickbars' + quickbars_selection_toolbar |
Add bootstrapuitypography so text settings are one click from the selection. |
Bootstrap 4 and jQuery in the preview
The preview in a dialog runs in an isolated iframe, so the jQuery from your page is not available in it. The JavaScript of Bootstrap 4 needs jQuery, and its bootstrap.bundle includes Popper, but not jQuery. Put jQuery first in bootstrapui_js:
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'],Use a jQuery version your Bootstrap 4 supports: Bootstrap 4.6 requires jQuery from 1.9.1 up to and including 3.x. You choose the URLs; the plugin never loads anything from a CDN. If the Bootstrap JavaScript does not start in the preview, the preview says so at the top (with a pointer to jQuery on Bootstrap 4) and Play / open does not work.
This option affects only the previews in dialogs. On the published page your website provides Bootstrap JavaScript (and jQuery on Bootstrap 4) itself; the plugin does not add them there.
Version check
After initialisation the plugin reads the first bytes of bootstrapui_css and compares the Bootstrap version found there with bootstrapui_version. A mismatch is reported as a warning in the editor. The check fails silently on file:// URLs or when CORS blocks the request.