Flmngr file manager logo

Flmngr file manager plugin

File manager and uploader tools
Flmngr file manager in TinyMCE
Flmngr file manager in TinyMCEBrowsing and managing filesUploading filesEditing an image with ImgPenManaging an image galleryImages from the Unsplash stock
Flmngr file manager logo

Flmngr - a free file manager that perfectly integrates to your WYSIWYG editor alone or coupled with N1ED. Including and configuring it are simple, and usage experience is all accustomed and familiar.

All standard features are here: dynamic browsing of large directories, managing folder structure, moving and uploading files, sorting, etc.

You can upload files from your computer, also in the bulk mode. Drag'n'drop is supported.

You can use for free everything you expect from a file manager. Premium users will unlock ImgPen image editor, picking stock photos from Unsplash, integrations for Amazon S3 and Azure Blob, multiselection (for managing galleries).

PHP backend can be installed as Composer package of by just copying files (legacy way). So you can integrate it into any CMS or framework, including Laravel, Yii, Symfony, Zend or any other.

Get more info on Flmngr file manager home page: https://flmngr.com

Editor42 logo Editor42
TinyMCE logo TinyMCE
CKEditor 5 logo CKEditor 5
CKEditor 4 logo CKEditor 4
Froala logo Froala
TinyMCE 5 logo TinyMCE 5
TinyMCE 4 logo TinyMCE 4

Install Flmngr file manager plugin in Editor42

Plugin
Ready-to-Use Bundle
Download Flmngr plugin
ZIP archive of the Flmngr plugin for Editor42
  1. From the archive, copy plugins/file-manager/ to editor42/plugins/file-manager/.
  2. Add file-manager to the plugins parameter of your Editor42 config. The toolbar buttons are added automatically.
  3. Install the file manager backend on your server.

Example

editor42.init({
    selector: "#editor",
    plugins: "file-manager,image,link",
    Flmngr: {
        apiKey: "FLMN24RR1234123412341234", // Default free key
    }
    // Toolbar is configured automatically
    // Your API key and all configuration:
    //   https://flmngr.com/dashboard
});

The file manager in a fully preconfigured, TinyMCE-compatible environment. The editor inside is Editor42, our free MIT-licensed editor based on TinyMCE and fully compatible with it. Open its sample.html to see it work.

Download bundle
Editor42 with Flmngr, ready to use
  1. Unpack the archive into the public folder of your website: you get editor42/ and sample.html.
  2. Add the script to your page and attach the editor to a textarea or a div with your content.
  3. Install the file manager backend on your server.

Example

<script src="/editor42/editor42.min.js"></script>
<script>
    editor42.init({
        selector: "#editor",
        plugins: "file-manager,image,link",
        Flmngr: {
            apiKey: "FLMN24RR1234123412341234", // Default free key
        }
    });
</script>

Read the official installation manual on developer website to know more.

Install Flmngr file manager plugin in TinyMCE

The plugin installs into your TinyMCE. The ready-to-use bundle brings the editor with it: Editor42, our free MIT-licensed editor based on TinyMCE and fully compatible with it.

Plugin
Ready-to-Use Bundle
Download Flmngr plugin
ZIP archive of the Flmngr plugin for TinyMCE
  1. From the archive, copy plugins/file-manager/ to tinymce/plugins/file-manager/.
  2. Add file-manager to the plugins parameter of your TinyMCE config. The toolbar buttons are added automatically.
  3. Install the file manager backend on your server.

Example

tinymce.init({
    selector: "#editor",
    plugins: "file-manager,image,link",
    Flmngr: {
        apiKey: "FLMN24RR1234123412341234", // Default free key
    }
    // Toolbar is configured automatically
    // Your API key and all configuration:
    //   https://flmngr.com/dashboard
});

The file manager in a fully preconfigured, TinyMCE-compatible environment. The editor inside is Editor42, our free MIT-licensed editor based on TinyMCE and fully compatible with it. Open its sample.html to see it work.

Download bundle
Editor42 with Flmngr, ready to use
  1. Unpack the archive into the public folder of your website: you get editor42/ and sample.html.
  2. Add the script to your page and attach the editor to a textarea or a div with your content.
  3. Install the file manager backend on your server.

Example

<script src="/editor42/editor42.min.js"></script>
<script>
    editor42.init({
        selector: "#editor",
        plugins: "file-manager,image,link",
        Flmngr: {
            apiKey: "FLMN24RR1234123412341234", // Default free key
        }
    });
</script>

Read the official installation manual on developer website to know more.

Install Flmngr file manager plugin in CKEditor 5

Flmngr file manager has a simple tutorial with samples how to install it into a number of integrations: from ready-to-use build till making a custom build of CKEditor 5.

Get CKEditor 5 plugin
Flmngr file manager plugin for CKEditor 5

Install Flmngr file manager plugin in CKEditor 4

Download Flmngr plugin
ZIP archive of the Flmngr plugin for CKEditor 4
  1. From the archive, copy plugins/file-manager/ to ckeditor/plugins/file-manager/.
  2. Add file-manager to the extraPlugins parameter of your CKEditor config. The toolbar buttons are added automatically.
  3. Install the file manager backend on your server.
