TINYMCE BOOTSTRAP PLUGIN

Extend tinyMce using Any Bootstrap Element & Any Custom Code Snippet

TinyMce Bootstrap plugin adds a Bootstrap toolbar to tinyMce in which you can access to visual editors to create/edit the following Bootstrap elements :

  • Buttons (+ icons)
  • Icons
  • Images
  • Tables
  • Templates (create only)
  • Breadcrumbs
  • Paginations
  • Pagers
  • Labels
  • Badges
  • Alerts
  • Panels

Each element is customizable with usual Bootstrap options

You can use your own Bootstrap css, wich will be directly rendered either in tinyMce editor and plugin visual editors.

The new Snippet tool allows to create and store / recall any custom code snippet, Bootstrap or not.

You can for example easily store and reuse in one click :
Bootstrap Modal, Carousel, Navbar, Navbar Tabs, Nav Tabs, Accordion, Popover, ...

Create your own snippets easily in just a few clicks.

Requirements

TinyMce Bootstrap plugin uses php, so you need to run php to test on localhost.

tinyMce

jQuery

Quick Start Guide

  1. Download and unzip latest tinyMce at http://www.tinymce.com/download/download.php
  2. Copy plugin/bootstrap dir to your tinyMce plugins dir
  3. include jQuery to your page
  4. Add Bootstrap plugin to tinyMce plugins & toolbar :
    <!-- jQuery -->
    <script src="js/jquery.min.js"></script>
    
    <!-- tinymce -->
    <script src="tinymce/jquery.tinymce.min.js"></script>
    
    <script type="text/javascript">
    if (typeof(base_url) == "undefined") {
        var base_url = location.protocol + '//' + location.host + '/';
    }
    $(document).ready(function() {
        $("textarea").tinymce({
            script_url: base_url + 'tinymce-bootstrap-plugin/examples/tinymce/tinymce.min.js', // replace with your own path
            document_base_url: base_url,
            plugins: [
                "bootstrap"
            ],
            bootstrapConfig: {
                'type': 'buttongroup', // dropdownMenu|buttongroup
                'imagesPath': base_url + 'tinymce-bootstrap-plugin/examples/img/', // replace with your images folder path
                'bootstrapIconFont': 'materialdesign' // Iconpicker Iconsets - one of the following : glyphicon - ionicon - fontawesome - weathericon - mapicon - octicon - typicon - elusiveicon - materialdesign
            },
            language: 'fr_FR',
            toolbar: "bootstrap"
        });
    });
    </script>
  5. To use your own Bootstrap css, select toolbar elements or change language, see corresponding sections in this doc.

options (arguments)

Tinymce Bootstrap Plugin accepts the following arguments :

'type'
'dropdownMenu' or 'buttongroup'
'buttongroup' shows complete toolbar with icons,
'dropdownMenu' shows a single button with dropdown list.
'dropdownText'
Custom dropdown menu text
Has no effect if type is 'buttongroup'.
Default text is 'Elements'.
Example : 'dropdownText': 'Custom Button Text'
'bootstrapCssPath'
Default : 'bootstrapCssPath': base_url + '/css/bootstrap.min.css'
Replace with your own path to use custom Bootstrap
'imagesPath'
Required for Bootstrap Image plugin.
Example : 'imagesPath': '/tinymce-bootstrap-plugin/examples/img/'
'bootstrapIconFont'
Iconpicker Iconsets - one of the following :
glyphicon - ionicon - fontawesome - weathericon - mapicon - octicon - typicon - elusiveicon - materialdesign
Example : 'bootstrapIconFont': 'materialdesign'
You have to include font css on your pages :
<link href="tinymce/plugins/bootstrap/css/iconpicker/css/material-design-iconic-font.min.css" rel="stylesheet">
'bootstrapElements'
Available elements : btn - icon - table - template - breadcrumb - pagination - pager - label - badge - alert - panel
Example : 'bootstrapElements': { 'btn': true, 'icon': true, 'alert': true }
'tinymceBackgroundColor'
Replace tinyMce's Background color with custom.
Example : 'tinymceBackgroundColor': '#fff' // replaces editor background-color with custom
Snippet options
'allowSnippetManagement' : enable|disable snippet creation/edition
'allow_php' : Allow|disallow php in snippets code
'allow_script' : Allow|disallow scripts in snippets code
Example :
'allowSnippetManagement': true,
'allow_php' : false,
'allow_script' : true
Default options
<script type="text/javascript">
tinymce.init({
    selector: "textarea",
    plugins: [
        "bootstrap"
    ],
    toolbar: "bootstrap",
    bootstrapConfig: {
        'type': 'buttongroup',
        'bootstrapCssPath': url + '/css/bootstrap.min.css', // <= replace with your custom bootstrap path
        'imagesPath': url + '/', // replace with your images folder path
        'bootstrapIconFont': 'glyphicon',
        'bootstrapElements': {
            'btn': true,
            'icon': true,
            'image': true,
            'table': true,
            'template': true,
            'breadcrumb': true,
            'pagination': true,
            'pager': true,
            'label': true,
            'badge': true,
            'alert': true,
            'panel': true,
            'snippet': true
        },
        'tinymceBackgroundColor': '',
        'allowSnippetManagement': true,
        'allow_php': false,
        'allow_script': false
    }
});
</script>

