Bootstrap Editor
for JS, CKEditor, TinyMCE
Overview Plugins
CKEditor add-on TinyMCE add-on Drupal 8 module WordPress plugin Joomla extension JavaScript library
Installing CKEditor to WordPress Installing CKEditor to Joomla Installing CKEditor to Drupal 7 How to install CKEditor plugin from CDN How to install a plugin to CKEditor How to adjust CKEditor settings
Include Bootstrap to CKEditor/TinyMCE CKEditor config FAQ CKEditor debugging manual Adding CKEditor add-ons to CS Cart
Bootstrap Editor logo
Get Bootstrap Editor inside
33 in 1
Bootstrap Full Bundle

Including Bootstrap/Foundation framework to CKEditor and TinyMCE

When you want to use Bootstrap or Foundation CSS framework with CKEditor or TinyMCE you install DOKSoft 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.

This is article for web developers only, if you just need to install and use add-ons you are not to worry: the Tools will do their work for correct including CSS and JS files automatically.

Changing URL of Bootstrap/Foundation

All Bootstrap and Foundation add-ons are created to load the version of CSS framework from CDN.

The default base URL for Bootstrap is //

The default base URL for Foundation is //

They are official CDNs and you can use them. 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):

config.jsplus_bootstrap_include_url = '';

Changing Foundation URL in CKEditor (in config.js):

config.jsplus_foundation_include_url = '';

Changing Bootstrap URL in TinyMCE (in initialization script):

jsplus_bootstrap_include_url: ''

Changing Foundation URL in TinyMCE (in initialization script):

jsplus_foundation_include_url: ''

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.


WYSIWYG editor document is placed into separate container (iframe). DOKSoft 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. DOKSoft add-ons will avoid this situation since new version (May 2015) by including to top document specially build styles which will affect to DOKSoft dialogs only.

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

CKEditor Bootstrap (in config.js):

config.jsplus_bootstrap_include_preview_styles = false;

CKEditor Foundation (in config.js):

config.jsplus_foundation_include_preview_styles = false;

TinyMCE Bootstrap (in initialization script):

jsplus_bootstrap_include_preview_styles: false

TinyMCE Foundation (in initialization script):

jsplus_foundation_include_preview_styles: 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

By default if you are not using inline version of CKEditor or TinyMCE, the framework will be included to editor document only. In some cases you need to style full your page with Bootstrap/Foundation and maybe even to include JS scripts to there. Of course you can do it by changing your page but our add-ons has a feature to do it in run-time.

See the options for CKEditor and TinyMCE for all these frameworks:

CKEditor Bootstrap (in config.js):

config.jsplus_bootstrap_include_css_to_global_doc = true;
config.jsplus_bootstrap_include_js_to_global_doc = true;

CKEditor Foundation (in config.js):

config.jsplus_foundation_include_css_to_global_doc = true;
config.jsplus_foundation_include_js_to_global_doc = true;

TinyMCE Bootstrap (in initialization script):

jsplus_bootstrap_include_css_to_global_doc: true,
jsplus_bootstrap_include_js_to_global_doc: true

TinyMCE Foundation (in initialization script):

jsplus_foundation_include_css_to_global_doc: true,
jsplus_foundation_include_js_to_global_doc: true