Bootstrap UI Plugin for TinyMCE 6-8

Insert real Bootstrap components inside TinyMCE — and skip the cleanup afterwards.

Bootstrap UI adds 29 component dialogs to the TinyMCE rich-text editor. Each dialog has a live preview rendered with your own Bootstrap stylesheet and a panel showing the exact HTML that will be inserted. What lands in your content is plain Bootstrap markup: no metadata, no wrapper classes, no shortcodes and no runtime licence check. Open the same component again and the dialog reads your HTML back, so editing continues where authoring started.

Why this plugin

• TinyMCE 6, 7 and 8. Verified by click-through in a real browser on 6.8, 7.9 and 8.9 — the same build that ships in the package.
• Bootstrap 5.3 and Bootstrap 4.6. One option switches the series; the dialogs use the class names that series has.
• English interface plus 8 translations (Czech, Slovak, German, French, Spanish, Italian, Polish, Brazilian Portuguese), using TinyMCE's own translation system.
• A live preview in every dialog, rendered with your Bootstrap stylesheet — what you see is what the website shows.
• A grid designer with breakpoint preview, drag-and-drop column order and per-breakpoint width, offset, order and alignment.
• No lock-in. Remove the plugin and the content stays valid Bootstrap HTML.

The 29 components

Button, alert, badge, card, list group, progress, accordion, spinner, button group, pagination, breadcrumb, toast, modal, offcanvas, tooltip, popover, dropdown, collapse, carousel, navs and tabs, navbar, scrollspy, table, figure, typography, form control, placeholder, ratio and close button — plus container settings, custom classes on any element, table cell settings and nav item settings.

Built for content editors, not just developers

• Click any inserted component and a context toolbar offers Edit element, Edit parent element, a paragraph above or below, and Remove.
• Components that are invisible on the page — modal, offcanvas, toast — are drawn framed and labelled in the editing area, so nobody edits blindly.
• A shared Utilities section maps spacing, sizing, display, flexbox, colours, borders and typography to Bootstrap classes. The plugin never writes inline styles.
• The component gallery shows every component as a live preview, filtered by group or search.

What is in the package

• The plugin as a drop-in folder for tinymce/plugins/, plus a readable, unminified ES module build for bundlers.
• The full manual as an offline HTML document.
• A reference tinymce.init() configuration.
• Translation files for 8 languages and a template for your own.

TinyMCE and Bootstrap are not included — the plugin works with the copies you already use.

Features

• 29 Bootstrap component dialogs with a live preview
• Works with TinyMCE 6, 7 and 8
• Supports Bootstrap 5.3 and Bootstrap 4.6
• Edits existing Bootstrap HTML — the dialog reads your markup back
• Grid designer with breakpoint preview and drag-and-drop column order
• Context toolbar: edit element, edit parent, paragraph above/below, remove
• Hidden components (modal, offcanvas, toast) drawn framed in the editor
• Utilities panel for spacing, sizing, display, flexbox, colours, borders, typography
• Component gallery with search and groups
• Plain Bootstrap output — no shortcodes, wrappers or inline styles
• English interface plus 8 translations
• No runtime licence check — works offline and on intranets
• Readable, unminified ES module build included
• Full offline HTML manual

Requirements

• TinyMCE 6, 7 or 8 (verified on 6.8, 7.9 and 8.9) — not included
• A Bootstrap 5.3 or 4.6 stylesheet on your side — not included
• With Bootstrap 4, jQuery for the interactive components' previews (the Bootstrap 4 bundle does not contain it)
• A current browser (Chrome, Edge, Firefox, Safari)

Instructions

1. Unzip the package and copy plugin/bootstrapui into your tinymce/plugins/ folder (or import plugin/plugin.esm.js in your bundler).
2. Add bootstrapui to the plugins option of tinymce.init().
3. Set the required option bootstrapui_css to the URL of your Bootstrap stylesheet. Optionally set bootstrapui_js to the Bootstrap JavaScript bundle so interactive components work in the previews.
4. For Bootstrap 4, also set bootstrapui_version: '4' and pass jQuery before the Bootstrap bundle in bootstrapui_js.
5. Add the menu items or toolbar buttons you want (see example/tinymce-init.js for a complete reference configuration).
6. The full manual is in documentation/index.html.