Bootstrap plugin for TinyMCE - Documentation

About Bootstrap plugin for TinyMCE

Why this plugin?

TinyMCE et Bootstrap are among the most popular components of the web.

TinyMCE is The Most Advanced WYSIWYG HTML Editor, often used to edit the content of web pages.

Bootstrap is The most popular HTML, CSS, and JS library in the world

Unfortunately, TinyMCE does not natively allow the use of Bootstrap components, which are however the essential part of our HTML pages:
containers, rows, columns and all the others Bootstrap components like alerts, buttons, cards, images, ...

In addition, Bootstrap 4 provides many CSS classes to manage margins, fills, colors, backgrounds and more.

***The Bootstrap plugin for TinyMCE transforms TinyMCE into a true Bootstrap 4 content editor.

Requirements

  • TinyMCE 5+
  • Bootstrap 4

No dependency

Work on any server (PHP, Node, IIS, ...)

The plugin is written in pure HTML/Javascript - it can be used with or without jQuery.

Package structure

Legend:

*
Required files / folders

Demo

The package includes two demo pages, which allow you to test the plugin.

TinyMCE editor with the Bootstrap 4 plugin

This demo just loads the editor with the plugin.

Open the TinyMCE editor demo

Form with a TinyMCE textarea including the Bootstrap 4 plugin

This demo allows you to post the content of the editor, which will be displayed on the page.
It allows to test the Javascript functionalities of the Bootstrap components (alert, modal, collapse, dropdown, ...).

It also uses HTMLawed, a small PHP tool to secure and sanitize the posted HTML

To open it in your browser you need a running PHP server.

If you don't use a PHP server, this demo is available online here:
https://www.tinymce-bootstrap-plugin.com/demo/php-form-demo/index

Open the Form TinyMCE textarea demo

Quick start

Register the plugin to get your key

  1. Open register.html in your browser
  2. Enter your email & purchase code to get your registration key

Instanciate the Bootstrap plugin

  1. Upload the plugin folder somewhere on your server,
    for instance /lib/tinymce-bootstrap-plugin/plugin
  2. Add the Bootstrap plugin to your tinymce.init() function: 
    <script>
    if (typeof (base_url) == "undefined") {
        var base_url = location.protocol + '//' + location.host + '/';
    }
    tinymce.init({
        selector: 'textarea',
        plugins: 'bootstrap',
        toolbar: ['bootstrap'],
        contextmenu: "bootstrap",
        bootstrapConfig: {
            url: base_url + 'lib/tinymce-bootstrap-plugin/',
            iconFont: 'fontawesome5',
            imagesPath: '/demo/demo-images',
            key: 'your-key-here'
        },
    });
</script>

***
Refer to configuration for a comprehensive list of all the available settings.

Configuration

List of the bootstrapConfig properties
(sorted in alphabetical order)

Property Description Possible values Required
bootstrapCss stringThe url leading to your Bootstrap css Any valid url, absolute or relative.
Default: 'https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css' 		No
editorStyleFormats Javascript objectTinyMCE's custom formats for Bootstrap
Refer to Bootstrap Styles for details 
{
    textStyles: true,
    blockStyles: true,
    containerStyles: true,
    responsive: ['xs', 'sm'], // xs sm md lg
    spacing: ['all', 'x', 'y', 'top', 'right', 'bottom', 'left']
}
Default: like in the sample code above. 		No
elements Javascript objectList of the enabled Bootstrap components.
Set the values to false or remove the items from the list to disable them. 
{
    btn: true,
    icon: true,
    image: true,
    table: true,
    template: true,
    breadcrumb: true,
    pagination: true,
    badge: true,
    alert: true,
    card: true,
    snippet: true
}
Default: All components enabled like in the sample code above. 		No
enableTemplateEdition booleanEnable / disable the live template edition
Refer to the Live template editing tool for details 		true / false
Default: true 		No
iconFont stringThe icon font for the icon & button dialogs elusiveicon
flagicon
fontawesome5
ionicon
mapicon
materialdesign
octicon
typicon
weathericon
Default: 'fontawesome5' 		No
imagesPath stringThe url leading to your images folder for the image dialog Any valid url, root relative or relative. ie: /images or ../images
Don't enter the full url with http://
Default: '/assets/images/' 		Required if you use the image dialog
key Your registration key Your key registered on the active domain name Yes
language Language for translation
Refer to the Language (translation) for details 		The 2 translation files must exist in plugin/langs/
Default: 'en'		 No
url stringThe url leading to plugin/plugin.min.js Any valid url, absolute or relative.
Default: no default value 		Yes

