Bootstrap Tools
CKEditor add-on
TinyMCE add-on
Purchase logo
Get for Bootstrap
$39
Purchase logo
Get for Foundation
$39

Install Foundation Tools to TinyMCE

  1. Unpack archived files directly to tinymce/plugins.
  2. Turn on the plugin in initialization script:
    plugins: 'jsplusInclude,jsplusBootstrapTools'
  3. Specify framework (Bootstrap or Foundation) for Include CSS/JS add-on:
    jsplusInclude: {
        framework: "b3" // or "b4", "f5", "f6", "f6x"
      }
    b3 means Bootstrap 3 here.
    This option will affect to all other CSS framework-specific add-ons too.
    Read more about framework option or including CSS framework into the page.
  4. Add these buttons to the toolbar definition:
    • jsplusShowBlocks
      Show Bootstrap structure
    • jsplusBootstrapToolsRowEdit
      Edit the row
    • jsplusBootstrapToolsRowAdd
      Add a row at cursor
    • jsplusBootstrapToolsRowAddBefore
      Add a row before
    • jsplusBootstrapToolsRowAddAfter
      Add a row after
    • jsplusBootstrapToolsRowDelete
      Delete the row
    • jsplusBootstrapToolsRowMoveUp
      Move the row up
    • jsplusBootstrapToolsRowMoveDown
      Move the row down
    • jsplusBootstrapToolsColEdit
      Edit the column
    • jsplusBootstrapToolsColAdd
      Add a column at cursor
    • jsplusBootstrapToolsColAddBefore
      Add a column before
    • jsplusBootstrapToolsColAddAfter
      Add a column after
    • jsplusBootstrapToolsColDelete
      Delete the column
    • jsplusBootstrapToolsColMoveLeft
      Move the column left
    • jsplusBootstrapToolsColMoveRight
      Move the column right
    See sample TinyMCE toolbar configuration manual.
  5. Now you can use your installed plugins. Do not forget to sure that browser cache was cleared.