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.

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 //maxcdn.bootstrapcdn.com/bootstrap/3.2.0/

The default base URL for Foundation is //cdnjs.cloudflare.com/ajax/libs/foundation/5.5.0/

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) or in TinyMCE initialization script:

TinyMCE
CKEditor
config.jsplus_bootstrap_include = {
    url: 'http://your-website.com/path/to/bootstrap/'
}jsplus_bootstrap_include: {
    url: 'http://your-website.com/path/to/bootstrap/'
}

Changing Foundation URL:

TinyMCE
CKEditor
config.jsplus_foundation_include = {
    url: 'http://your-website.com/path/to/foundation/'
}jsplus_foundation_include: {
    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). 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 options below.

In Bootstrap:

TinyMCE
CKEditor
config.jsplus_bootstrap_include = {
    previewStyles: false
}jsplus_bootstrap_include: {
    previewStyles: false
}

In Foundation

TinyMCE
CKEditor
config.jsplus_foundation_include = {
    previewStyles: false
}jsplus_foundation_include : {
    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

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.

In Bootstrap:

TinyMCE
CKEditor
config.jsplus_bootstrap_include = {
    includeCssToGlobalDoc: true,
    includeJsToGlobalDoc: true
}jsplus_bootstrap_include: {
    includeCssToGlobalDoc: true,
    includeJsToGlobalDoc: true
}

In Foundation:

TinyMCE
CKEditor
config.jsplus_foundation_include = {
    includeCssToGlobalDoc: true,
    includeJsToGlobalDoc: true
}jsplus_foundation_include: {
    includeCssToGlobalDoc: true,
    includeJsToGlobalDoc: true
}