tinyMce Bootstrap Plugin

Extend tinyMce using Any Bootstrap Element & Any Custom Code Snippet

• created: 12/01/2015
• latest update: 19/10/2015
• by: Gilles Migliori
• email: gilles.migliori@gmail.com

TinyMce Bootstrap plugin adds a Bootstrap toolbar to tinyMce
with 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.

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

tinyMce

jQuery

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 :

   <script type="text/javascript">
   tinymce.init({
       selector: "textarea",
       plugins: [
           "bootstrap"
       ],
       bootstrapConfig: {
           'imagesPath': '/tinymce-bootstrap-plugin/examples/img/' // replace with your images folder path
       },
       toolbar: "bootstrap"
   });
   </script>
   

5. To use your own Bootstrap css, select toolbar elements or change language, see corresponding sections in this doc.

Full Example

Custom Bootstrap css

Select toolbar elements

Custom language

<script type="text/javascript">
tinymce.init({
    selector: "textarea",
    plugins: [
        "bootstrap"
    ],
    toolbar: "bootstrap",
    bootstrapConfig: {
        'bootstrapCssPath': base_url + 'css/bootstrap.min.css', // <= replace with your custom bootstrap path
        'imagesPath': '/tinymce-bootstrap-plugin/examples/img/' // replace with your images folder path
    }
});
</script>

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

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

<script type="text/javascript">
tinymce.init({
    selector: "textarea",
    plugins: [
        "bootstrap"
    ],
    toolbar: "bootstrap",
    bootstrapConfig: {
        'bootstrapCssPath': base_url + 'css/bootstrap.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
    }
});
</script>

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 :

<script type="text/javascript">
tinymce.init({
    selector: "textarea",
    plugins: [
        "bootstrap"
    ],
    toolbar: "bootstrap",
    bootstrapConfig: {
        'allowSnippetManagement': false,
        'imagesPath': '/tinymce-bootstrap-plugin/examples/img/' // replace with your images folder path
    }
});
</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.

Just list the elements you want to add :

<script type="text/javascript">
tinymce.init({
    selector: "textarea",
    plugins: [
        "bootstrap"
    ],
    toolbar: "bootstrap",
    bootstrapConfig: {
        'bootstrapElements': {
            'btn': true,
            'icon': true,
            'alert': true
        },
        'imagesPath': '/tinymce-bootstrap-plugin/examples/img/' // replace with your images folder path
    }
});
</script>

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

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 :

   <script type="text/javascript">
   tinymce.init({
       selector: "textarea",
       plugins: [
           "bootstrap"
       ],
       bootstrapConfig: {
           'imagesPath': '/tinymce-bootstrap-plugin/examples/img/' // replace with your images folder path
       },
       toolbar: "bootstrap",
       language: "fr_FR"
   });
   </script>
   

1. Copy tinymce-bootstrap-plugin/plugin/bootstrap into your Joomla tinyMce plugins dir
   (usually /media/editors/tinymce/plugins/
2. Make a backup of your /plugins/editors/tinymce/ folder and replace it with /tinymce-bootstrap-plugin/joomla/tinymce/ folder
3. Make a backup of your /administrator/language/en-GB/en-GB.plg_editors_tinymce.ini file and replace it with /tinymce-bootstrap-plugin/joomla/en-GB.plg_editors_tinymce.ini file *
4. Go to Extensions -> Plugin manager in Joomla admin and open Editor - TinyMCE to access to tinyMce config.
   Next to "Plugin" and "Advanced", you'll find the new "Tinymce Bootstrap Plugin" tab, in which you can configure plugin options.

* If you need a different language, replace translations in /tinymce-bootstrap-plugin/joomla/en-GB.plg_editors_tinymce.ini and place it into the corresponding folder instead.

Online Demo

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
    

Thanks to :

tinyMce

Bootstrap

jQuery