Foundation Tools
for CKEditor & TinyMCE
16 in 1
Includes products:
Foundation Tools logo
Get Foundation Tools inside
31 in 1
Foundation Bundle
$59
Foundation Tools logo
Get Foundation Tools inside
32 in 1
Foundation Full Bundle
$99

Foundation Include CSS/JS

Foundation Include CSS/JS logo

Helps you to embed Foundation styles to your document. Lets ability to set correct positions and sizes of all Foundation elements on the page.

ckeditor iconCKEditor 4 compatible
tinymce iconTinyMCE 4 compatible

This is the plugin for including Foundation framework to the CKEditor & TinyMCE. Just turn it on and all Foundation-specific styles will work for you inside CKEditor & TinyMCE. So after doing that you can create markup for your Foundation site in WYSIWYG manner. Foundation will be attached.

Plugin name: jsplus_foundation_include
Plugin contains no buttons.

Use these values in configuration of your editor to enable the plugin.

Always turn on Foundation Include plugin before using any other plugins from this toolset.

Configuration

For this plugin all parameters need to be passed inside this construction:

jsplus_foundation_include = {
    version: 6, // just an example
    ...
}
url: URL
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/.
version: Integer
Default value: 6
Available values: 5, 6
The version of Foundation to include. By default it will include Foundation v. 6, but the 5-th version is also supported.
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
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: false
Available values: true, false
If this flat is set to true the specified JS files will be added into global document (whole page with the editor) too.
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.
highlightIcons: Boolean
Default value: false
Available values: true, false
If this option is set to true, all Foundation icons on CKEditor or TinyMCE toolbar will be highlighted with blue color.