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.
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.
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.
Upload register.html on your server then open it in your browser
Enter your email & purchase code to get your registration key
Instanciate the Bootstrap plugin
Upload the plugin folder somewhere on your server, for instance /lib/tinymce-bootstrap-plugin/plugin
Add the Bootstrap plugin to your tinymce.init() function:
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.
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:
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