Install N1ED plugin for CKEditor 5

N1ED brings two of its components to CKEditor 5: the blocks with a responsive Bootstrap or Tailwind grid, and the Flmngr file manager with its image editor. Both run on your one N1ED API key and are set up in the same Dashboard as for TinyMCE and CKEditor 4. The other N1ED features will come to CKEditor 5 later.

Plugin

• Install NPM packages

  N1ED comes to CKEditor 5 as two plugins: Blk42 for the blocks and Flmngr for the files. Both are npm packages that are easy to add into your existing CKEditor 5 build project for further compilation.

  npm install --save-dev @edsdk/blk42-ckeditor5 @edsdk/flmngr-ckeditor5

• Include to build

  Add both plugins into your import section:

  import {
      ClassicEditor,
      Image,
      Essentials,
      Paragraph,
      Bold,
      Italic
  } from 'ckeditor5';
  import Blk42 from "@edsdk/blk42-ckeditor5";
  import Flmngr from "@edsdk/flmngr-ckeditor5";

  Then pass them to the plugins section of your ClassicEditor creation method call, put the three file manager buttons on the toolbar and set the API key. The key is one for both plugins:

  ClassicEditor.create(
      document.querySelector('#editor'), // your editor selector
      {
          plugins: [
              Essentials,
              Paragraph,
              Bold,
              Italic,
              Image, // the standard image plugin, the file manager needs it
              Blk42,
              Flmngr
          ],
          toolbar: [
              'bold',
              'italic',
              '|',
              'upload', // the three
              'flmngr', // buttons
              'imgpen'  // of Flmngr
          ],
          // apiKey: "...",
          // Get in the Dashboard: https://n1ed.com/dashboard
      }
  ).then( editor => {
      console.log(editor);
  } ).catch( error => {
      console.error(error.stack);
  } );

  No need for the file manager? Leave Flmngr and its buttons out: the blocks work without them.

• Build

  Build your CKEditor 5 project or your project with CKEditor 5 imported to apply the newly added plugins.

  If you see the file manager buttons on the toolbar and a new bottom toolbar of the editor, everything works fine.

• 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

CKEditor 5 Bundle

• Download

  Ready-to-Use CKEditor 5 bundle already contains both N1ED plugins precompiled and enabled, with the file manager buttons on the toolbar, and has support of Bootstrap or Tailwind layout from the scratch. Just download and use it, HTML sample included.

  Download CKEditor 5 Bundle

• Unpack

  The archive contains the compiled build and a ready-made sample page:

  build/
    ckeditor5-n1ed.js
    ckeditor5-n1ed.js.map
  sample/
    index.html
    styles.css

  Open sample/index.html right from your disk to see the editor running — no webserver needed. When you are ready to install it, copy build/ckeditor5-n1ed.js somewhere into your webserver public directory, for example:

  var/
    www/
      public/
        js/
          ckeditor5-n1ed.js

  The .map file is optional: it is what turns a minified stack trace back into readable line numbers if you ever need to report a problem.

• Attach to content box

  Add script link onto your page and initialize CKEditor 5 there attaching it to the textarea or some div with the content you want to edit.

      <script src="/js/ckeditor5-n1ed.js"></script>
      <script type="text/javascript">
          CKEditor5WithN1ED.create(
              document.querySelector('#editorId'),
              {
  
                  // apiKey: "...",
                  // Get in the Dashboard: https://n1ed.com/dashboard
  
              }
          );
      </script>

  Then install the file manager backend to link your file storage. No need for the file manager? Pass removePlugins: ['Flmngr'], and its buttons leave the toolbar too.

• Ready to Use

CDN

• Add the CDN Script

  Script snippet provides quick loading of CKEditor 5 with both N1ED plugins enabled and preconfigured, always the latest version.

  <!-- Load CKEditor 5 with N1ED -->
  <script src="https://cloud.n1ed.com/v/latest/sdk/ckeditor5-n1ed.js"></script>
  
  <!-- Your editor placeholder -->
  <div id="editorId"></div>
  
  <script type="text/javascript">
      CKEditor5WithN1ED.create(
          document.querySelector('#editorId'),
          {
              // apiKey: "...",
              // Get in the Dashboard: https://n1ed.com/dashboard
          }
      );
  </script>

  Then install the file manager backend to link your file storage.

• Ready to Use

Configuration

Configure the blocks and the file manager of your key in the Dashboard: link the file storage, set the Bootstrap or Tailwind options and your own blocks, all without touching the code.

Dashboard

Examples

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

• CKEditor 5 plugin (beta): the blocks and the file manager in CKEditor 5