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
: stringDefault 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
: booleanDefault 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
: booleanDefault 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
: stringAvailable 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
: booleanDefault 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
: booleanDefault 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
: booleanDefault 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
: booleanDefault 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
: booleanDefault 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
: booleanDefault 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
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
: stringAvailable 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
: booleanDefault 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
: booleanDefault 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
: booleanDefault 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
.