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[*]",
- Unpack archived files directly to
tinymce/plugins
. - Turn on the plugin in
initialization script:
plugins: 'jsplusInclude,jsplusBootstrapTools'
-
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. - Add these buttons to the toolbar definition:
- Show Bootstrap structure
jsplusShowBlocks
- Edit the container
jsplusBootstrapToolsContainerEdit
- Add a container at cursor
jsplusBootstrapToolsContainerAdd
- Add a container before
jsplusBootstrapToolsContainerAddBefore
- Add a container after
jsplusBootstrapToolsContainerAddAfter
- Delete the container
jsplusBootstrapToolsContainerDelete
- Move the container up
jsplusBootstrapToolsContainerMoveUp
- Move the container down
jsplusBootstrapToolsContainerMoveDown
- Edit the row
jsplusBootstrapToolsRowEdit
- Add a row at cursor
jsplusBootstrapToolsRowAdd
- Add a row before
jsplusBootstrapToolsRowAddBefore
- Add a row after
jsplusBootstrapToolsRowAddAfter
- Delete the row
jsplusBootstrapToolsRowDelete
- Move the row up
jsplusBootstrapToolsRowMoveUp
- Move the row down
jsplusBootstrapToolsRowMoveDown
- Edit the column
jsplusBootstrapToolsColEdit
- Add a column at cursor
jsplusBootstrapToolsColAdd
- Add a column before
jsplusBootstrapToolsColAddBefore
- Add a column after
jsplusBootstrapToolsColAddAfter
- Delete the column
jsplusBootstrapToolsColDelete
- Move the column left
jsplusBootstrapToolsColMoveLeft
- Move the column right
jsplusBootstrapToolsColMoveRight
- Now you can use your installed plugins. Do not forget to sure that browser cache was cleared.