Živé demo

Verze TinyMCE

Jazyk rozhraní

Načítám editor…

Vyzkoušejte lištu „Bootstrap“, plovoucí lišty a dialogy komponent s živým náhledem.

Bootstrap 5.3. Demo používá Bootstrap 5.3. Nastavení pro Bootstrap 4 (bootstrapui_version: '4') najdete v dokumentaci.

<h2>Bootstrap UI for TinyMCE</h2>
<p class="lead">Klikněte na kteroukoli část níže a upravte ji, nebo vložte novou komponentu z lišty „Bootstrap“.</p>
<div class="row g-4">
<div class="col-md-4">
<div class="card"><img class="card-img-top" src="/img/demo/team.jpg" alt="Tým u notebooků">
<div class="card-body">
<h5 class="card-title">Karta s obrázkem</h5>
<p class="card-text">Klikněte do karty a v plovoucí liště zvolte „Upravit nadřazený prvek“. V dialogu můžete změnit nadpis, obrázek i barvy.</p>
<a class="btn btn-primary" href="#">Tlačítko</a></div>
</div>
</div>
<div class="col-md-4">
<div class="alert alert-success" role="alert"><strong>Tip:</strong> nástroje rozložení v liště umožňují přidat nebo přesunout sloupec. Vyzkoušejte je na tomto řádku.</div>
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">Dialogy komponent <span class="badge text-bg-primary rounded-pill">29</span></li>
<li class="list-group-item d-flex justify-content-between align-items-center">Verze TinyMCE <span class="badge text-bg-primary rounded-pill">3</span></li>
<li class="list-group-item d-flex justify-content-between align-items-center">Bootstrap <span class="badge text-bg-success rounded-pill">5.3 · 4.6</span></li>
</ul>
</div>
<div class="col-md-4">
<div class="accordion" id="demo-faq">
<div class="accordion-item">
<h2 class="accordion-header"><button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#demo-faq-1" aria-expanded="true" aria-controls="demo-faq-1">Co se uloží do obsahu?</button></h2>
<div id="demo-faq-1" class="accordion-collapse collapse show" data-bs-parent="#demo-faq">
<div class="accordion-body">Standardní HTML Bootstrapu bez vlastních obalových značek a metadat editoru.</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header"><button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#demo-faq-2" aria-expanded="false" aria-controls="demo-faq-2">Jak upravím tento akordeon?</button></h2>
<div id="demo-faq-2" class="accordion-collapse collapse" data-bs-parent="#demo-faq">
<div class="accordion-body">Klikněte do akordeonu a zvolte „Upravit prvek“. V dialogu přidáte položky, změníte jejich pořadí nebo nastavíte chování.</div>
</div>
</div>
</div>
</div>
</div>
<p>Pod rozložením můžete dál psát běžný text.</p>

Výsledek

Náhled ukazuje obsah editoru na stránce s Bootstrapem. Akordeony, dialogová okna i karusely si tu můžete vyzkoušet. Po každé úpravě se náhled automaticky obnoví.