Examples with code

Use your own bootstrap css

<!-- jQuery -->
<script src="js/jquery.min.js"></script>

<!-- tinymce -->
<script src="tinymce/jquery.tinymce.min.js"></script>

<script type="text/javascript">
    $(document).ready(function () {
        if (typeof(base_url) == "undefined") {
            var base_url = location.protocol + '//' + location.host + '/';
        }
        $("textarea").tinymce({
            script_url : base_url + 'tinymce-bootstrap-plugin/examples/tinymce/tinymce.min.js', // replace with your own path
            document_base_url: base_url,
            plugins: [
                "bootstrap"
            ],
            bootstrapConfig: {
                'bootstrapCssPath': base_url + 'tinymce-bootstrap-plugin/examples/css/bootstrap-darkly.min.css', // <= replace with your custom bootstrap path
                'imagesPath': '/tinymce-bootstrap-plugin/examples/img/' // replace with your images folder path
            },
            toolbar: "bootstrap"
        });
    });
</script>

To use different background-color than body's in tinyMce

Sometimes we need to change tinyMce's background-color :

<!-- jQuery -->
<script src="js/jquery.min.js"></script>

<!-- tinymce -->
<script src="tinymce/jquery.tinymce.min.js"></script>

<script type="text/javascript">
    $(document).ready(function () {
        if (typeof(base_url) == "undefined") {
            var base_url = location.protocol + '//' + location.host + '/';
        }
        $("textarea").tinymce({
            script_url : base_url + 'tinymce-bootstrap-plugin/examples/tinymce/tinymce.min.js', // replace with your own path
            document_base_url: base_url,
            plugins: [
                "bootstrap"
            ],
            bootstrapConfig: {
                'bootstrapCssPath': base_url + 'tinymce-bootstrap-plugin/examples/css/bootstrap-darkly.min.css', // <= replace with your custom bootstrap path
                'imagesPath': '/tinymce-bootstrap-plugin/examples/img/', // replace with your images folder path
                'tinymceBackgroundColor': '#fff' // replaces editor background-color with custom
            },
            toolbar: "bootstrap"
        });
    });
</script>

Snippet tool

Snippet tool uses the following options :

allowSnippetManagement
true / false ; default : true
allow_php (php object attribute)
true / false ; default : false
allow_script (php object attribute)
true / false ; default : false

The allowSnippetManagement option

If set to true, the snippet window displays the add / edit / delete buttons

You can for example create your snippets, then turn the option off so the future user cannot edit :

<!-- jQuery -->
<script src="js/jquery.min.js"></script>

<!-- tinymce -->
<script src="tinymce/jquery.tinymce.min.js"></script>

<script type="text/javascript">
    $(document).ready(function () {
        if (typeof(base_url) == "undefined") {
            var base_url = location.protocol + '//' + location.host + '/';
        }
        $("textarea").tinymce({
            script_url : base_url + 'tinymce-bootstrap-plugin/examples/tinymce/tinymce.min.js', // replace with your own path
            document_base_url: base_url,
            plugins: [
                "bootstrap"
            ],
            bootstrapConfig: {
                'allowSnippetManagement': false,
                'imagesPath': '/tinymce-bootstrap-plugin/examples/img/' // replace with your images folder path
            },
            toolbar: "bootstrap"
        });
    });
