Bootstrap Tools
for CKEditor & TinyMCE
17 in 1
Includes products:
Bootstrap Tools logo
Get Bootstrap Tools inside
32 in 1
Bootstrap Bundle
Bootstrap Tools logo
Get Bootstrap Tools inside
33 in 1
Bootstrap Full Bundle

Install Bootstrap Tools to TinyMCE

Note. By default TinyMCE stripes out some tags and attributes. Please add this option to your initialization script:
extended_valid_elements : "div[*],span[*],i[*]",
  1. Unpack archived files directly to tinymce/plugins.
  2. Turn on the plugin in initialization script:
    plugins: 'jsplus_bootstrap_include,jsplus_show_blocks,jsplus_edit_col,jsplus_bootstrap_templates,jsplus_bootstrap_row_add_up,jsplus_bootstrap_row_add_down,jsplus_bootstrap_button,jsplus_bootstrap_icons,jsplus_bootstrap_gallery,jsplus_bootstrap_badge,jsplus_bootstrap_label,jsplus_bootstrap_breadcrumbs,jsplus_bootstrap_alert,jsplus_bootstrap_col_move_left,jsplus_bootstrap_col_move_right,jsplus_bootstrap_row_move_up,jsplus_bootstrap_row_move_down,jsplus_bootstrap_delete_col,jsplus_bootstrap_delete_row'
  3. Add these buttons to the toolbar definition:
    • jsplus_show_blocks - Show/hide Bootstrap blocks structure
    • jsplus_bootstrap_button - Inserting and editing buttons
    • jsplus_bootstrap_icons - Inserting an icon
    • jsplus_bootstrap_gallery - Upload images and insert as gallery
    • jsplus_bootstrap_badge - Insert a badge
    • jsplus_bootstrap_label - Inserting text styled as label
    • jsplus_bootstrap_breadcrumbs - Navigation links
    • jsplus_bootstrap_alert - Inserting text message
    • jsplus_edit_col - Bootstrap column configuration
    • jsplus_bootstrap_row_add_up - Add new row before selected row
    • jsplus_bootstrap_templates - Add new row at cursor
    • jsplus_bootstrap_row_add_down - Add new row after selected row
    • jsplus_bootstrap_col_move_left - Move selected column left
    • jsplus_bootstrap_col_move_right - Move selected column right
    • jsplus_bootstrap_row_move_up - Move selected row up
    • jsplus_bootstrap_row_move_down - Move selected row down
    • jsplus_bootstrap_delete_col - Delete selected column
    • jsplus_bootstrap_delete_row - Delete selected row
    See sample TinyMCE toolbar configuration manual to find out more about this step. Do not forget to sure that browser cache was cleared.
  4. Now you can use your installed plugins. Do not forget to sure that browser cache was cleared.