Configuration example

The following example shows a classic configuration code with comments.

The code detects if you're on localhost or production server and uses the corresponding key to keep the same code between the 2 servers.

It also replaces the default TinyMCE formats (alignleft, aligncenter, ...) with the Bootstrap CSS classes (text-left, text-center, ...)

<script>
    if (typeof (base_url) == "undefined") {
        // detect the root url
        var base_url = location.protocol + '//' + location.host + '/';

        // detect localhost
        // you may change the LOCAL_DOMAINS depending on your localhost url
        // the value must include your local window.location.hostname
        const LOCAL_DOMAINS = ["localhost", "127.0.0.1"];
        if (LOCAL_DOMAINS.includes(window.location.hostname)) {
            var tbpKey = 'localhost-key-here'; // replace with your localhost key
        } else {
            var tbpKey = 'production-key-here'; // replace with your production server key
        }
    }
    // uncomment the following line to test if your key is properly set
    // console.log(tbpKey);
    tinymce.init({
        selector: 'textarea',
        plugins: 'advlist autolink bootstrap code link image lists charmap print preview code help table',
        toolbar: [
        'undo redo | bootstrap',
        'cut copy paste | styleselect | alignleft aligncenter alignright alignjustify | bold italic | link image | code | help'],
        contextmenu: "link image imagetools table spellchecker | bootstrap",
        file_picker_types: 'file image media',
        bootstrapConfig: {
            url: base_url + 'tinymce-bootstrap-plugin/',
            iconFont: 'fontawesome5',
            imagesPath: '/demo/demo-images',
            key: tbpKey
        },
        // TinyMCE custom formats dropdown content
        // with all the options enabled the dropdown menu takes a few seconds to show
        // disable some options you don't need if you want the dropdown menu to go faster
        editorStyleFormats: {
            textStyles: true,
            blockStyles: true,
            containerStyles: true,
            responsive: ['xs', 'sm', 'md', 'lg'], // all the responsive options enabled
            spacing: ['all', 'x', 'y', 'top', 'right', 'bottom', 'left']
        },
        formats: { // replace the default TinyMCE inline styles with Bootstrap css classes & appropriate tags
            alignleft: {selector : 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes : 'text-left'},
            aligncenter: {selector : 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes : 'text-center'},
            alignright: {selector : 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes : 'text-right'},
            alignjustify: {selector : 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes : 'text-justify'},
            bold: {inline : 'strong'},
            italic: {inline : 'em'},
            underline: {inline : 'u'},
            sup: {inline : 'sup'},
            sub: {inline : 'sub'},
            strikethrough: {inline : 'del'}
        },
        style_formats: [
            { title: 'Headings', items: [
                { title: 'Heading 1', format: 'h1' },
                { title: 'Heading 2', format: 'h2' },
                { title: 'Heading 3', format: 'h3' },
                { title: 'Heading 4', format: 'h4' },
                { title: 'Heading 5', format: 'h5' },
                { title: 'Heading 6', format: 'h6' }
            ]},
            { title: 'Blocks', items: [
                { title: 'Paragraph', format: 'p' },
                { title: 'Blockquote', format: 'blockquote' },
                { title: 'Div', block: 'div', wrapper: true }
            ]},
            { title: 'Containers', items: [
                { title: 'Container fluid', block: 'div', classes: 'container-fluid', wrapper: true },
                { title: 'Container', block: 'div', classes: 'container', wrapper: true },
                { title: 'Section', block: 'section', wrapper: true },
                { title: 'Article', block: 'article', wrapper: true }
            ]}
        ],
        style_formats_merge: false, // if true, add TinyMce's default style formats to the user's style_formats,
        style_formats_autohide: true // hide the custom formats that don't match the selected element in the editor
    });
