CKEditor 5 File Manager from Field

File Manager live demo with code sample 23 of 27

CKEditor 5 is a powerful editor designed for developers. You may want to use the full file manager capabilities outside the CKEditor 5 interface, elsewhere in your frontend application.

The file manager will access the same storage configured for CKEditor 5 and reuse all its existing settings.

For example, you can open the file manager dialog from a button on the same page, allowing users to attach files or images to an article currently being edited.

You can access the File Manager API by calling editor.getFlmngr(callback), which provides a link to the Flmngr API tied to that specific CKEditor 5 instance.

Once you have the API reference, you can call any method as shown in other samples. For instance, here we use Flmngr.open({params}) to open the file manager dialog and wait for the user to select one or more files.

This code sample is useful when you use CKEditor 5 — one of the most innovative WYSIWYG HTML editors.

You can install the CKEditor 5 file manager plugin or a ready-to-use CKEditor 5 build with the file manager.

This gives you seamless integration of CKEditor 5 with the file manager, along with a well-documented Flmngr API for use outside the editor.

ClassicEditor.create(document.querySelector("#editor"), {
  Flmngr: {
    apiKey: "FLMN24RR1234123412341234", // default free key
    urlFileManager: "https://fm.flmngr.com/fileManager", // demo server
    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 = "";
  
  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);
    
  }        
}

<h2 class="mb-3">Flmngr: CKEditor 5 File Manager (Using the API)</h2>

<div class="my-4">
  <div>
    <div id="btn" class="btn btn-primary btn-lg" 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 have selected gallery images,<br/> you can re-manage the existing gallery.</p>
  </div>
  <div id="images">
  </div>
</div>

<textarea id="editor" style="height:300px"></textarea>

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

h2 {
  font-weight: bold;
}

#images {
  
  margin-top: 20px;
  display: flex;
  
  .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;
    
    div {
      height: 250px;
      max-width: 350px;
      text-align: center;
      
      img {
        max-height:100%; 
        max-width:100%;
        margin: auto;
      }
    }
    
    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;
}

CKEditor 5 File Manager from Field

When to use

How it works

How to start using