Bootstrap Tools logo

Bootstrap Tools plugin

Bootstrap Tools with a lot of features to handle Bootstrap column structure
Bootstrap Tools screenshot
Bootstrap Tools screenshotColumn dialog screenshotRow dialog screenshot
Bootstrap Tools logo

Create and edit any widgets of Bootstrap's framework, manipulate its blocks, insert any Bootstrap's icons in WYSIWYG mode. This is the most flexible solution to operate Bootstrap in TinyMCE, but and the most simple: it already has a plugin for quick and codeless including Bootstrap into your WYSIWYG editor.

Grid rows and blocks, etc: all will be available to you after you install this bundle.

This bundle contains a number of plugins:

  • Bootstrap Include CSS/JS (Helps you to include (attach) Bootstrap's styles to your TinyMCE's document. Lets ability to see all blocks and elements as they will be shown on the site)
  • Bootstrap Block Configuration (Configure existing grid structure by selecting blocks and configuring their sizes and visibility options with help of the dialog)
Editor42 logo Editor42
TinyMCE logo TinyMCE
CKEditor 4 logo CKEditor 4
TinyMCE 5 logo TinyMCE 5
TinyMCE 4 logo TinyMCE 4

Install Bootstrap Tools plugin in Editor42

Download Bootstrap Tools
ZIP archive of Bootstrap Tools for Editor42
Self-hosted Editor42
Editor42 from CDN

Install the plugin to Editor42 hosted on your server

  1. Copy BootstrapTools directory to editor42/plugins/.
  2. Edit Editor42 config and add BootstrapTools to plugins parameter.

All the buttons this plugin will add to your toolbar automatically.

Example

Here you can see sample Editor42 initialization code with config inside it:

editor42.init({
    selector: "#editor",
    plugins: "BootstrapTools",

    // apiKey: "...",
    // Get your own key in the Dashboard: https://n1ed.com/dashboard
});

Install the plugin to Editor42 loaded from CDN

  1. Copy BootstrapTools directory somewhere on your server where it can be accessible by a link.
  2. Specify the location of just copied Bootstrap Tools plugin adding key-value pair in external_plugins Editor42 config parameter.
  3. Edit Editor42 config and add BootstrapTools to plugins parameter.

All the buttons this plugin will add to your toolbar automatically.

Example

Here you can see sample initialization code of Editor42 loaded from CDN with config inside it:

editor42.init({
    selector: "#editor",
    plugins: "BootstrapTools",
    external_plugins: {
        "BootstrapTools": "http://example.com/public/BootstrapTools/plugin.min.js",
    },

    // apiKey: "...",
    // Get your own key in the Dashboard: https://n1ed.com/dashboard
});

Bootstrap Tools comes as a part of N1ED. Read the official installation manual on developer website to know more.

Install Bootstrap Tools plugin in TinyMCE

Download Bootstrap Tools
ZIP archive of Bootstrap Tools for TinyMCE
Self-hosted TinyMCE
Cloud TinyMCE

Install the plugin to TinyMCE hosted on your server

  1. Copy BootstrapTools directory to tinymce/plugins/.
  2. Edit TinyMCE config and add BootstrapTools to plugins parameter.

All the buttons this plugin will add to your toolbar automatically.

Example

Here you can see sample TinyMCE initialization code with config inside it:

tinymce.init({
    selector: "#editor",
    plugins: "BootstrapTools",

    // apiKey: "...",
    // Get your own key in the Dashboard: https://n1ed.com/dashboard
});

Install the plugin to cloud edition of TinyMCE

  1. Copy BootstrapTools directory somewhere on your server where it can be accessible by a link.
  2. Specify the location of just copied Bootstrap Tools plugin adding key-value pair in external_plugins TinyMCE config parameter.
  3. Edit TinyMCE config and add BootstrapTools to plugins parameter.

All the buttons this plugin will add to your toolbar automatically.

Example

Here you can see sample cloud TinyMCE initialization code with config inside it:

tinymce.init({
    selector: "#editor",
    plugins: "BootstrapTools",
    external_plugins: {
        "BootstrapTools": "http://example.com/public/BootstrapTools/plugin.min.js",
    },

    // apiKey: "...",
    // Get your own key in the Dashboard: https://n1ed.com/dashboard
});

Bootstrap Tools comes as a part of N1ED. Read the official installation manual on developer website to know more.

Install Bootstrap Tools plugin in CKEditor 4

