Tinymce Bootstrap Plugin - Documentation

Demo

The Tinymce Bootstrap plugin is provided in two versions: Bootstrap 4 and Bootstrap 5.

Two demos are available for each version:

1. The Tinymce editor with the Bootstrap plugin
2. The Tinymce editor with the Bootstrap plugin integrated in a form

Tinymce editor with the Bootstrap plugin

This demo just loads the editor with the plugin.

Open the Tinymce/Bootstrap 5 demo

Open the Tinymce/Bootstrap 4 demo

Form with a Tinymce textarea including the Bootstrap 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.

Open Tinymce/Bootstrap 5 Form demo

Open Tinymce/Bootstrap 4 Form demo

Quick start

Register the plugin to get your key

A Regular license allows 2 registration slots: 1 for localhost, 1 for your production server.

You must register the plugin on each hostname that you use. If you work on localhost and production server, register the plugin on both and use the corresponding registration key.

1. Upload register.html on your server then open it in your browser
2. Enter your email & purchase code to get your registration key

Instanciate the Bootstrap plugin

1. Upload the bootstrap4/plugin or bootstrap5/plugin folder somewhere on your server according to the Bootstrap version you use.
   For instance /lib/tinymce-bootstrap-plugin/bootstrap5/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/bootstrap5/',
               iconFont: 'fontawesome5',
               imagesPath: '/assets/images',
               key: 'enter-your-registration-key-here'
           },
       });
   </script>

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

Bootstrap 5 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-start, 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({
        // language: 'fr_FR',
        // language_url :'/bootstrap5/plugin/langs/fr_FR.js',
        selector: 'textarea.tinymce',
        toolbar_mode: 'wrap',
        plugins: 'advlist autolink bootstrap link image lists charmap preview help table',
        toolbar: [
        'undo redo | bootstrap',
        'cut copy paste | styles | alignleft aligncenter alignright alignjustify | bold italic | link image | preview | help'],
        contextmenu: "link image imagetools table spellchecker | bootstrap",
        file_picker_types: 'file image media',
        bootstrapConfig: {
            // language: 'fr_FR',
            url: base_url + 'bootstrap5/plugin/',
            iconFont: 'font-awesome-solid',
            imagesPath: '/bootstrap5/demo/demo-images',
            key: tbpKey
        },
        styles: {
            alignleft: {selector : 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes : 'text-start'},
            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-end'},
            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>

Bootstrap 4 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-start, 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',
            // 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']
            },
            key: tbpKey
        },
        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-start'},
            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-end'},
            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 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>

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 Text styles will be applied:

• on the selected content if some content is selected
• on the current node from the cursor position if nothing is selected

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

The dropdown menu is structured as follows:

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.

Templates - overview

Tinymce Bootstrap Plugin 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 Live template editing tool
• the Templates dialog

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

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.

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

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.

Credits

Many thanks to:

• http://olado.github.io/doT/
• http://victor-valencia.github.io/bootstrap-iconpicker/
• https://ace.c9.io/
• https://getbootstrap.com/
• https://github.com/brix/crypto-js
• https://github.com/claviska/jquery-minicolors
• https://github.com/kesar/HTMLawed
• https://github.com/muicss/loadjs
• https://prismjs.com/
• https://www.tiny.cloud/