</script>

Choose Bootstrap CSS

<script>
    tinymce.init({
        selector: 'textarea',
        // ...
        bootstrapConfig: {
            url: base_url + 'tinymce-bootstrap-plugin/',
            bootstrapCss: '/url/to/bootstrap.min.css',
            // ...
        },
        // ...
    });
</script>

Choose Toolbar components

<script>
    tinymce.init({
        selector: 'textarea',
        // ...
        bootstrapConfig: {
            url: base_url + 'tinymce-bootstrap-plugin/',
            elements: { // only the following elements will be added to the toolbar
                btn: true,
                icon: true,
                template: true,
                alert: true,
                card: true
            },
            // ...
        },
        // ...
    });
</script>

Special keys & features

Enter
Add a new paragraph after the current element
Shift + Enter
Insert a line break
Right-click
Shows the context menu to add a new paragraph before or after the current element

Custom Styles - overview

The plugin adds the following Bootstrap CSS classes from Bootstrap 4 utilities:

Margin
ie: .m-2, .mx-2, .my-2, .m-sm-2, ...
Padding
ie: .p-2, .px-2, .py-2, .p-sm-2, ...
Color
ie: .text-dark, .text-danger, ...
Background
ie: .bg-dark, .bg-danger, ...
Border
ie: .border .border .border-primary, .border-bottom .border-primary, ...

The Bootstrap CSS classes are available from TinyMCE's custom_formats dropdown menu.

The dropdown menu is structured as follows:

Main Nested 1 Nested 2 Nested 3 Nested 4
Text styles Margin
Padding
Border		 All screens
Small screens & larger
Medium screens & larger
Large screens		 All
x
y
top
right
bottom
left		 ml-sm-0
ml-sm-1
ml-sm-2
...
[available CSS classes]
Color
Background		 text-primary
text-secondary
...
[available CSS classes]		    
Block styles Same as above
Container styles Same as above

Tip: init TinyMCE with style_formats_autohide: true to hide the styles that don't match the selected editor elements.ie: the container dropdown will not be shown if the cursor is not inside a container.

TinyMCE custom_formats dropdown menu
The Bootstrap CSS classes are available from TinyMCE's custom_formats dropdown menu.

Options & configuration

The custom_formats dropdown menu can be configured with the following options:

<script>
    tinymce.init({
        selector: 'textarea',
        // ...
        bootstrapConfig: {
            url: base_url + 'tinymce-bootstrap-plugin/',
            editorStyleFormats: {
                textStyles: true, // true or false
                blockStyles: true, // true or false
                containerStyles: true, // true or false
                responsive: ['xs', 'sm'], // xs sm md lg
                spacing: ['all', 'x', 'y', 'top', 'right', 'bottom', 'left'] // all x y top right bottom left
            },
            // ...
        },
        // ...
    });
</script>

Templates - overview

The Bootstrap plugin for TinyMCE allows you to create and edit your responsive layout at any time.

The layouts (templates) use the Bootstrap 4 Grid System (container / container-fluid, row, col)

The plugin offers 2 different ways to create / edit / remove the template elements:

The available templates in the templates dialog are all stored in a simple JSON file.
You can customize them using the Templates manager.

Live template editing tool

The Live template editing tool allows to create / edit / remove Bootstrap rows and columns straight from the editor.

Live template editing tool
The Live template editing tool appears in the editor when a template element is clicked.

Click the toolbar buttons to add / edit / remove rows & cols.

Live template editing tool legend
Click to add / edit / remove rows & cols.

The edit buttons show the available options for rows / columns

Edit Bootstrap row
Flexbox options for Bootstrap row edition
Edit Bootstrap row
Set the Bootstrap columns responsive sizes

Enable / disable the Live template editing tool

The Live template editing tool is default enabled.

It can be toggled on / off with a right click using the context menu.