Download Bootstrap Tools
ZIP archive of Bootstrap Tools for CKEditor 4

Then do these simple steps:

  1. From the archive, copy plugins/BootstrapTools/ to ckeditor/plugins/BootstrapTools/, and its skin skins/n1theme/ to ckeditor/skins/n1theme/.
  2. Edit CKEditor config: add BootstrapTools to extraPlugins parameter and switch the skin to n1theme.

All the buttons this plugin will add to your toolbar automatically.

Using config file
Using initialization script

If you prefer to edit config.js of CKEditor, or your CKEditor is initialized in some non-editable part of your CMS, make these changes there:

CKEDITOR.editorConfig = function(config) {
    config.extraPlugins = "BootstrapTools";
    config.skin = "n1theme";                   // N1ED's own theme for CKEditor
    config.allowedContent = true;              // keep the classes and attributes N1ED writes
    config.removePlugins = "iframe,magicline"; // N1ED has better support of this
    config.versionCheck = false;               // skip its upgrade notice of CKEditor itself

    // config.apiKey = "...";
    // Get your own key in the Dashboard: https://n1ed.com/dashboard
};

Some CMSs do not use config.js and let you edit only the CKEditor initialization script. Make these changes there:

CKEDITOR.replace("editorId", {
    extraPlugins: "BootstrapTools",
    skin: "n1theme",                   // N1ED's own theme for CKEditor
    allowedContent: true,              // keep the classes and attributes N1ED writes
    removePlugins: "iframe,magicline", // N1ED has better support of this
    versionCheck: false,               // skip its upgrade notice of CKEditor itself

    // apiKey: "...",
    // Get your own key in the Dashboard: https://n1ed.com/dashboard
});

Bootstrap Tools comes as a part of N1ED. Read the official installation manual on developer website to know more.

Install Bootstrap Tools plugin in TinyMCE 5

Download Bootstrap Tools
ZIP archive of Bootstrap Tools for TinyMCE 5
Self-hosted TinyMCE 5
Cloud TinyMCE 5

Install the plugin to TinyMCE 5 hosted on your server

  1. Copy BootstrapTools directory to tinymce/plugins/.
  2. Edit TinyMCE config and add BootstrapTools to plugins parameter.

All the buttons this plugin will add to your toolbar automatically.

Example

Here you can see sample TinyMCE initialization code with config inside it:

tinymce.init({
    selector: "#editor",
    plugins: "BootstrapTools",

    // apiKey: "...",
    // Get your own key in the Dashboard: https://n1ed.com/dashboard
});

Install the plugin to cloud edition of TinyMCE 5

  1. Copy BootstrapTools directory somewhere on your server where it can be accessible by a link.
  2. Specify the location of just copied Bootstrap Tools plugin adding key-value pair in external_plugins TinyMCE config parameter.
  3. Edit TinyMCE config and add BootstrapTools to plugins parameter.

All the buttons this plugin will add to your toolbar automatically.

Example

Here you can see sample cloud TinyMCE initialization code with config inside it:

tinymce.init({
    selector: "#editor",
    plugins: "BootstrapTools",
    external_plugins: {
        "BootstrapTools": "http://example.com/public/BootstrapTools/plugin.min.js",
    },

    // apiKey: "...",
    // Get your own key in the Dashboard: https://n1ed.com/dashboard
});

Bootstrap Tools comes as a part of N1ED. Read the official installation manual on developer website to know more.

Install Bootstrap Tools plugin in TinyMCE 4

Download Bootstrap Tools
ZIP archive of Bootstrap Tools for TinyMCE 4

Then do these simple steps:

  1. Copy BootstrapTools directory to tinymce/plugins/.
  2. Edit TinyMCE config and add BootstrapTools to plugins parameter.

All the buttons this plugin will add to your toolbar automatically.

Example

Here you can see sample TinyMCE initialization code with config inside it:

tinymce.init({
    selector: "#editor",
    plugins: "BootstrapTools",

    // apiKey: "...",
    // Get your own key in the Dashboard: https://n1ed.com/dashboard
});

Bootstrap Tools comes as a part of N1ED. Read the official installation manual on developer website to know more.

Reviews

This plugin has the potential to be a great grid editor! I love its minimalist and clean design.

User icon
Christos Y.
Individual

Building a column structure by hand can seem a little complicated. I have used this add-on for a while though. Right now I prefer the Bootstrap Editor add-on.

User icon
José A.
Individual