Live demo

TinyMCE version

UI language

Loading the editor…

Try the Bootstrap toolbar, context toolbars and component dialogs with live preview.

Bootstrap 5.3. The demo uses Bootstrap 5.3. See the documentation for Bootstrap 4 settings (bootstrapui_version: '4').

<h2>Bootstrap UI for TinyMCE</h2>
<p class="lead">Click any part below and edit it, or insert a new component from the “Bootstrap” toolbar.</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="A team working on laptops">
<div class="card-body">
<h5 class="card-title">Card with an image</h5>
<p class="card-text">Click inside the card and choose “Edit parent element” in the context toolbar. You can change the title, image and colours in the dialog.</p>
<a class="btn btn-primary" href="#">Button</a></div>
</div>
</div>
<div class="col-md-4">
<div class="alert alert-success" role="alert"><strong>Tip:</strong> use the layout tools in the toolbar to add or move a column. Try them on this row.</div>
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">Component dialogs <span class="badge text-bg-primary rounded-pill">29</span></li>
<li class="list-group-item d-flex justify-content-between align-items-center">TinyMCE versions <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">What gets saved?</button></h2>
<div id="demo-faq-1" class="accordion-collapse collapse show" data-bs-parent="#demo-faq">
<div class="accordion-body">Standard Bootstrap HTML without custom wrapper tags or editor metadata.</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">How do I edit this accordion?</button></h2>
<div id="demo-faq-2" class="accordion-collapse collapse" data-bs-parent="#demo-faq">
<div class="accordion-body">Click inside the accordion and choose “Edit element”. In the dialog, you can add items, change their order or adjust the behaviour.</div>
</div>
</div>
</div>
</div>
</div>
<p>Below the layout you can keep writing ordinary text.</p>

Result

The preview shows the editor content on a Bootstrap page. Try the accordions, modals and carousels here. The preview updates automatically after each edit.