TinyMCE demo with block editor, file manager and image editor

When to use

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. You want all of it on your page without hosting or building an editor: this is the JS snippet, and this page runs it live on a demo API key.

How it works

One script from the cloud loads the editor together with N1ED, preconfigured by the API key: the toolbar, the widgets, the file storage and the Bootstrap settings all come from the Dashboard, so the page itself is a textarea and one tinymce.init() call. The editor this demo runs is Editor42, a free MIT-licensed fork of TinyMCE that answers to window.tinymce exactly as TinyMCE does — the code below is unchanged either way. Edit the content, insert a block, open the file manager, then take the code and use your own key.

How to start using

Add the JS snippet to your page with your own API key, then call tinymce.init() as this demo does. To add N1ED to a TinyMCE you already host, see the TinyMCE plugin demo.

Download ZIPOpen in CodePlay

Live Demo

JavaScript

// The cloud script loads the editor and N1ED together; this callback fires once both are ready.
// The editor is Editor42, the free MIT-licensed fork of TinyMCE, and it answers to window.tinymce
// like TinyMCE does - so this is plain tinymce.init() and would work unchanged on either one.
function initEditor() {
  tinymce.init({
    selector: "#demo",
    height: 700
  });
}
window.tinymce ? initEditor() : (window.onEditorLoaded = initEditor);

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>

<!--
  One script loads the editor together with N1ED, already configured by this API key
  (a shared demo key - get your own at https://n1ed.com/dashboard).

  The editor it brings is Editor42: a free, MIT-licensed fork of TinyMCE, kept API-compatible with
  it. It registers itself as window.tinymce (as well as window.editor42), so everything below is
  the ordinary TinyMCE code you would write anyway - see script.js.
-->
<script src="https://cloud.n1ed.com/v/latest/sdk/n1ed.js?apiKey=N1ED24RR1234123412341234"></script>

SASS

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