Including Bootstrap/Foundation framework to CKEditor and TinyMCE

When you want to use Bootstrap or Foundation CSS framework with CKEditor or TinyMCE you install JS+ add-ons set for your WYSIWYG editor.

You do not have any problems with it but sometimes you need to understand how they work and tweak it to add your website some more speed or compatibility with other components.

Setting framework to load

By default Include CSS/JS add-on does not include CSS frameworks like Bootstrap and Foundation. Without configuring framework parameter it will work in pure HTML mode.

So let us change it:

config.jsplusInclude = {
    framework: "b3" // or "b4", "f5" or "f6"
}jsplusInclude: {
    framework: "b3" // or "b4", "f5" or "f6"
}

Not all CSS and JS files of your framework will be included to content document and to your page automoatically on CKEditor or TinyMCE load.

Changing URL of Bootstrap/Foundation

Bootstrap or Foundation is loaded from CDN by default. But if you can link your website with your own instance of framework files. In this case you need to change URL of it:

Changing Bootstrap URL in CKEditor (in config.js) or in TinyMCE initialization script:

config.jsplusInclude = {
    framework: "b3",
    url: 'http://your-website.com/path/to/bootstrap/'
}jsplusInclude: {
    framework: "b3",
    url: 'http://your-website.com/path/to/bootstrap/'
}

Changing Foundation URL:

config.jsplusInclude = {
    framework: "f6",
    url: 'http://your-website.com/path/to/foundation/'
}jsplusInclude: {
    framework: "f6",
    url: 'http://your-website.com/path/to/foundation/'
}

The URL must follow to root folder with Bootstrap or Foundation files. All other files names will be substituted by Include plugin itself.

You can also use alternative CDN URLs if you want, there are no restrictions here.

Tweaking

WYSIWYG editor document is placed into separate container (iframe). JS+ Include add-on which is included into Foundation Tools and Bootstrap Tools will attach framework CSS and JS files. Also we need to include the same files and to base document too because CKEditor and TinyMCE dialogs context is outside editable document. This is required to show you previews of buttons and other widgets you create.

Some CMS like WordPress can have Bootstrap/Foundation theme for website but do not have they included to your control panel. The problem is that inserting framework CSS will change displaying of existing blocks. JS+ add-ons will avoid this situation since new version (May 2015) by including to top document specially build styles which will affect to JS+ dialogs only.

If your CMS already have Bootstrap or Foundation support you can use this options to disable including them inside options below.

In Bootstrap:

config.jsplusInclude = {
    framework: "b3",
    previewStyles: false
}jsplusInclude: {
    framework: "b3",
    previewStyles: false
}

In Foundation

config.jsplusInclude = {
    framework: "f6",
    previewStyles: false
}jsplusInclude : {
    framework: "f6",
    previewStyles: false
}

This has one "pro" more: dialogs will show you previews with using you custom framework theme which is possibly used by you.

Note that this will work only for not inline version of editor due to inline editor's document is equal to top (browser) document so in this case you theme must support Bootstrap/Foundation.

Including CSS and JS to the top document

In some cases you need to style full your page with Bootstrap/Foundation and maybe even to include JS scripts to there. You can do it by configuring add-ons.

Enabling including CSS & JS to global document

In Bootstrap:

config.jsplusInclude = {
    framework: "b3",
    includeCssToGlobalDoc: true,
    includeJsToGlobalDoc: true
}jsplusInclude: {
    framework: "b3",
    includeCssToGlobalDoc: true,
    includeJsToGlobalDoc: true
}

In Foundation:

config.jsplusInclude = {
    framework: "f6",
    includeCssToGlobalDoc: true,
    includeJsToGlobalDoc: true
}jsplusInclude: {
    framework: "f6",
    includeCssToGlobalDoc: true,
    includeJsToGlobalDoc: true
}

Disabling including CSS & JS to global document

If you already include Bootstrap/Foundation into you page with help of another tool or by definition in HTML template, auto including by JS+ add-ons may break styles on the page. Use parameters below to prevent it:

In Bootstrap:

config.jsplusInclude = {
    framework: "b3",
    includeCssToGlobalDoc: false,
    includeJsToGlobalDoc: false
}jsplusInclude: {
    framework: "b3",
    includeCssToGlobalDoc: false,
    includeJsToGlobalDoc: false
}

In Foundation:

config.jsplusInclude = {
    framework: "f6",
    includeCssToGlobalDoc: false,
    includeJsToGlobalDoc: false
}jsplusInclude: {
    framework: "f6",
    includeCssToGlobalDoc: false,
    includeJsToGlobalDoc: false
}

But note, you still require to use Bootstrap/Foundation Include add-on: do not disable it. It will load Bootstrap into content document inside your editor and has a set of shared features for other Bootstrap/Foundation plugins.