Bootstrap Editor
for JS, CKEditor, TinyMCE
Overview Plugins
CKEditor add-on TinyMCE add-on Drupal 8 module WordPress plugin Joomla extension JavaScript library
Installing CKEditor to WordPress Installing CKEditor to Joomla Installing CKEditor to Drupal 7 How to install CKEditor plugin from CDN How to install a plugin to CKEditor How to adjust CKEditor settings
Include Bootstrap to CKEditor/TinyMCE CKEditor config FAQ CKEditor debugging manual Adding CKEditor add-ons to CS Cart
Bootstrap Editor logo
Get Bootstrap Editor inside
33 in 1
Bootstrap Full Bundle

Bootstrap Editor add-on for TinyMCE

Bootstrap Editor plugin for TinyMCE will help you to edit Bootstrap block structure in your editor.

Select the block and press the Bootstrap Editor toolbar button - Bootstrap Editor will be opened in full screen mode for editing current. If user press' "Save" button the content in TinyMCE will be updated.

This add-on is easy to install (install it like any other add-ons).

Bootstrap Editor for TinyMCE comes actually as 3 add-ons: Bootstrap Editor itself and two Bootstrap utilities for including Bootstrap into TinyMCE and highlighting Bootstrap blocks.



The tool for building Bootstrap structure in WYSIWYG mode.
Helps you to attach Bootstrap styles to your document, so they will be displayed with appropriate sizes and positions defined by Bootstrap CSS.

Grid plugins

Visually shows structure of Bootstrap elements: containers, rows and columns.


  1. Unpack archived files directly to tinymce/plugins.
  2. Turn on the plugin in initialization script:
    plugins: 'jsplus_bootstrap_include,jsplus_bootstrap_show_blocks,jsplus_bootstrap_editor'
  3. Add these buttons to toolbar definition:
    See TinyMCE toolbar configuration manual to find out more about this step.
  4. Now you can use your installed plugins. Do not forget to sure that browser cache was cleared.