Toggle the Live template editing tool
Use the context menu to enable / disable the Live template edition

Template dialog

The template dialog popup shows different layouts for 2, 3 and 4 columns templates distributed 3 tabs

Options are available to insert the template at the beginning / end of the document.

You can also wrap your template in a container or container fluid.

The Template manager allows to add / edit / remove templates and tabs to build and organize them the way you want.

Template dialog popup
Template dialog tabs with the available templates in each

Templates manager

The Templates manager allows to add / edit / remove Bootstrap 4 templates and organize them into categories (tabs).

    • Click the right carets to expand / collapse the categories & templates
    • Edit the titles and code
    • Click the buttons to add / delete categories / templates
    • Drag & drop to organize the categories & templates
  2. Click the Generate JSON button
  3. Click the Download JSON button & save the file to plugin/templates/templates.json
    or copy/paste the JSON code into it.
Template manager
The templates manager

Snippet tool - overview

The Snippet tool allows you to create, organize and use custom code snippets at will.

Tinymce Bootstrap plugin comes with different Bootstrap 4 components code snippets: Card group, Card deck, Accordion, Jumbotron, media, modal, ...

Some others are complete layout components, such as Footer, Pricing table, Team, Cover page, ...

The available snippets in the snippet dialog are all stored in a simple JSON file.
You can customize them using the Snippets manager.

Snippet dialog

The snippet dialog popup shows all the available snippets distributed tabs

Options are available to insert the snippets at the current position or at the beginning / end of the document.

The Snippet manager allows to add / edit / remove snippets and tabs to build and organize them the way you want.

Tip: Start the snippet title with [w-100] to show the snippet in 100% with in the snippet dialog window

Template dialog popup
Snippet dialog tabs with the available snippets in each

Snippets manager

The Snippets manager allows to add / edit / remove code snippets and organize them into categories (tabs).

    • Click the right carets to expand / collapse the categories & snippets
    • Edit the titles and code
    • Click the buttons to add / delete categories / snippets
    • Drag & drop to organize the categories & snippets
  2. Click the Generate JSON button
  3. Click the Download JSON button & save the file to plugin/snippets/snippets.json
    or copy/paste the JSON code into it.
Template manager
The snippets manager

Language / translation (i18n)

Tinymce Bootstrap plugin can be translated in any LTR language.

To translate the plugin:

  1. Duplicate the 2 language files en.js and en-dialogs.js in plugin/langs/
  2. Init the plugin in your own language 
    <script>
    // sample code with for instance fr_FR.js + fr_FR-dialog.js
    tinymce.init({
        language: 'fr_FR',
        language_url :'/url/leading/to/plugin/langs/fr_FR.js',
        selector: 'textarea',
        // [...]
        bootstrapConfig: {
            // [...],
            language: 'fr_FR'
        },
    });
</script>
  3. Please contact us & share your language files! Thanks!

Need help?

For any request please contact us at https://www.miglisoft.com/#contact

Feel free to send your FTP access, page URL and any information that might be useful to help you.

Changelog

Version 3 for Bootstrap 4 + TinyMCE 5

New Features :
    - Management of user styles and merging with TinyMce default styles
Bug Fix :
    - fix UI buttons activation with several simultaneous instances of TinyMce

Version 3.3 (2020-07)

New Features :
    - support for TinyMCE inline mode
Improvements :
    - The URL of the images is now relative or absolute according to the "relative_urls" setting of TinyMCE
Bug Fix :
    - the file explorer (file-tree) in the Bootstrap image dialog now accepts folders named with a number

Version 3.2.4 (2020-03)

Improvements :
    - remove the Live Template Editing markup from the editor on submit
Bug Fix :
    - fix the registration with composed TLDs (.com.xx, ...)

Version 3.2.3 (2020-02)

Improvements :
    - enable TinyMCE's table plugin in demo and sample codes to avoid any confusion
Bug Fix :
    - fix language compatibility with the new TinyMCE V5.2.0

Version 3.2.2 (2020-02)

Improvements :
    - improve domain management in the registration system
