Příklady konfigurace

Referenční konfigurace example/tinymce-init.js z balíčku je to, na čem běží živé demo. Vrací objekt, který rozbalíte do 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',
  }),
});

Na Bootstrapu 4 přidejte bootstrapui_version: '4' a do bootstrapPreviewJs dejte pole ['/assets/jquery.min.js', '/assets/bootstrap-4.6.2.bundle.min.js'] (jQuery první), viz Konfigurace.

Tlačítka panelu

Všechna tlačítka mají předponu bootstrapui. Každé tlačítko komponenty existuje i jako položka nabídky se stejným názvem, takže ho můžete dát do menu (třeba pod Vložit) místo do lišty.

Nabídky

Tlačítko	Co dělá
`bootstrapui`	Rozbalovací nabídka Bootstrap se všemi komponentami a nástroji mřížky. Nejrychlejší způsob, jak nabídnout všechno jedním tlačítkem.
`bootstrapuicomponents`	Galerie prvky stránky (Components): každá komponenta jako živý náhled, se skupinami a hledáním.
`bootstrapuistyles`	Utility třídy Bootstrapu, stejné jako skupina Bootstrap v `styles` TinyMCE. Viz Utility.
`bootstrapuitablemenu`	Nabídka Tabulka: nastavení buňky a nástroje TinyMCE pro řádky, sloupce a slučování.

Dialogy komponent

Tlačítko	Vkládá nebo upravuje
`bootstrapuicontainer`	Kontejner (`.container`, `.container-fluid`, `.container-{breakpoint}`)
`bootstrapuibutton`	Tlačítko nebo odkaz ve vzhledu tlačítka
`bootstrapuibuttongroup`	Skupina tlačítek (obyčejná tlačítka nebo přepínače checkbox/radio)
`bootstrapuialert`	Upozornění s volitelným nadpisem a zavíracím tlačítkem
`bootstrapuibadge`	Odznak (badge)
`bootstrapuicard`	Karta se záhlavím, titulkem, obrázkem a patičkou
`bootstrapuilistgroup`	Seznam (list group)
`bootstrapuiprogress`	Ukazatel průběhu
`bootstrapuispinner`	Spinner
`bootstrapuipagination`	Stránkování
`bootstrapuibreadcrumb`	Drobečková navigace
`bootstrapuiaccordion`	Akordeon (jen Bootstrap 5)
`bootstrapuicollapse`	Rozbalovací blok (collapse) se spouštěčem
`bootstrapuidropdown`	Rozbalovací nabídka (dropdown)
`bootstrapuimodal`	Modal se spouštěcím tlačítkem
`bootstrapuioffcanvas`	Offcanvas se spouštěčem (jen Bootstrap 5)
`bootstrapuitoast`	Toast se spouštěcím tlačítkem
`bootstrapuitooltip`	Tooltip na spouštěcím prvku
`bootstrapuipopover`	Popover na spouštěcím prvku
`bootstrapuicarousel`	Karusel
`bootstrapuinav`	Navigace a záložky, s panely
`bootstrapuinavitem`	Nastavení jedné položky navigace
`bootstrapuinavbar`	Navbar
`bootstrapuiscrollspy`	Navigace scrollspy
`bootstrapuitable`	Tabulka s třídami Bootstrapu
`bootstrapuitablecell`	Nastavení buňky, řádku nebo sloupce tabulky
`bootstrapuifigure`	Obrázek s popiskem (figure)
`bootstrapuitypography`	Nadpis, odstavec nebo citace se styly textu Bootstrapu
`bootstrapuiformcontrol`	Formulářový prvek: popisek s polem, výběrem, textovou oblastí nebo zaškrtávátkem
`bootstrapuiratio`	Rámeček s poměrem stran pro vložené video nebo mapu
`bootstrapuiclose`	Zavírací tlačítko
`bootstrapuiclasses`	Vlastní třídy elementu u libovolného prvku

Tlačítka komponent, které zvolená verze Bootstrapu nemá, se vůbec nezaregistrují, takže jedna konfigurace lišty funguje pro obě verze.

Návrhář mřížky

Tlačítko	Co dělá
`bootstrapuilayout`	Vložit rozložení: otevře návrháře mřížky pro nový řádek sloupců.
`bootstrapuirow` / `bootstrapuicolumn`	Přidá řádek pod aktuální / sloupec vpravo.
`bootstrapuieditrow` / `bootstrapuieditcolumn`	Upraví řádek / sloupec pod kurzorem.
`bootstrapuiduplicaterow` / `bootstrapuiduplicatecolumn`	Duplikuje řádek pod aktuální / sloupec vpravo.
`bootstrapuiup` / `bootstrapuidown`	Přesune řádek výše / níže.
`bootstrapuileft` / `bootstrapuiright`	Přesune sloupec vlevo / vpravo.
`bootstrapuiremoverow` / `bootstrapuiremovecolumn`	Odstraní řádek / sloupec (nejdřív se zeptá).
`bootstrapuipath`	Vybrat řádek nebo sloupec: prochází vnořené mřížky.
`bootstrapuistructure`	Zobrazit hranice rozložení v editoru; ukládané HTML se nemění.

Plovoucí lišta

Tyhle plugin ukáže sám, když kliknete do komponenty, řádku nebo sloupce; přidávat je nemusíte. Můžete je ale dát i do vlastní table_toolbar nebo jiných lišt.

Tlačítko	Co dělá
`bootstrapuieditui`	Upravit prvek: otevře dialog vybrané komponenty.
`bootstrapuieditparent`	Upravit nadřazený prvek: komponenta kolem vybrané.
`bootstrapuieditgroup`	Upravit skupinu tlačítek kolem vybraného tlačítka.
`bootstrapuiparagraphbefore` / `bootstrapuiparagraphafter`	Přidá odstavec nad / pod komponentu.
`bootstrapuiblock`	Přepne blok mezi `p` a `div`.
`bootstrapuiremoveelement`	Odstraní vybranou komponentu.
`bootstrapuicarouselprev` / `bootstrapuicarouselnext`	Ukáže k úpravě předchozí / další snímek karuselu.
`bootstrapuinavprev` / `bootstrapuinavnext`	Ukáže k úpravě předchozí / další panel záložek.

Překlep v názvu tlačítka plugin ohlásí v konzoli; TinyMCE by ho tiše zahodilo.

Příkazy

BootstrapUiCard, BootstrapUiModal, … (jeden na komponentu), BootstrapUiInsertLayout, BootstrapUiEditRow, BootstrapUiEditColumn, BootstrapUiEditUiElement, BootstrapUiComponents. Hodí se pro vlastní zkratky: editor.execCommand('BootstrapUiCard').