Include CSS & JS logo

Include CSS & JS plugin

Include CSS and JS inside WYSIWYG editor to support website theme
Include CSS JS screenshot
Include CSS JS screenshotInclude Bootstrap screenshotInclude Foundation screenshot
Include CSS & JS logo

The Include CSS/JS add-on gives you full control over including of stylesheets and JavaScript files in your document and the page the document is edited on.

The plugin is especially handy if you use Bootstrap or Foundation framework on your website: in this case you can painlessly make content of the document in CKEditor or in TinyMCE responsive and correctly marked up. Thanks to fine-tuning you can specify which components of Bootstrap/Foundation you want to apply. The add-on supports downloading from the official CDN as well as from your local installations of the framework.

If you use your own CSS framework or custom styles, you can manually specify a set of file to include. That is, you can adapt the edited document to the style of your website. It is much easier to edit pages when you see them exactly in the same fonts, sizes and colors as your main theme. This allows you to stop using the preview functions every minute, which is basically the main advantage of WYSIWYG by design.

Editor42 logo Editor42
TinyMCE logo TinyMCE
CKEditor 4 logo CKEditor 4
TinyMCE 5 logo TinyMCE 5
TinyMCE 4 logo TinyMCE 4

Install Include CSS & JS plugin in Editor42

Download Include CSS & JS
ZIP archive of Include CSS & JS for Editor42
Self-hosted Editor42
Editor42 from CDN

Install the plugin to Editor42 hosted on your server

  1. Copy IncludeCssJs directory to editor42/plugins/.
  2. Edit Editor42 config and add IncludeCssJs to plugins parameter.

All the buttons this plugin will add to your toolbar automatically.

Example

Here you can see sample Editor42 initialization code with config inside it:

editor42.init({
    selector: "#editor",
    plugins: "IncludeCssJs",

    // apiKey: "...",
    // Get your own key in the Dashboard: https://n1ed.com/dashboard
});

Install the plugin to Editor42 loaded from CDN

  1. Copy IncludeCssJs directory somewhere on your server where it can be accessible by a link.
  2. Specify the location of just copied Include CSS & JS plugin adding key-value pair in external_plugins Editor42 config parameter.
  3. Edit Editor42 config and add IncludeCssJs to plugins parameter.

All the buttons this plugin will add to your toolbar automatically.

Example

Here you can see sample initialization code of Editor42 loaded from CDN with config inside it:

editor42.init({
    selector: "#editor",
    plugins: "IncludeCssJs",
    external_plugins: {
        "IncludeCssJs": "http://example.com/public/IncludeCssJs/plugin.min.js",
    },

    // apiKey: "...",
    // Get your own key in the Dashboard: https://n1ed.com/dashboard
});

Include CSS & JS comes as a part of N1ED. Read the official installation manual on developer website to know more.

Install Include CSS & JS plugin in TinyMCE

Download Include CSS & JS
ZIP archive of Include CSS & JS for TinyMCE
Self-hosted TinyMCE
Cloud TinyMCE

Install the plugin to TinyMCE hosted on your server

  1. Copy IncludeCssJs directory to tinymce/plugins/.
  2. Edit TinyMCE config and add IncludeCssJs to plugins parameter.

All the buttons this plugin will add to your toolbar automatically.

Example

Here you can see sample TinyMCE initialization code with config inside it:

tinymce.init({
    selector: "#editor",
    plugins: "IncludeCssJs",

    // apiKey: "...",
    // Get your own key in the Dashboard: https://n1ed.com/dashboard
});

Install the plugin to cloud edition of TinyMCE

  1. Copy IncludeCssJs directory somewhere on your server where it can be accessible by a link.
  2. Specify the location of just copied Include CSS & JS plugin adding key-value pair in external_plugins TinyMCE config parameter.
  3. Edit TinyMCE config and add IncludeCssJs to plugins parameter.

All the buttons this plugin will add to your toolbar automatically.

Example

Here you can see sample cloud TinyMCE initialization code with config inside it:

tinymce.init({
    selector: "#editor",
    plugins: "IncludeCssJs",
    external_plugins: {
        "IncludeCssJs": "http://example.com/public/IncludeCssJs/plugin.min.js",
    },

    // apiKey: "...",
    // Get your own key in the Dashboard: https://n1ed.com/dashboard
});

Include CSS & JS comes as a part of N1ED. Read the official installation manual on developer website to know more.

Install Include CSS & JS plugin in CKEditor 4

