Foundation Tools
for CKEditor & TinyMCE
16 in 1
Includes products:
Foundation Tools logo
Get Foundation Tools inside
31 in 1
Foundation Bundle
Foundation Tools logo
Get Foundation Tools inside
32 in 1
Foundation Full Bundle
Foundation Tools logo
Get Foundation Tools inside
16 in 1
Foundation Bundle 3-in-1

Install Foundation Tools plugin 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: 'jsplusFoundationInclude,jsplus_show_blocks,jsplus_edit_col,jsplus_foundation_templates,jsplus_foundation_row_add_up,jsplus_foundation_row_add_down,jsplus_foundation_button,jsplus_foundation_icons,jsplus_foundation_gallery,jsplus_foundation_label,jsplus_foundation_breadcrumbs,jsplus_foundation_alert,jsplus_foundation_col_move_left,jsplus_foundation_col_move_right,jsplus_foundation_row_move_up,jsplus_foundation_row_move_down,jsplus_foundation_delete_col,jsplus_foundation_delete_row'
  3. Add these buttons to the toolbar definition:
    • jsplus_foundation_button
      Inserting and editing buttons
    • jsplus_foundation_icons
      Inserting an icon
    • jsplus_foundation_gallery
      Upload images and insert as gallery
    • jsplus_foundation_label
      Inserting text styled as label
    • jsplus_foundation_breadcrumbs
      Navigation links
    • jsplus_foundation_alert
      Inserting text message
    • jsplus_show_blocks
      Show/hide Foundation blocks structure
    • jsplus_edit_col
      Foundation column configuration
    • jsplus_foundation_row_add_up
      Add new row before selected row
    • jsplus_foundation_templates
      Add new row at cursor
    • jsplus_foundation_row_add_down
      Add new row after selected row
    • jsplus_foundation_col_move_left
      Move selected column left
    • jsplus_foundation_col_move_right
      Move selected column right
    • jsplus_foundation_row_move_up
      Move selected row up
    • jsplus_foundation_row_move_down
      Move selected row down
    • jsplus_foundation_delete_col
      Delete selected column
    • jsplus_foundation_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.