CKEditor 4 demo with block editor, file manager and image editor

When to use

You have CKEditor 4 and your authors need more than a text box: Bootstrap blocks and a responsive grid, image and YouTube widgets, a file manager linked to your storage, an image editor and AI writing tools. N1ED adds all of that to the CKEditor 4 you host as one plugin with its own skin (see the CKEditor 4 installation), and this page runs it live on a demo API key.

How it works

The page loads a stock CKEditor 4.20 with N1ED unpacked into it: the N1ED-editor plugin and the n1theme skin. The config enables both, keeps allowedContent: true so that CKEditor's content filter does not strip the Bootstrap classes of the blocks, and passes your API key; the toolbar, widgets and file storage come from the Dashboard. Edit the content, insert a block, open the file manager, then take the code and use your own key.

How to start using

Install the N1ED plugin for CKEditor 4 for that.

Download ZIPOpen in CodePlay

Live Demo

JavaScript

// Your own CKEditor 4 (here 4.20, self-hosted) with N1ED unpacked into it:
//   ckeditor/plugins/N1ED-editor/plugin.js
//   ckeditor/skins/n1theme/
// The API key brings the configuration you set in the Dashboard.
CKEDITOR.replace("demo", {
  extraPlugins: "N1ED-editor",
  skin: "n1theme",
  allowedContent: true,
  removePlugins: "iframe,magicline",
  versionCheck: false,
  height: 500,
  apiKey: "N1ED24RR1234123412341234"
});

HTML

<div class="wrap">
  <textarea id="demo">
<div class="container-fluid">
    <div class="container">
        <div class="row">
            <div class="align-items-center col-12 col-lg-6" style="display:  flex;">
                <div data-n1ed-col-align="center" style="width: 100%">
                    <h2><strong>Start building pages now</strong></h2>
                    <p>
                        A complete and customizable solution to building the website of your dreams.
                    </p>
                    <p>
                        <a href="http://example.com" class="btn btn-primary rounded-pill mt-3 px-4 py-2" role="button" style="letter-spacing: 0.8px;">Let's get started</a>
                    </p>
                </div>
            </div>
            <div class="col-12 col-lg-6">
                <img src="https://flmngr.democdn.com/files/default/Illustrations/people.png" alt="Let's get started" class="img-fluid"/>
            </div>
        </div>
    </div>