Bug Fix :
    - fix non-working Bootstrap settings with boolean values to false

Version 3.2.1 (2020-01)

New Features :
    - add French translation
Improvements :
    - add Bootstrap Table bordered / borderless options
Bug Fix :
    - fix custom language loading
    - fix missing scrollbar in the image browser

Version 3.2 (2020-01)

Improvements :
    - update for TinyMCE V5.1+ API (V5.1 broke the Toolbar)
Bug Fix :
    - fix the dialogs height for others dialogs than Bootstrap's

Version 3.1 (2020-01)

New Features :
    - add a new PHP Form demo
Improvements :
    - change the HTML cleaner/beautifier
Bug Fix :
    - the Snippets with Javascript now work as intended (Bootstrap Modal, Collapsible)

Version 3.0 (2019-12)

New Major version 3.0 totally rewritten in Typescript

Older versions for Bootstrap 3 + tinymce 4

Version 2.3.2 (2016-10)

Bug Fix :
    - fix error when editing same element several times

Version 2.3.1 (2016-10)

Bug Fix :
    - fix js error with new TinyMCE 4.4.3
Improvements :
    - update to latest TinyMCE 4.4.3
    - add $.noConflict() to fix conflicts with other libraries

Version 2.3 (2016-09)

Bug Fix :
    - fix https warnings
    - fix table & breadcrumb edition
Improvements :
    - add option to switch from toolbar to dropdown list
    - replace Google Pretiffy with Prism (syntax highlighter)
    - add conf file (bootstrap/conf/conf.php) to allow custom paths for jQuery, Bootstrap's js, codemirror & Prism
    - add font icon libraries :
        glyphicon
        ionicon
        fontawesome
        weathericon
        mapicon
        octicon
        typicon
        elusiveicon
        materialdesign

Version 2.2.8 (2016-08)

Bug Fix :
    - fix random js issue on getBootstrapStyles() function
    - fix non-working snippets add due to previous update
Improvements :
    - add italian translation (Thanks to Gubithouse)

Version 2.2.7 (2016-07)

Improvements :
    - add shortcuts :
        - ctrl+enter => <br>
        - alt+enter  => new paragraph after Bootstrap element
    - prevent from stripping empty 

    - add uppercase extensions image support
Bug Fix :
    - fix issue with absolute images paths in some particular cases

Version 2.2.6 (2016-06)

Bug Fix :
    - fix insertion of Bootstrap elements in Bootstrap tables

Version 2.2.5 (2016-05)

Improvement :
    - prevent from stripping empty 

    - add uppercase extensions image support
Bug Fix :
    - fix issue with absolute images paths in some particular cases
    - fix cursor focus in Bootstrap tables (2nd fix)

Version 2.2.4 (2015-12)

Bug Fix :
    - fix cursor focus in Bootstrap tables

Version 2.2.3 (2015-12)

Improvements :
    - prevent from stripping empty 

    - add codemirror to Snippets add/edit forms
Bug Fix :
    - fix snippets preg_match_all php warning with php < 5.4.0

Version 2.2.2 (2015-10)

Improvement :
    - improved templates usage
Bug Fix :
    - fix error using very big snippets

Version 2.2.1 (2015-08)

Bug Fix :
    - fix Uncaught SecurityError when used with external iframe on same page

Version 2.2 (2015-08)

Improvements :
    - prevent plugin form jQuery conflicts

Version 2.1 (2015-07)

Improvements :
    - update to latest TinyMCE 4.2.2
    - add templates visual aid

Version 2.0 (2015-05)

New Features :
    - add snippet tool
Improvements :
    - jshint javascript code

Version 1.1.2 (2015-03)

New Features :
    - add TinyMCE inline full support
Bug Fix :
    - Fix alert edit

Version 1.1.1 (2015-02)

New Features :
    - add tinymceBackgroundColor option

Version 1.1.0 (2015-02)

New Features :
    - add Bootstrap images plugin with Filebrowser
    - all plugins are fully responsive

Version 1.0.0 (2015-01)

Initial Release