Bootstrap plugin for TinyMCE Text Editor

Bootstrap 4 components for TinyMCE

Bootstrap is the undisputed leader among the available front-end frameworks today.

https://www.sitepoint.com/most-popular-frontend-frameworks-compared/

TinyMCE is the world's #1 JavaScript library for rich text editing.

https://github.com/tinymce/tinymce

Bootstrap plugin for TinyMCE
allows you to use all the components and CSS of Bootstrap 4 in your text editor.

Read more Live Demo

Turn TinyMCE into a true Bootstrap 4 content editor

The plugin adds to TinyMCE user interface:

  • A Bootstrap 4 toolbar

    Bootstrap plugin for TinyMCE toolbar
    The Bootstrap 4 toolbar

    The Bootstrap 4 toolbar allows to add / edit the Bootstrap elements and code snippets:
    Button, Icon, Image, Table, Template, Breadcrumb, Pagination, Badge, Alert, Card, Snippet

  • a Custom Styles dropdown menu

    Custom Styles dropdown menu
    The Custom Styles dropdown menu

    The Custom Styles dropdown allows to add / remove Boostrap 4 CSS classes.
    Margin, Padding, Color, Background, Border for Text, Blocks & Containers are available from the dropdown menu.

    All the Bootstrap 4 utilities CSS classes are available straight from the TinyMCE Custom Styles dropdown.
    The plugin options allow to enable or disable each type of class and responsive breakpoints according to your needs.

  • Live Template editing capabilities

    The Live Template edition tool
    The Live Template edition tool

    The Live Template edition tool allows to

    • Add / remove Bootstrap rows and columns inside the current container
    • Add / remove Bootstrap columns inside the current row
    • Manage Rows and columns responsive and flex properties

  • Custom context menus

    The Custom context menu adds several utilities to create and position the new elements inside the editor.
    This is especially useful to add some elements at the beginning or end of the editable content, which in some cases is usually impossible without editing the code.