N1ED: File Manager from Field

File Manager live demo with code sample 18 of 27

The file manager is a core feature of the N1ED WYSIWYG HTML editor, and its integration works seamlessly without additional configuration.

You may also want to reuse the file manager to attach files elsewhere on the same page, leveraging the same storage backend.

This is possible because N1ED exposes the Flmngr component for use in your application, and this sample demonstrates how to do it.

As demonstrated in the N1ED example, the file manager is straightforward to use.

To attach it to an external button outside the editor, you need to access the Flmngr API directly from the editor instance.

There’s no need to initialize the file manager again—it will reuse the options already configured in the N1ED editor via the visual Dashboard. You can access it using a callback like this: editorInstance.getFlmngr(callback).

The Flmngr file manager is one of the crucial components built into N1ED — the #1 website editor that supports visual block-by-block editing, responsive Bootstrap/Tailwind content, and — last but not least — powerful media management.

If you install N1ED in your CMS or SaaS website builder, you will not only be able to call the file manager from the editor, but also use the Flmngr API outside the editor.

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);
    
  }        
}

<div style="margin-left: 320px">
  
  <h2 class="mb-3">Flmngr: N1ED WYSIWYG HTML Editor With the File Manager (Using the API)</h2>

  <div class="my-4">
    <div>
      <p>Here is a sample of how to call the Flmngr dialog using the API outside of N1ED.</p>
      
      <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>
    </div>
    <div id="images">
    </div>
  </div>
  
  <textarea id="editor"></textarea>
</div>

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

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;
}

N1ED: File Manager from Field

When to use

How it works

How to start using