Bootstrap Tools
CKEditor add-on
TinyMCE add-on
N1ED logo
N1ED is united plugin
for all JS+ plugins
N1ED logo Buy in 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: '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
    • jsplusBootstrapToolsContainerEdit
      Edit the container
    • jsplusBootstrapToolsContainerAdd
      Add a container at cursor
    • jsplusBootstrapToolsContainerAddBefore
      Add a container before
    • jsplusBootstrapToolsContainerAddAfter
      Add a container after
    • jsplusBootstrapToolsContainerDelete
      Delete the container
    • jsplusBootstrapToolsContainerMoveUp
      Move the container up
    • jsplusBootstrapToolsContainerMoveDown
      Move the container down
    • 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.