Rychlý start

1. Zkopírujte plugin

Složku plugin/bootstrapui/ z balíčku nakopírujte do složky plugins/ vašeho TinyMCE, takže vznikne:

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

TinyMCE pak plugin najde podle jména. Když TinyMCE načítáte z CDN nebo Tiny Cloudu, dejte složku kamkoli na svůj server a podívejte se níž na TinyMCE z CDN nebo Tiny Cloudu.

2. Vložte init

Tohle je úplná konfigurace se všemi tlačítky, položkami nabídek a plovoucími lištami; stejná běží v živém demu. Změňte jen selector a dvě cesty k souborům Bootstrapu:

<script src="/tinymce/tinymce.min.js"></script>
<script>
tinymce.init({
  selector: '#content',                       // váš <textarea>
  license_key: 'gpl',                         // TinyMCE 7 a 8 na vlastním serveru (nebo váš komerční klíč); TinyMCE 6 ho ignoruje

  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 určuje velikost tabulek třídami, ne inline width/height
  contextmenu: 'link table bootstrapuilayout',

  content_css: ['default', '/assets/bootstrap.min.css'],   // Bootstrap v editační ploše
  bootstrapui_css: '/assets/bootstrap.min.css',            // POVINNÉ: Bootstrap pro náhledy v dialozích
  bootstrapui_js: '/assets/bootstrap.bundle.min.js',       // nepovinné: „Přehrát / otevřít“ v náhledech
});
</script>

Otevřete stránku a editor funguje. Klikněte na prvky stránky (Components) a uvidíte vše, co plugin umí vložit, nebo pokračujte Základním použitím.

Plugin nikdy nenačítá Bootstrap sám. Když chybí bootstrapui_css, funguje dál, ale řekne to v editoru, v konzoli i v každém náhledu. bootstrapui_css a bootstrapui_js ovlivňují jen náhledy v dialozích; na zveřejněné stránce dodává Bootstrap váš web.

3. Co se liší podle verzí

TinyMCE z CDN nebo Tiny Cloudu

TinyMCE hledá pluginy vedle sebe, a to v tomhle případě není váš server. Dejte plugin/bootstrapui/ kamkoli na svůj server a přidejte (bootstrapui v plugins nechte):

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

Bootstrap 4.6

Tři řádky s Bootstrapem nahraďte těmito:

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 musí být první: bundle Bootstrapu 4 obsahuje Popper, ale ne jQuery, a náhled je izolovaný iframe, takže jQuery z vaší stránky v něm není. Tlačítka komponent, které Bootstrap 4 nemá (akordeon, offcanvas, placeholder), z lišty zmizí sama, zbytek initu zůstává stejný. Podrobnosti jsou v Konfiguraci.

Bundler (webpack, Vite)

Místo kopírování složky naimportujte ES modul z balíčku (cestu upravte podle toho, kde ho máte) a použijte stejný tinymce.init:

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

4. Méně tlačítek

Všechna nepotřebujete. Nejmenší užitečná lišta je rozbalovací nabídka Bootstrap, která obsahuje všechny komponenty i nástroje mřížky:

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

Co které tlačítko dělá, najdete v Příkladech konfigurace. Soubor example/tinymce-init.js v balíčku obsahuje stejnou konfiguraci jako výše, s komentářem u každé volby.