Docs

Call Flmngr file manager programmatically

Flmngr file manager can be opened from different places of CKEditor 4 or TinyMCE 5. But sometimes you need to do it manually from your custom code.

You can easily open Flmngr programmatically using its API function. The way to call this API method depends on which base editor do you use - CKEditor or TinyMCE.

CKEditor
TinyMCE
CKEDITOR.instances["your-editor-id"].openFlmngr(
    {
        isMultiple: false,
        isImagesOnly: true,
        onSelected: function(urls) {
            // Do something with selected URLs here
        }
    } 
);
tinymce.editors["your-editor-id"].openFlmngr(
    {
        isMultiple: false,
        isImagesOnly: true,
        onSelected: function(urls) {
            // Do something with selected URLs here
        }
    } 
);

Please do not forget to replace "your-editor-id" with the ID of your editor. You can find the list of IDs of your current editors (usually ID of some the only editor) on some page inside structure CKEDITOR.instances or tinymce.editors.

See the samples below how to open file manager with help external button and then create images and insert them into WYSIWYG editor. Or course you can more tricky things with selected files, including passing an array of URLs to your own scripts.

Call Flmngr without TinyMCE or CKEditor

As you can notice CKEditor or TinyMCE is still required to run Flmngr. This is because Flmngr gets its configuration from base WYSIWYG editor.

But even on the pages you do not have WYSIWYG editor you can open file manager too. In order to do this please load CKEditor or TinyMCE inside hidden <div> and then do the same as described above.

CodePen samples

Here are two samples showing you how to interact with the API of Flmngr and manually use selected files (Sample 1) or insert specified images into CKEditor (Sample 2).

Sample 1

Sample 2

Demo
HTML
JavaScript
CSS
<div style="display:none">
  <div id="editor"></div>
</div>

<h1 class="h5 mb-3">Open Flmngr file manager outside of CKEditor</h1>

<p>This demo shows how to open Flmngr and use selected files externally</p>

<div id="btn" class="btn btn-primary">Select files...</div>

<h2 class="h5 mt-5">Selected images</h2>
<div id="images">
  No images selected yet.
</div>
window.onEditorLoaded = function() {
  CKEDITOR.replace("editor", {});
  document.getElementById("btn").addEventListener("click", function() {
    selectFiles();
  });
}

function selectFiles() {
  CKEDITOR.instances["editor"].openFlmngr(
    {
      isMultiple: true,
      isImagesOnly: true,
      onSelected: function(urls) {
        showSelectedImages(urls);
      }
    } 
  );
}

function showSelectedImages(urls) {
  let elImages = document.getElementById("images");
  elImages.innerHTML = "";

  let elP =  document.createElement("p");
  elP.textContent = urls.length + " images selected";
  elImages.appendChild(elP);

  for (let url of urls) {

    let el = document.createElement("div");
    el.className = "image";
    elImages.appendChild(el);


    let elImg = document.createElement("img");
    elImg.src = url;
    elImg.alt = "Image selected in Flmngr";
    el.appendChild(elImg);

    let elP = document.createElement("p");
    elP.textContent = url;
    el.appendChild(elP);

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

#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;
}
#images .image img {
  max-height: 350px;
  border: 1px solid #DDD;
}
#images .image p {
  margin: 5px 0 0 0;
  font-size: 14px;
  color: #444;
}
Demo
HTML
JavaScript
CSS
<h1 class="h5 mb-3">Call Flmngr file manager from CKEditor programmatically</h1>

<p>This demo shows how to call Flmngr and insert selected file as custom HTML code into CKEditor.</p>

<div id="btn" class="btn btn-primary mb-4">Select file...</div>

<div id="editor"></div>
window.onEditorLoaded = function() {
  CKEDITOR.replace("editor", {
    width: 1100,
  });
  document.getElementById("btn").addEventListener("click", function() {
    selectFiles();
  });
}

function selectFiles() {
  CKEDITOR.instances["editor"].openFlmngr(
    {
      isMultiple: false,
      isImagesOnly: true,
      onSelected: function(urls) {
        insertImage(urls[0]);
      }
    } 
  );
}

function insertImage(url) {
  let html = '<img src="'+ escapeHtml(url) +'" alt="My custom image" style="max-width:300px"/>';

  CKEDITOR.instances["editor"].insertHtml(html);
}

function escapeHtml(str) {
    return str
         .replace(/&/g, "&")
         .replace(/</g, "<")
         .replace(/>/g, ">")
         .replace(/"/g, "&quot;")
         .replace(/'/g, "&#039;");
 }
body {
  padding: 20px;
  background-color: #F4F4F4;
}

#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;
}
#images .image img {
  max-height: 350px;
  border: 1px solid #DDD;
}
#images .image p {
  margin: 5px 0 0 0;
  font-size: 14px;
  color: #444;
}