N1ED plugin in a self-hosted TinyMCE

When to use

You already host TinyMCE yourself — your version, your plugins, your toolbar — and want N1ED added to it rather than a new editor from the cloud. This is the Plugin way of the TinyMCE installation.

How it works

The page loads a plain TinyMCE 7 with the N1ED plugin unpacked into tinymce/plugins/n1ed/. Adding "n1ed" to plugins and your API key to the config is the whole setup: the plugin loads the rest of N1ED from the cloud and applies the toolbar, widgets and file storage set for the key in the Dashboard.

How to start using

Install the N1ED plugin for TinyMCE for that.

See the link above to explore more options: a ready-to-use bundle with N1ED included and preconfigured, and the CDN script that loads everything in one line.

Download ZIPOpen in CodePlay

Live Demo

JavaScript

// Your own TinyMCE (here 7.6, self-hosted) with N1ED unpacked into its plugins folder:
//   tinymce/plugins/n1ed/plugin.js
// "n1ed" in plugins is all it takes; the API key brings the configuration you set in the Dashboard.
tinymce.init({
  selector: "#demo",
  license_key: "gpl",
  height: 700,
  plugins: "n1ed",
  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/tinymce-7.6.0/tinymce.min.js"></script>

SASS

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