Live demoDocumentationBuyContact

Configuration examples

The reference configuration example/tinymce-init.js in the package is what the live demo runs. It returns a plain object you spread into tinymce.init:

import { bootstrapuiEditorConfig } from './example/tinymce-init.js';

tinymce.init({
  selector: '#content',
  ...bootstrapuiEditorConfig({
    bootstrapPreviewCss: '/assets/bootstrap.min.css',
    bootstrapPreviewJs: '/assets/bootstrap.bundle.min.js',
  }),
});

On Bootstrap 4 add bootstrapui_version: '4' and pass the array ['/assets/jquery.min.js', '/assets/bootstrap-4.6.2.bundle.min.js'] as bootstrapPreviewJs (jQuery first), see Configuration.

Toolbar buttons

All buttons are prefixed bootstrapui. Each component button also exists as a menu item with the same name, so you can put it in menu (for example under Insert) instead of the toolbar.

Button What it does
bootstrapui Bootstrap drop-down with every component and grid tool. The quickest way to offer everything with one button.
bootstrapuicomponents Components gallery: every component as a live preview, with groups and search.
bootstrapuistyles Bootstrap utility classes, the same as the Bootstrap group in TinyMCE’s styles. See Utilities.
bootstrapuitablemenu Table menu: table cell settings and TinyMCE’s row, column and merge tools.

Component dialogs

Button Inserts or edits
bootstrapuicontainer Container (.container, .container-fluid, .container-{breakpoint})
bootstrapuibutton Button or link styled as a button
bootstrapuibuttongroup Button group (plain buttons or checkbox/radio toggles)
bootstrapuialert Alert with optional heading and close button
bootstrapuibadge Badge
bootstrapuicard Card with header, title, image and footer
bootstrapuilistgroup List group
bootstrapuiprogress Progress bar
bootstrapuispinner Spinner
bootstrapuipagination Pagination
bootstrapuibreadcrumb Breadcrumb
bootstrapuiaccordion Accordion (Bootstrap 5 only)
bootstrapuicollapse Collapse with its trigger
bootstrapuidropdown Dropdown
bootstrapuimodal Modal with its trigger button
bootstrapuioffcanvas Offcanvas with its trigger (Bootstrap 5 only)
bootstrapuitoast Toast with its trigger button
bootstrapuitooltip Tooltip on a trigger element
bootstrapuipopover Popover on a trigger element
bootstrapuicarousel Carousel
bootstrapuinav Navs and tabs, with tab panes
bootstrapuinavitem Settings of one nav item
bootstrapuinavbar Navbar
bootstrapuiscrollspy Scrollspy navigation
bootstrapuitable Table with Bootstrap classes
bootstrapuitablecell Settings of a table cell, row or column
bootstrapuifigure Figure with image and caption
bootstrapuitypography Heading, paragraph or blockquote with Bootstrap text styles
bootstrapuiformcontrol Form control: label with input, select, textarea or checkbox
bootstrapuiplaceholder Placeholder (Bootstrap 5 only)
bootstrapuiratio Ratio frame for video or map embeds
bootstrapuiclose Close button
bootstrapuiclasses Custom classes on any element

Buttons of components that the selected Bootstrap version does not have are not registered at all, so one toolbar configuration works for both versions.

Grid designer

Button What it does
bootstrapuilayout Insert layout: opens the grid designer for a new row of columns.
bootstrapuirow / bootstrapuicolumn Add a row below / a column to the right.
bootstrapuieditrow / bootstrapuieditcolumn Edit the row / column under the cursor.
bootstrapuiduplicaterow / bootstrapuiduplicatecolumn Duplicate the row below / the column to the right.
bootstrapuiup / bootstrapuidown Move the row up / down.
bootstrapuileft / bootstrapuiright Move the column left / right.
bootstrapuiremoverow / bootstrapuiremovecolumn Remove the row / column (asks first).
bootstrapuipath Select row or column: walks up nested grids.
bootstrapuistructure Show layout outlines in the editing area; the saved HTML does not change.

Context toolbar

The plugin shows these by itself when you click into a component, a row or a column; you do not need to add them. You can also put them in your own table_toolbar or other toolbars.

Button What it does
bootstrapuieditui Edit element: opens the dialog of the selected component.
bootstrapuieditparent Edit parent element: the component around the selected one.
bootstrapuieditgroup Edit button group around the selected button.
bootstrapuiparagraphbefore / bootstrapuiparagraphafter Add a paragraph above / below the component.
bootstrapuiblock Switch the block between p and div.
bootstrapuiremoveelement Remove the selected component.
bootstrapuicarouselprev / bootstrapuicarouselnext Show the previous / next carousel slide for editing.
bootstrapuinavprev / bootstrapuinavnext Show the previous / next tab pane for editing.

A misspelled button name is reported in the console; TinyMCE itself would silently drop it.

Commands

BootstrapUiCard, BootstrapUiModal, … (one per component), BootstrapUiInsertLayout, BootstrapUiEditRow, BootstrapUiEditColumn, BootstrapUiEditUiElement, BootstrapUiComponents. Use them for your own shortcuts: editor.execCommand('BootstrapUiCard').