Configuration

Common options

Technically there are two documents where you can embed your CSS/JS files:

Editor document. This is an area where you edit your page (content area of CKEditor or TinyMCE).
Global document. This is full the page you see in your browser, but excluding editor document.

Note that you can include CSS/JS into these two documents, but not to result content. Final HTML will be saved without links to these JS/CSS files.

If you use inline editing, editor document and global document are the same.

By default JS+ CKEditor & TinyMCE Include CSS/JS adds specified CSS or JS URLs into web editor document.
If you want to use the CSS/JS for both global and editor document at the same time please use includeCssToGlobalDoc and includeJsToGlobalDoc parameters.

framework: string
Default value: html
Available values: html, b3, b4, f5, f6, f6x
CSS framework to include. If you do not load Include add-on and do not set this parameter, all other Bootstrap/Foundation add-ons will not know about the mode they are used in. Also using this parametere will style your content document according to your CSS framework. html means pure HTML without frameworks, b3 - Bootstrap 3, b4 - Bootstrap 4, f5 - Foundation 5, f6 - Foundation 6 (legacy layout), f6x - Foundation 6 (XY Grid layout, "grid-x" horizontal rows).

css: string[]
Default value: []
Array of URLs to CSS stylesheets you need to include.

js: string[]
Default value: []
Array of URLs to JS files for including into document.

includeCssToGlobalDoc: boolean
Default value: true
Available values: true, false
If this flat is set to true the specified CSS files will be added into global document (whole page with the editor) too.

includeJsToGlobalDoc: boolean
Default value: true
Available values: true, false
If this flat is set to true the specified JavaScript files will be added into global document (whole page with the editor) too.

addClasses: string[]
Default value: []
List of classes to add to root element in the editor. In not inline mode of CKEditor/TinyMCE this means adding class to <body> element, in inline mode - adding classes to editing element. This options is very useful to add container or container-fluid classes when editing Bootstrap contents with container outside of not inline editor.

Bootstrap framework include options

For including Bootstrap you need to set framework option to b3 or b4 according to version of Bootstrap framework you use. Then options below will be available to you.

url: string
Available values:
By default Bootstrap files are loaded by this plugin with using official Bootstrap CDN. If external CDN can not be accessed from your network or you just want to specify local copy of Bootstrap, set URL of your Bootstrap folder in this option. For example you can set this key to http://your-website.com/location/of/bootstrap/.

includeTheme: boolean
Default value: true
Available values: true, false
By changing this parameter you can enable or disable including Bootstrap theme CSS file. The file will be used from folder specified in url parameter or from official Bootstrap CDN. For Bootstrap v. 3 only.

includeIeFix: boolean
Default value: true
Available values: true, false
If this option is enabled the plugin includes additional JavaScrip files of Bootstrap for old IE versions support. Due to these files are not included into the latest releases of Bootstrap library, they will be loaded always from CDN:
https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js and https://oss.maxcdn.com/respond/1.4.2/respond.min.js. For Bootstrap v. 3 only.

inContainer: boolean
Default value: true
Available values: true, false
If your page's content is wrapped by Bootstrap's container, use this option to wrap it in the <div class="container"> tag inside editable area of the editor.

includeJQuery: boolean
Default value: true
Available values: true, false
Bootstrap Include plugin can load JQuery required by some of compenents of Bootstrap framework. If you already have included JQuery library into your page turn off this feature. This library is loaded from CDN: //ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js

previewStyles: boolean
Default value: true
Available values: true, false
Set this option to false if you do not want to include preview styles to global document (be sure it already has Bootstrap connected!). If you set it to false without checking this you will have problems with Bootstrap styles in JS+ plugins dialogs.

useWet: boolean
Default value: false
Available values: true, false
Set Bootstrap Include add-on to WET mode. WET framework is the edition of Bootstrap used by Goverment of Canada. To fully support it please set this option to true. When WET support is enabled these files will be attached:

Always: css/theme.css, js/wet-boew.js instead of standard Bootstrap CSS & JS.
If jsplus_bootstrap_include_ie_fix is enabled: css/ie8-theme.css, js/ie8-wet-boew2.js

For Bootstrap v. 3 only

Foundation framework include options

In order to include Foundation into your page and/or content document please set framework parameter to f5 or f6 (depends of version of Foundation you use).

url: string
Available values:
By default Foundation files are loaded by this plugin with using official Foundation CDN. If external CDN can not be accessed from your network or you just want to specify local copy of Foundation, set URL of your Foundation folder in this option. For example you can set this key to //cdnjs.cloudflare.com/ajax/libs/foundation/5.5.0/

includeJQuery: boolean
Default value: true
Available values: true, false
Foundation Include plugin can load JQuery required by some of compenents of Foundation framework. If you already have included JQuery library into your page turn off this feature. This library is loaded from CDN: //ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js

previewStyles: boolean
Default value: true
Available values: true, false
Set this option to false if you do not want to include preview styles to global document (be sure it already has Foundation connected!). If you set it to false without checking this you will have problems with Foundation styles in JS+ plugins dialogs.

preventRemovingDivs: boolean
Default value: true
Available values: true, false
WYSIWYG editors (like CKEditor) unable to keep div tags after user removes the last symbol in it event you've set CKEDITOR.dtd.$removeEmpty.div = false;. This is a feature of 'contenteditable' implementation in browsers. To prevent tags to be striped out Include add-on has workaround inside (enabled by default). This is experemental feature, if you have any stranges in editing blocks, set it to false.