Using config file
Using initialization script

If you prefer to edit config.js of CKEditor, or your CKEditor is initialized in some non-editable part of your CMS, make these changes there:

CKEDITOR.editorConfig = function(config) {
    config.extraPlugins = "file-manager";
    config.Flmngr = {
        apiKey: "FLMN24RR1234123412341234", // Default free key
                            // Get free own API key to use with a visual configurator:
                            // https://flmngr.com/dashboard
    };
    config.versionCheck = false; // skip its upgrade notice of CKEditor itself
    // Toolbar is configured automatically
};

Some CMSs do not use config.js and let you edit only the CKEditor initialization script. Make these changes there:

CKEDITOR.replace("editorId", {
    extraPlugins: "file-manager",
    Flmngr: {
        apiKey: "FLMN24RR1234123412341234", // Default free key
                            // Get free own API key to use with a visual configurator:
                            // https://flmngr.com/dashboard
    },
    versionCheck: false, // skip its upgrade notice of CKEditor itself
    // Toolbar is configured automatically
});

Read the official installation manual on developer website to know more.

Install Flmngr file manager plugin in Froala

The file manager and the image editor install as any other Froala plugin, from the CDN.

  1. Add their scripts to your page, after the main script of Froala.
  2. Tell Froala where your Flmngr backend and files are. The sample below uses our demo server.
  3. Install the file manager backend on your server.

Example

<script src="/path/to/froala.js"></script>
<script src="https://cloud.n1ed.com/v/latest/froala/froala-file-manager.js"></script>
<script src="https://cloud.n1ed.com/v/latest/froala/froala-image-editor.js"></script>

<script>
    FroalaEditor('#editor', {
        Flmngr: {
            apiKey: "FLMN24RR1234123412341234",                  // default free key
            urlFileManager: 'https://flmngr.democdn.com/file-manager-default', // demo server
            urlFiles: 'https://flmngr.democdn.com/files/default',              // demo file storage
        }
        // Toolbar is configured automatically
    });
</script>

Read the official installation manual on developer website to know more.

Install Flmngr file manager plugin in TinyMCE 5

Download Flmngr plugin
ZIP archive of the Flmngr plugin for TinyMCE 5
  1. From the archive, copy plugins/file-manager/ to tinymce/plugins/file-manager/.
  2. Add file-manager to the plugins parameter of your TinyMCE config. The toolbar buttons are added automatically.
  3. Install the file manager backend on your server.

Example

tinymce.init({
    selector: "#editor",
    plugins: "file-manager,image,link",
    Flmngr: {
        apiKey: "FLMN24RR1234123412341234", // Default free key
    }
    // Toolbar is configured automatically
    // Your API key and all configuration:
    //   https://flmngr.com/dashboard
});

Read the official installation manual on developer website to know more.

Install Flmngr file manager plugin in TinyMCE 4

Download Flmngr plugin
ZIP archive of the Flmngr plugin for TinyMCE 4
  1. From the archive, copy plugins/file-manager/ to tinymce/plugins/file-manager/.
  2. Add file-manager to the plugins parameter of your TinyMCE config. The toolbar buttons are added automatically.
  3. Install the file manager backend on your server.

Example

tinymce.init({
    selector: "#editor",
    plugins: "file-manager,image,link",
    Flmngr: {
        apiKey: "FLMN24RR1234123412341234", // Default free key
    }
    // Toolbar is configured automatically
    // Your API key and all configuration:
    //   https://flmngr.com/dashboard
});

Read the official installation manual on developer website to know more.

Install server side

In order to upload and browse files and images, you need to install backend script which will process all your requests from the plugin.

PHP backend logoPHP file manager
Node backend logoNode file manager

File manager for PHP

You can find step-by-step tutorial of installing PHP version of the file manager here:

Install on PHP server
Get the standard file manager backend

You can install the backend as a Composer package or by unzipping PHP scripts to your server. Both ways can be used in different frameworks: YII, Laravel or any other, including your custom framework.

Also there is a helpful question-answer debug manual.

File manager for Node

You can find step-by-step tutorial of installing Node.js version of the file manager here:

Install on Node server
Get the standard file manager backend

There is a list of NPM packages for different Node environments of Node: Express, Nest, running as a standalone microservice and a custom integration.

Also there is a helpful question-answer debug manual.

Reviews

We are using file picker and we really like it. That is really nice! Thank you so much.

User icon
Joan G.
Agency

We are managing an online magazine and we have to keep a lot of pictures, we use. So Flmngr perfectly covered all our needs for uploading, managing, catalog and editing photos.

User icon
Sevan V.
Individual

We have installed filemanager into our saas platform. It's a very flexible tool with its own API. It perfectly works in multiuser environment. So we can protect files of one user from the actions of other users. This became the decisive argument when looking for the right file manager.

User icon
Ben D.
Web service (SaaS)

Nice file browser. Besides uploading and managing files, there is an image editing feature.

User icon
Noah S.
Individual