Install N1ED plugin for CKEditor

The quickest way to enable Bootstrap (styles, grid, blocks, and widgets) in CKEditor 4 is to install the N1ED plugin. The file manager, image editor, and other handy tools are also included in this add-on, together with N1ED's own n1theme skin.

• Download Plugin

  Get the N1ED plugin for installing into your existing CKEditor 4 editor.

  Note: using the latest free version of CKEditor (4.22.1) is recommended.

  Download Plugin

• Unpack

  Unpack the archive with the plugin into the CKEditor plugins/ folder; the skin goes next to it:

  ckeditor/
      plugins/
          N1ED-editor/
              plugin.js
      skins/
          n1theme/
              ...

• Enable Plugin

  Enable the N1ED add-on in the config:

  config.js

  CKEDITOR.editorConfig = function(config) {
      config.extraPlugins = "N1ED-editor";
      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
  }

  Direct initialization

  CKEDITOR.replace("editorId", {
      extraPlugins: "N1ED-editor",
      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
  });

  Please avoid using spaces in extraPlugins if you have other plugins enabled. Use a comma only as the separator.

  The N1ED plugin is fully functional after this step. Next, you will need to link your file storage by installing the file manager backend on your server.

• Install backend

  Now you need to install the file manager server-side script on your server to enable the file manager in your editor. Follow the instructions provided in the link to complete the setup.

• Ready to Use

Configuration

Configure your N1ED CKEditor 4 installation in the Dashboard: choose the toolbar and widgets, link the file storage, set Bootstrap options and custom blocks, all without touching the code.

Dashboard

Examples

Live CodePlay examples for CKEditor 4 with the JS/CSS/HTML code provided.

• CKEditor 4 plugin: N1ED added to your own CKEditor 4