</div>
<div class="container-fluid">
    <div class="container">
        <div class="row">
            <div class="col-12 col-lg-4 py-3">
                <h4><strong><img class="img-fluid" style="width:1.33em;height:1.33em" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1NzYgNTEyIiBmaWxsPSIjMDA3ZmZmIj48cGF0aCBkPSJNNTI3LjkgMjI0SDQ4MHYtNDhjMC0yNi41LTIxLjUtNDgtNDgtNDhIMjcybC02NC02NEg0OEMyMS41IDY0IDAgODUuNSAwIDExMnYyODhjMCAyNi41IDIxLjUgNDggNDggNDhoNDAwYzE2LjUgMCAzMS45LTguNSA0MC43LTIyLjZsNzkuOS0xMjhjMjAtMzEuOS0zLTczLjQtNDAuNy03My40ek00OCAxMThjMC0zLjMgMi43LTYgNi02aDEzNC4xbDY0IDY0SDQyNmMzLjMgMCA2IDIuNyA2IDZ2NDJIMTUyYy0xNi44IDAtMzIuNCA4LjgtNDEuMSAyMy4yTDQ4IDM1MS40em00MDAgMjgySDcybDc3LjItMTI4SDUyOHoiPjwvcGF0aD48L3N2Zz4=" data-fa-icon="folder-open" data-fa-style="far" data-fa-svg="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1NzYgNTEyIiBmaWxsPSIjMDAwMDAwIj48cGF0aCBkPSJNNTI3LjkgMjI0SDQ4MHYtNDhjMC0yNi41LTIxLjUtNDgtNDgtNDhIMjcybC02NC02NEg0OEMyMS41IDY0IDAgODUuNSAwIDExMnYyODhjMCAyNi41IDIxLjUgNDggNDggNDhoNDAwYzE2LjUgMCAzMS45LTguNSA0MC43LTIyLjZsNzkuOS0xMjhjMjAtMzEuOS0zLTczLjQtNDAuNy03My40ek00OCAxMThjMC0zLjMgMi43LTYgNi02aDEzNC4xbDY0IDY0SDQyNmMzLjMgMCA2IDIuNyA2IDZ2NDJIMTUyYy0xNi44IDAtMzIuNCA4LjgtNDEuMSAyMy4yTDQ4IDM1MS40em00MDAgMjgySDcybDc3LjItMTI4SDUyOHoiPjwvcGF0aD48L3N2Zz4=" data-mce-style="width:1.33em;height:1.33em"></strong></h4>
                <h4><strong>File Manager</strong></h4>
                <p>Must-have add-on if you create content&nbsp; that's heavy on images and embedded files.</p>
            </div>
            <div class="col-12 col-lg-4 py-3">
                <h4><strong><img class="img-fluid" style="width:1.33em;height:1.33em" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBmaWxsPSIjMDA3ZmZmIj48cGF0aCBkPSJNNTEyIDI1Ni4wMWMwLTEyLjg2LTcuNTMtMjQuNDItMTkuMTItMjkuNDRsLTc5LjY5LTM0LjU4IDc5LjY2LTM0LjU3YzExLjYyLTUuMDMgMTkuMTYtMTYuNTkgMTkuMTYtMjkuNDRzLTcuNTMtMjQuNDEtMTkuMTItMjkuNDJMMjc0LjY2IDMuODljLTExLjg0LTUuMTctMjUuNDQtNS4xOS0zNy4yOC0uMDJMMTkuMTYgOTguNTVDNy41MyAxMDMuNTggMCAxMTUuMTQgMCAxMjcuOTlzNy41MyAyNC40MSAxOS4xMiAyOS40Mmw3OS43IDM0LjU4LTc5LjY3IDM0LjU3QzcuNTMgMjMxLjU4IDAgMjQzLjE1IDAgMjU2LjAxYzAgMTIuODQgNy41MyAyNC40MSAxOS4xMiAyOS40Mkw5OC44MSAzMjBsLTc5LjY1IDM0LjU2QzcuNTMgMzU5LjU5IDAgMzcxLjE1IDAgMzg0LjAxYzAgMTIuODQgNy41MyAyNC40MSAxOS4xMiAyOS40MmwyMTguMjggOTQuNjlhNDYuNDg4IDQ2LjQ4OCAwIDAgMCAxOC41OSAzLjg4YzYuMzQtLjAyIDEyLjY5LTEuMyAxOC41OS0zLjg2bDIxOC4yNS05NC42OWMxMS42Mi01LjAzIDE5LjE2LTE2LjU5IDE5LjE2LTI5LjQ0IDAtMTIuODYtNy41My0yNC40Mi0xOS4xMi0yOS40NEw0MTMuMTkgMzIwbDc5LjY1LTM0LjU2YzExLjYzLTUuMDMgMTkuMTYtMTYuNTkgMTkuMTYtMjkuNDN6TTI1NS40NyA0Ny44OWwuMDMuMDJoLS4wNmwuMDMtLjAyem0uNTMuMjNsMTg0LjE2IDc5Ljg5LTE4My42MyA4MC4wOS0xODQuNjItODAuMTFMMjU2IDQ4LjEyem0xODQuMTkgMzM1LjkybC0xODMuNjYgODAuMDdMNzEuOTEgMzg0bDg3LjIxLTM3Ljg0IDc4LjI5IDMzLjk2QTQ2LjQ4OCA0Ni40ODggMCAwIDAgMjU2IDM4NGM2LjM0LS4wMiAxMi42OS0xLjMgMTguNTktMy44Nmw3OC4yOS0zMy45NyA4Ny4zMSAzNy44N3pNMjU2LjUzIDMzNi4xTDcxLjkxIDI1NS45OWw4Ny4yMi0zNy44NCA3OC4yOCAzMy45NmE0Ni40ODggNDYuNDg4IDAgMCAwIDE4LjU5IDMuODhjNi4zNC0uMDIgMTIuNjktMS4zIDE4LjU5LTMuODZsNzguMjktMzMuOTcgODcuMzEgMzcuODgtMTgzLjY2IDgwLjA2eiI+PC9wYXRoPjwvc3ZnPg==" data-fa-icon="layer-group" data-fa-style="far" data-fa-svg="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBmaWxsPSIjMDAwMDAwIj48cGF0aCBkPSJNNTEyIDI1Ni4wMWMwLTEyLjg2LTcuNTMtMjQuNDItMTkuMTItMjkuNDRsLTc5LjY5LTM0LjU4IDc5LjY2LTM0LjU3YzExLjYyLTUuMDMgMTkuMTYtMTYuNTkgMTkuMTYtMjkuNDRzLTcuNTMtMjQuNDEtMTkuMTItMjkuNDJMMjc0LjY2IDMuODljLTExLjg0LTUuMTctMjUuNDQtNS4xOS0zNy4yOC0uMDJMMTkuMTYgOTguNTVDNy41MyAxMDMuNTggMCAxMTUuMTQgMCAxMjcuOTlzNy41MyAyNC40MSAxOS4xMiAyOS40Mmw3OS43IDM0LjU4LTc5LjY3IDM0LjU3QzcuNTMgMjMxLjU4IDAgMjQzLjE1IDAgMjU2LjAxYzAgMTIuODQgNy41MyAyNC40MSAxOS4xMiAyOS40Mkw5OC44MSAzMjBsLTc5LjY1IDM0LjU2QzcuNTMgMzU5LjU5IDAgMzcxLjE1IDAgMzg0LjAxYzAgMTIuODQgNy41MyAyNC40MSAxOS4xMiAyOS40MmwyMTguMjggOTQuNjlhNDYuNDg4IDQ2LjQ4OCAwIDAgMCAxOC41OSAzLjg4YzYuMzQtLjAyIDEyLjY5LTEuMyAxOC41OS0zLjg2bDIxOC4yNS05NC42OWMxMS42Mi01LjAzIDE5LjE2LTE2LjU5IDE5LjE2LTI5LjQ0IDAtMTIuODYtNy41My0yNC40Mi0xOS4xMi0yOS40NEw0MTMuMTkgMzIwbDc5LjY1LTM0LjU2YzExLjYzLTUuMDMgMTkuMTYtMTYuNTkgMTkuMTYtMjkuNDN6TTI1NS40NyA0Ny44OWwuMDMuMDJoLS4wNmwuMDMtLjAyem0uNTMuMjNsMTg0LjE2IDc5Ljg5LTE4My42MyA4MC4wOS0xODQuNjItODAuMTFMMjU2IDQ4LjEyem0xODQuMTkgMzM1LjkybC0xODMuNjYgODAuMDdMNzEuOTEgMzg0bDg3LjIxLTM3Ljg0IDc4LjI5IDMzLjk2QTQ2LjQ4OCA0Ni40ODggMCAwIDAgMjU2IDM4NGM2LjM0LS4wMiAxMi42OS0xLjMgMTguNTktMy44Nmw3OC4yOS0zMy45NyA4Ny4zMSAzNy44N3pNMjU2LjUzIDMzNi4xTDcxLjkxIDI1NS45OWw4Ny4yMi0zNy44NCA3OC4yOCAzMy45NmE0Ni40ODggNDYuNDg4IDAgMCAwIDE4LjU5IDMuODhjNi4zNC0uMDIgMTIuNjktMS4zIDE4LjU5LTMuODZsNzguMjktMzMuOTcgODcuMzEgMzcuODgtMTgzLjY2IDgwLjA2eiI+PC9wYXRoPjwvc3ZnPg==" data-mce-style="width:1.33em;height:1.33em"></strong></h4>
                <h4><strong>Bootstrap Editor</strong></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">
                <h4><strong><img class="img-fluid" style="width:1.33em;height:1.33em" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBmaWxsPSIjMDA3ZmZmIj48cGF0aCBkPSJNODAgMTYwbDI2LjY2LTUzLjMzTDE2MCA4MGwtNTMuMzMtMjYuNjdMODAgMCA1My4zMyA1My4zMyAwIDgwbDUzLjMzIDI2LjY3TDgwIDE2MHptMzUxLjk5IDEyOGwtMjYuNjYgNTMuMzNMMzUxLjk5IDM2OGw1My4zMyAyNi42N0w0MzEuOTkgNDQ4bDI2LjY2LTUzLjMzTDUxMS45OCAzNjhsLTUzLjMzLTI2LjY3TDQzMS45OSAyODh6bS0yMDgtMTkybDE2LTMyIDMyLTE2LTMyLTE2LTE2LTMyLTE2IDMyLTMyIDE2IDMyIDE2IDE2IDMyem0yMDggOTZjOC44NCAwIDE2LTcuMTYgMTYtMTZ2LTM0LjExTDUwMi4wMiA4MmMxMy44MS0xNS4yMiAxMy4yMi0zOC41My0xLjMxLTUzLjA5bC0xNy42Ni0xNy42M2MtMTQuNS0xNC41Mi0zNy44NC0xNS4wOC01My0xLjM2TDE1Ny4yOCAyNTZIMTEyYy04Ljg0IDAtMTYgNy4xNi0xNiAxNnYzOS4yOGwtNzguNTMgNzAuODQtLjA2LjA1QzYuNzIgMzkxLjg2LjM4IDQwNS42OS4wNCA0MjAuMTJjLS4zNyAxNC40NCA1LjI4IDI4LjU4IDE1LjUgMzguODFsMzcuNTMgMzcuNTJjOS44NyA5LjkyIDIzLjUgMTUuNTUgMzcuNSAxNS41NSAyMi4xNyAwIDM1LjU3LTEzLjM3IDM5LjI4LTE3LjQ3TDQwMi43OCAxOTJoMjkuMjF6TTk0LjIyIDQ2Mi4zNmMtLjgyLjkxLTQuMjMgMy4yNC03LjIyLjE3bC0zNy41My0zNy41MmMtMi45Ny0zLjAxLS43My02LjQ0LjE2LTcuMjdMNDU1LjQ5IDUxLjYxbDQuOTEgNC44OEw5NC4yMiA0NjIuMzZ6Ij48L3BhdGg+PC9zdmc+" data-fa-icon="wand-magic" data-fa-style="far" data-fa-svg="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBmaWxsPSIjMDAwMDAwIj48cGF0aCBkPSJNODAgMTYwbDI2LjY2LTUzLjMzTDE2MCA4MGwtNTMuMzMtMjYuNjdMODAgMCA1My4zMyA1My4zMyAwIDgwbDUzLjMzIDI2LjY3TDgwIDE2MHptMzUxLjk5IDEyOGwtMjYuNjYgNTMuMzNMMzUxLjk5IDM2OGw1My4zMyAyNi42N0w0MzEuOTkgNDQ4bDI2LjY2LTUzLjMzTDUxMS45OCAzNjhsLTUzLjMzLTI2LjY3TDQzMS45OSAyODh6bS0yMDgtMTkybDE2LTMyIDMyLTE2LTMyLTE2LTE2LTMyLTE2IDMyLTMyIDE2IDMyIDE2IDE2IDMyem0yMDggOTZjOC44NCAwIDE2LTcuMTYgMTYtMTZ2LTM0LjExTDUwMi4wMiA4MmMxMy44MS0xNS4yMiAxMy4yMi0zOC41My0xLjMxLTUzLjA5bC0xNy42Ni0xNy42M2MtMTQuNS0xNC41Mi0zNy44NC0xNS4wOC01My0xLjM2TDE1Ny4yOCAyNTZIMTEyYy04Ljg0IDAtMTYgNy4xNi0xNiAxNnYzOS4yOGwtNzguNTMgNzAuODQtLjA2LjA1QzYuNzIgMzkxLjg2LjM4IDQwNS42OS4wNCA0MjAuMTJjLS4zNyAxNC40NCA1LjI4IDI4LjU4IDE1LjUgMzguODFsMzcuNTMgMzcuNTJjOS44NyA5LjkyIDIzLjUgMTUuNTUgMzcuNSAxNS41NSAyMi4xNyAwIDM1LjU3LTEzLjM3IDM5LjI4LTE3LjQ3TDQwMi43OCAxOTJoMjkuMjF6TTk0LjIyIDQ2Mi4zNmMtLjgyLjkxLTQuMjMgMy4yNC03LjIyLjE3bC0zNy41My0zNy41MmMtMi45Ny0zLjAxLS43My02LjQ0LjE2LTcuMjdMNDU1LjQ5IDUxLjYxbDQuOTEgNC44OEw5NC4yMiA0NjIuMzZ6Ij48L3BhdGg+PC9zdmc+" data-mce-style="width:1.33em;height:1.33em"></strong></h4>
                <h4><strong>Image Editor</strong></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>

<script src="https://democdn.com/editors/ckeditor-4.20/ckeditor.js"></script>

SASS

.wrap {
  max-width: 1000px;
  margin: 0 auto;
}