TinyMCE File Manager from Field

File Manager live demo with code sample 20 of 27

After installing the file manager as described in the standard TinyMCE file manager sample, you might want to create some external fields for use in other parts of your application.

Actually, this is quite obvious — the file manager provides access to your storage, which is used not only by the editor, so why not use the file manager with other components of your CMS or app?

For example, you might want the user to attach multiple images to a form on the same page as TinyMCE, using a button that opens the Flmngr dialog.

The button near the TinyMCE editor should use the same instance that is already preloaded by the TinyMCE editor. Get a link to its Flmngr API from the editor instance so that your file manager will use exactly the same preferences.

Retrieve this object using the tinymceInstance.getFlmngr(callback) call, and then use it to call the Flmngr.open({params}) method to open the file manager dialog.

This code is for use with TinyMCE — the world's most popular classic WYSIWYG HTML editor.

Install the TinyMCE file manager plugin for quick implementation in your CMS or web app. All versions of TinyMCE are supported.

You can also install it into TinyMCE as part of the N1ED plugin, which not only provides a file manager, but also adds tools for Bootstrap or Tailwind block-by-block editing and support for a wide range of widgets.

The Flmngr API can be accessed directly from TinyMCE or from a TinyMCE+N1ED setup and used outside the editor as well.

tinymce.init({
  selector: "#editor",
  plugins: "file-manager,link,image",
  toolbar: "link | undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | outdent indent",
  Flmngr:  {
    apiKey: "FLMN24RR1234123412341234", // default free key
  },
  
  // 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);
    
  }        
}

<h2 class="mb-3">Flmngr: TinyMCE 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"></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;
    }
  }
  
}

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

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

TinyMCE File Manager from Field

When to use

How it works

How to start using