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. 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.
  4. Now you can use your installed plugins. Do not forget to sure that browser cache was cleared.

Minimal configuration

Please set configuration for the plugin by specifying these parameters:

config.jsplusInclude = {
    framework: "b4" // or "b3"