Download Include CSS & JS
ZIP archive of Include CSS & JS for CKEditor 4

Then do these simple steps:

  1. From the archive, copy plugins/IncludeCssJs/ to ckeditor/plugins/IncludeCssJs/, and its skin skins/n1theme/ to ckeditor/skins/n1theme/.
  2. Edit CKEditor config: add IncludeCssJs to extraPlugins parameter and switch the skin to n1theme.

All the buttons this plugin will add to your toolbar automatically.

Using config file
Using initialization script

If you prefer to edit config.js of CKEditor, or your CKEditor is initialized in some non-editable part of your CMS, make these changes there:

CKEDITOR.editorConfig = function(config) {
    config.extraPlugins = "IncludeCssJs";
    config.skin = "n1theme";                   // N1ED's own theme for CKEditor
    config.allowedContent = true;              // keep the classes and attributes N1ED writes
    config.removePlugins = "iframe,magicline"; // N1ED has better support of this
    config.versionCheck = false;               // skip its upgrade notice of CKEditor itself

    // config.apiKey = "...";
    // Get your own key in the Dashboard: https://n1ed.com/dashboard
};

Some CMSs do not use config.js and let you edit only the CKEditor initialization script. Make these changes there:

CKEDITOR.replace("editorId", {
    extraPlugins: "IncludeCssJs",
    skin: "n1theme",                   // N1ED's own theme for CKEditor
    allowedContent: true,              // keep the classes and attributes N1ED writes
    removePlugins: "iframe,magicline", // N1ED has better support of this
    versionCheck: false,               // skip its upgrade notice of CKEditor itself

    // apiKey: "...",
    // Get your own key in the Dashboard: https://n1ed.com/dashboard
});

Include CSS & JS comes as a part of N1ED. Read the official installation manual on developer website to know more.

Install Include CSS & JS plugin in TinyMCE 5

Download Include CSS & JS
ZIP archive of Include CSS & JS for TinyMCE 5
Self-hosted TinyMCE 5
Cloud TinyMCE 5

Install the plugin to TinyMCE 5 hosted on your server

  1. Copy IncludeCssJs directory to tinymce/plugins/.
  2. Edit TinyMCE config and add IncludeCssJs to plugins parameter.

All the buttons this plugin will add to your toolbar automatically.

Example

Here you can see sample TinyMCE initialization code with config inside it:

tinymce.init({
    selector: "#editor",
    plugins: "IncludeCssJs",

    // apiKey: "...",
    // Get your own key in the Dashboard: https://n1ed.com/dashboard
});

Install the plugin to cloud edition of TinyMCE 5

  1. Copy IncludeCssJs directory somewhere on your server where it can be accessible by a link.
  2. Specify the location of just copied Include CSS & JS plugin adding key-value pair in external_plugins TinyMCE config parameter.
  3. Edit TinyMCE config and add IncludeCssJs to plugins parameter.

All the buttons this plugin will add to your toolbar automatically.

Example

Here you can see sample cloud TinyMCE initialization code with config inside it:

tinymce.init({
    selector: "#editor",
    plugins: "IncludeCssJs",
    external_plugins: {
        "IncludeCssJs": "http://example.com/public/IncludeCssJs/plugin.min.js",
    },

    // apiKey: "...",
    // Get your own key in the Dashboard: https://n1ed.com/dashboard
});

Include CSS & JS comes as a part of N1ED. Read the official installation manual on developer website to know more.

Install Include CSS & JS plugin in TinyMCE 4

Download Include CSS & JS
ZIP archive of Include CSS & JS for TinyMCE 4

Then do these simple steps:

  1. Copy IncludeCssJs directory to tinymce/plugins/.
  2. Edit TinyMCE config and add IncludeCssJs to plugins parameter.

All the buttons this plugin will add to your toolbar automatically.

Example

Here you can see sample TinyMCE initialization code with config inside it:

tinymce.init({
    selector: "#editor",
    plugins: "IncludeCssJs",

    // apiKey: "...",
    // Get your own key in the Dashboard: https://n1ed.com/dashboard
});

Include CSS & JS comes as a part of N1ED. Read the official installation manual on developer website to know more.

Reviews

CKEditor cuts some of the code I paste into Source dialog particularly javascript even though I disable Advanced Content Filter in config.js with: "config.allowedContent = true".

And I found this addon and the problem was solved. I just include js to my CKEditor config and js and css are applied to the page it is being edited.

User icon
Dipak K.
Freelancer