N1ED file manager integration sample (with API)

<h1 class="h5 mb-3">Flmngr: N1ED file manager (with using API)</h1>

<textarea id="editor"></textarea>

<div class="my-4">
  <div>
    <div class="h5 mb-2">Attached images</div>
    <div id="btn" class="btn btn-primary" style="opacity:0.2;cursor:default">Select files...</div>
    <div id="loading" style="font-size:12px">Loading file manager...</div>
    <p class="hint"><b>Hint</b>: after you selected gallery images,<br/> you can re-manage the existing gallery.</p>
  </div>
  <div id="images">
  </div>
</div>

<script type="text/javascript" src="https://cloud.n1ed.com/cdn/CPENDFLT/n1tinymce.js"></script>

"use strict";
window.onEditorLoaded = function () {
    tinymce.init({
        selector: "#editor",
        // Let's wait for TinyMCE is initialized...
        setup: (editor) => {
            editor.on('init', (event) => {
                // ...and get Flmngr API
                editor.getFlmngr((Flmngr) => {
                    // In this demo we pass Flmngr API into inner functions and callbacks.
                    // You can save it somewhere and reuse without passing as an argument.
                    attachOnClickListenerToButton(Flmngr);
                });
            });
        }
    });
};
function attachOnClickListenerToButton(Flmngr) {
    let elBtn = document.getElementById("btn");
    // Style button as ready to be pressed
    elBtn.style.opacity = 1;
    elBtn.style.cursor = "pointer";
    let elLoading = document.getElementById("loading");
    elLoading.parentElement.removeChild(elLoading);
    // Add a listener for selecting files
    elBtn.addEventListener("click", () => {
        selectFiles(Flmngr);
    });
}
function selectFiles(Flmngr) {
    // Collect URLs of images of existing gallery set
    let elsExistingImages = document.querySelectorAll("#images img");
    let urls = [];
    for (let i = 0; i < elsExistingImages.length; i++)
        urls.push(elsExistingImages.item(i).src);
    Flmngr.open({
        list: urls,
        isMultiple: true,
        acceptExtensions: ["png", "jpeg", "jpg", "webp", "gif"],
        onFinish: (files) => {
            showSelectedImages(Flmngr, files);
        }
    });
}
function showSelectedImages(Flmngr, files) {
    let elImages = document.getElementById("images");
    elImages.innerHTML = "";
    /*let elP =  document.createElement("p");
    elP.textContent = files.length + " images selected";
    elImages.appendChild(elP);*/
    for (let file of files) {
        let urlOriginal = Flmngr.getNoCacheUrl(file.url);
        let el = document.createElement("div");
        el.className = "image";
        elImages.appendChild(el);
        let elDiv = document.createElement("div");
        el.appendChild(elDiv);
        let elImg = document.createElement("img");
        elImg.src = urlOriginal;
        elImg.alt = "Image selected in Flmngr";
        elDiv.appendChild(elImg);
        let elP = document.createElement("p");
        elP.textContent = file.url;
        el.appendChild(elP);
    }
}

body {
  padding: 20px;
  background-color: #F4F4F4;
}

#images {
  margin-top: 20px;
  display: flex;
}
#images .image {
  border: 1px solid #DDD;
  box-shadow: 5px 5px 0 0 #DDD;
  background-color: white;
  padding: 10px;
  display: inline-flex;
  flex-direction: column;
  margin: 0 25px 25px 0;
  align-items: center;
}
#images .image div {
  height: 250px;
  max-width: 350px;
  text-align: center;
}
#images .image div img {
  max-height: 100%;
  max-width: 100%;
  margin: auto;
}
#images .image p {
  margin: 5px 0 0 0;
  font-size: 14px;
  color: #444;
}

.tox-promotion {
  display: none !important;
}

.hint {
  color: #007FFF;
  font-size: 14px;
  margin-top: 10px;
  line-height: 16px;
}