Install file manager plugin for TinyMCE

File manager for TinyMCE

Download and copy the plugin

When you already have TinyMCE installed, you can just install Flmngr add-on for TinyMCE.

In order to install file manager plugin for TinyMCE 6 (versions 4 and 5 are also supported), first download it:

and then unpack it into plugins/ directory this way:

tinymce/
  plugins/
     file-manager/
        plugin.js
        plugin.min.js

Configure TinyMCE

Enable the add-on in the TinyMCE initialization parameters:

tinymce.init({
    plugins: "file-manager",
    Flmngr: {
        apiKey: "FLMNFLMN",                                  // default free key
        urlFileManager: 'https://fm.flmngr.com/fileManager', // demo server
        urlFiles: 'https://fm.flmngr.com/files',             // demo file storage
    },
    toolbar: "Upload, Flmngr, ImgPen"
});

Add plugins option if you do not have one. If this option already exists in your config you pass to TinyMCE, just append file-manager to existing configuration like plugins: "links,code,file-manager"

Install the backend

Now you need to install the Flmngr file manager backend somewhere on your server. Behind the link, there is a manual on how to do it and link with Flmngr TinyMCE plugin.

Example

There is a sample of TinyMCE with the file manager installation and using its API:

Using API

File manager TinyMCE add-on adds some buttons to the toolbar, and you can use it right after installed and configured. But sometimes you need to implement a custom logic (as another TinyMCE plugin or in a script outside of TinyMCE but on the same page).

Flmngr API is available to you when you use the TinyMCE plugin. This means you do not need to manually embed some other scripts. For example, if you have some file field below the WYSIWYG editor.

Call the method getFlmngr of the TinyMCE instance always if you wish to get a link to API (or save the Flmngr object returned in the callback and call it directly each time).

Note: the new API is passed in the callback only (at the first argument). The return value of the method and the second argument of the callback (omit if do you not need it) contain a link to legacy API. Such a link to the old API exists for backward compatibility only.

tinymce.activeEditor.getFlmngr(
    (Flmngr) => {
        // Flmngr argument contains Flmngr API, 
        // for example you can open the file manager and let user pick a file:
        Flmngr.open({
            // There is no need to set 'apiKey', 'urlFileManager' or 'urlFiles' here
            // due to you already set them in the config of TinyMCE.
            // Also there is not need to call Flmngr.load() API method
            // because TinyMCE already loaded the file manager.
            isMultiple: false, // let selecting a single file
            onFinish: (files) => {
                console.log("User picked:");
                console.log(files);
            }
        });
    }
);

See this sample in our CodePen demo.