CKEditor 5 file manager integration sample (with API)

Play on CodePen All samples on CodePen External link

Demo

HTML

JavaScript

CSS

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

<textarea id="editor" style="height:300px"></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>

"use strict";
ClassicEditor.create(document.querySelector("#editor"), {
    Flmngr: {
        apiKey: "FLMN24RR1234123412341234",
        urlFileManager: "https://fm.flmngr.com/fileManager",
        urlFiles: "https://fm.flmngr.com/files" // demo file storage
    }
}).then((editor) => {
    editor.getFlmngr((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", () => {
            Flmngr.open({
                isMultiple: false,
                acceptExtensions: ["png", "jpg", "jpeg", "gif", "webp"],
                onFinish: (files) => {
                    showSelectedImages(Flmngr, files);
                }
            });
        });
    });
}).catch((error) => {
    console.log(error);
});
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;
}

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

.ck-editor .ck-editor__main .ck-content {
  min-height: 250px;
}

In this sample we show how to:

Enable Flmngr file manager in CKEditor 5 after you installed the file manager.
Configure paths and URLs of Flmngr inside CKEditor 5.
Call Flmngr outside of CKEditor 5 (your custom external widgets).

Here is a standard practice to enable a CKEditor file manager plugin: we load the build of CKEditor 5 with Flmngr inside. Of course, you can use it as a plugin too.

We pass Flmngr config section into CKEditor 5 initialization (ClassicEditor.create(element, {params}) function. CKEditor 5 will call Flmngr.load({param}) method with exactly these parameters on the initialization.

All buttons of Flmngr are already added in this build, but do not forget to specify them if loading Flmngr as a plugin.

Now CKEditor 5 is initialized and ready and you can use Flmngr there. In most cases, this is the end of the configuration of CKEditor.

But what if you want to implement some custom files field outside of CKEditor? For example, you need to call the Flmngr file manager to let the user pick some images from the same storage and reuse the configuration you passed into CKEditor. To do this, you need to retrieve the Flmngr API object from the instance of CKEditor. In this sample, we have one CKEditor instance, but you can have two or more editors on the page, so they may have different initialization parameters (only the apiKey parameter must be the same within one web page).

So we do it using the standard CKEditor 5 API: we get an instance of the CKEditor editor as the result of the ClassicEditor.create async function.

At this moment, in the editor variable, you have the instance of CKEditor 5. Let's get an instance of the Flmngr API object. Use the editor.getFlmngr((Flmngr) => void) function to wait for Flmngr to be initialized too, and the Flmngr argument passed to the callback function will contain the interface with the entire Flmngr API, already loaded (please do not call Flmngr.load({params}) again).

Now, with the Flmngr API object, you can implement managing the file gallery on your custom field. This is exactly the same as in the Manage image gallery sample. Just attach a listener to a button of your control and call the Flmngr.open({params}) method with some parameters to let the user pick images.