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

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: 'jsplus_foundation_include,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 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.