Bootstrap Tools
CKEditor add-on
TinyMCE add-on
Purchase logo
Buy in bundle
Purchase logo
Buy in bundle

Install Bootstrap Tools to CKEditor

  1. Unpack archived files directly to ckeditor/plugins.
  2. Turn on the plugin in ckeditor/config.js:
    config.extraPlugins = 'jsplusInclude,jsplusBootstrapTools';
  3. Specify framework (Bootstrap or Foundation) for Include CSS/JS add-on:
    config.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 CKEditor toolbar configuration to find out more about this step.
  5. Now you can use your installed plugins. Do not forget to sure that browser cache was cleared.