</script>

The allow_php / allow_script options

These options allow / disallow user to include javascript / php code into snippets.

For security reasons, they're not configured using tinyMce's bootstrapConfig, but hard-coded in php.

To turn on / off :

  • open /tinymce-bootstrap-plugin/examples/tinymce/plugins/bootstrap/snippets/Snippets.php
  • find the following lines (near the beginning of file) :
    private $allow_script = false;
    private $allow_php = false;
  • set values to true or false as you need.

Select toolbar elements

Just list the elements you want to add :

<!-- jQuery -->
<script src="js/jquery.min.js"></script>

<!-- tinymce -->
<script src="tinymce/jquery.tinymce.min.js"></script>

<script type="text/javascript">
    $(document).ready(function () {
        if (typeof(base_url) == "undefined") {
            var base_url = location.protocol + '//' + location.host + '/';
        }
        $("textarea").tinymce({
            script_url : base_url + 'tinymce-bootstrap-plugin/examples/tinymce/tinymce.min.js', // replace with your own path
            document_base_url: base_url,
            plugins: [
                "bootstrap"
            ],
            bootstrapConfig: {
                'bootstrapElements': {
                    'btn': true,
                    'icon': true,
                    'alert': true
                },
                'imagesPath': '/tinymce-bootstrap-plugin/examples/img/' // replace with your images folder path
            },
            toolbar: "bootstrap"
        });
    });
</script>

List of available elements : btn, icon, table, template, breadcrumb, pagination, pager, label, badge, alert, panel

Change language

Translations are in tinymce/plugins/bootstrap/langs/ directory.

  1. Copy the 2 files named fr_FR.js and fr_FR.php (adapt their name to your language)
  2. Change the translations into these files
  3. Just init tinyMce with your language :
    <!-- jQuery -->
    <script src="js/jquery.min.js"></script>
    
    <!-- tinymce -->
    <script src="tinymce/jquery.tinymce.min.js"></script>
    
    <script type="text/javascript">
        $(document).ready(function () {
            if (typeof(base_url) == "undefined") {
                var base_url = location.protocol + '//' + location.host + '/';
            }
            $("textarea").tinymce({
                script_url : base_url + 'tinymce-bootstrap-plugin/examples/tinymce/tinymce.min.js', // replace with your own path
                document_base_url: base_url,
                plugins: [
                    "bootstrap"
                ],
                bootstrapConfig: {
                    'imagesPath': '/tinymce-bootstrap-plugin/examples/img/' // replace with your images folder path
                },
                toolbar: "bootstrap",
                language: "fr_FR"
            });
        });
    </script>

Troubleshooting

  • Internal Server Error

    Try to chmod your /media/editors/tinymce/plugins/bootstrap dir, + sub-directories & files to 755

  • Images Browsing doesn't show in images plugin

    If your browser's console throws a 400 error, it comes from your apache mod_security.c

    Review your mod_security.c configuration, or try to disable it with htaccess :

    
    # Turn the filtering engine On or Off
    SecFilterEngine Off
    
  • Others

    Please contact me at gilles.migliori@gmail.com - I'll do my best to help

  • Changelog

    Version 2.3.2 (25/10/2016)

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

    Version 2.3.1 (25/10/2016)

    
    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 (12/09/2016)

    
    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 (19/08/2016)

    
    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 (22/07/2016)

    
    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 (17/06/2016)

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

    Version 2.2.5 (09/05/2016)

    
    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 (07/12/2015)

    
    Bug Fix :
        - fix cursor focus in Bootstrap tables
    

    Version 2.2.3 (03/12/2015)

    
    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 (27/10/2015)

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

    Version 2.2.1 (09/08/2015)

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

    Version 2.2 (09/08/2015)

    
    New Features :
        - add Joomla integration
    Improvements :
        - prevent plugin form jQuery conflicts
    

    Version 2.1 (25/07/2015)

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

    Version 2.0 (13/05/2015)

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

    Version 1.1.2 (29/03/2015)

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

    Version 1.1.1 (30/02/2015)

    
    New Features :
        - add tinymceBackgroundColor option
    

    Version 1.1.0 (16/02/2015)

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

    Version 1.0.0 (19/01/2015)

    
        Initial Release
    

    Sources & Credits

    Thanks to :

    tinyMce

    Bootstrap

    jQuery