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: 'jsplusBootstrapInclude,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.
  4. Now you can use your installed plugins. Do not forget to sure that browser cache was cleared.