CKEditor 5 demo with blocks and a file manager (beta)

When to use

Your site runs CKEditor 5 and you have an N1ED API key. On CKEditor 5 the key gives you the blocks: Bootstrap layouts with a responsive grid, edited right in the content and saved as templates for reuse, with the Flmngr file manager for their images. The other N1ED features come to CKEditor 5 later, so this is a beta.

How it works

The page loads CKEditor 5 from the cloud with N1ED built in, as CKEditor5WithN1ED: the blocks plugin and the file manager one. It passes your N1ED key as apiKey, and the key loads both, set up in the Dashboard. Click a block to edit its grid in the panel under the content, add a block with a + on the left, or pick an image with the file manager buttons on the toolbar. A selected image has them in its own toolbar too, to replace or edit it.

How to start using

Install the N1ED plugin for CKEditor 5 for that: the two plugins from npm into your own build, a ready-to-use CKEditor 5 bundle with both included, or the CDN script this demo uses.

Download ZIPOpen in CodePlay

Live Demo

JavaScript

// On CKEditor 5, an N1ED key gives you the blocks with a responsive grid and the Flmngr file manager.
// The other N1ED features come to CKEditor 5 later.
CKEditor5WithN1ED.create(document.querySelector("#editor"), {
  apiKey: "N1ED24RR1234123412341234"
}).catch(error => {
  console.error("There was a problem initializing the editor.", error);
});

HTML

<div class="wrap">
  <textarea id="editor">
<div class="container-fluid">
  <div class="container">
    <div class="row">
      <div class="col-12 col-lg-6 py-3">
        <h2>Start building pages now</h2>
        <p>A complete and customizable solution to building the website of your dreams.</p>
        <p><a href="https://example.com" class="btn btn-primary">Let's get started</a></p>
      </div>
      <div class="col-12 col-lg-6 py-3">
        <img class="img-fluid" src="https://flmngr.democdn.com/files/default/Illustrations/people.png" alt="Let's get started">
      </div>
    </div>
  </div>
</div>
<div class="container-fluid">
  <div class="container">
    <div class="row">
      <div class="col-12 col-lg-4 py-3">
        <p><img src="https://flmngr.democdn.com/files/coffee/icons/48/folder_open.png" alt="" width="48" height="48"></p>
        <h4>File Manager</h4>
        <p>Must-have add-on if you create content that's heavy on images and embedded files.</p>
      </div>
      <div class="col-12 col-lg-4 py-3">
        <p><img src="https://flmngr.democdn.com/files/coffee/icons/48/view_quilt.png" alt="" width="48" height="48"></p>
        <h4>Bootstrap Editor</h4>
        <p>A responsive layout manager built with the world's most popular component library.</p>
      </div>
      <div class="col-12 col-lg-4 py-3">
        <p><img src="https://flmngr.democdn.com/files/coffee/icons/48/photo_filter.png" alt="" width="48" height="48"></p>
        <h4>Image Editor</h4>
        <p>All the standard instruments to fine-tune raster images before you publish them on your website.</p>
      </div>
    </div>
  </div>
</div>
  </textarea>
</div>

<!--
  CKEditor 5 with N1ED built in, loaded from the cloud: the blocks plugin and the file manager one.
  The API key in script.js (a shared demo key - get your own at https://n1ed.com/dashboard) brings
  N1ED's blocks and grid and its file manager, set up for that key in the Dashboard.
-->
<script src="https://cloud.n1ed.com/v/latest/sdk/ckeditor5-n1ed.js"></script>

SASS

.wrap {
  max-width: 1650px;
  margin: 0 auto;
  padding-left: 40px;
}