Flmngr file manager logo

Flmngr file manager plugin

File manager and uploader tools
Flmngr screenshot
Flmngr screenshotManage image galleriesImages from Unsplash stockUpload files screenshotList of files screenshot
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

CKEditor 4 logo CKEditor 4
CKEditor 5 logo CKEditor 5
TinyMCE 6 logo TinyMCE 6
TinyMCE 5 logo TinyMCE 5
TinyMCE 4 logo TinyMCE 4
Froala logo Froala

Install Flmngr file manager plugin in CKEditor 4

Download Flmngr file manager
ZIP archive of Flmngr file manager for CKEditor 4

Then do these simple steps:

  1. Copy file-manager directory to ckeditor/plugins/.
  2. Edit CKEditor config and add file-manager to extraPlugins parameter.
Using config file
Using initialization script

Example of configuring with config.js

If you prefer to edit config.js config file of CKEditor or when your CKEditor initialization code is placed inside some non-editable part of CMS, make these changes there:

CKEDITOR.editorConfig = function(config) {
    config.extraPlugins = "file-manager";
    config.toolbar = [ ["Upload", "Flmngr", "ImgPen"] ]; // or insert them into your toolbar config    
    config.Flmngr = {
        urlFileManager: 'http://example.com/path/to/flmngr.php',
        urlFiles: 'http://example.com/files/',
    };
};

Example of configuring inside initialization code

Some CMSs do not use config.js file and let to edit CKEditor initialization script only. Do this changes there:

CKEDITOR.replace("#editor", {
    extraPlugins: "file-manager",
    toolbar: [ ["Upload", "Flmngr", "ImgPen"] ], // or insert them into your toolbar config    
    Flmngr: {
        urlFileManager: 'http://example.com/path/to/flmngr.php',
        urlFiles: 'http://example.com/files/',
    },
});

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 TinyMCE 6

Download Flmngr file manager
ZIP archive of Flmngr file manager for TinyMCE 6
Self-hosted TinyMCE 6
Cloud TinyMCE 6

Install the plugin to TinyMCE 6 hosted on your server

  1. Copy file-manager directory to tinymce/plugins/.
  2. Edit TinyMCE config and add file-manager to plugins parameter.

Example

Here you can see sample TinyMCE initialization code with config inside it: 

TinyMCE.init({
    selector: "#editor",
    plugins: "file-manager",
    buttons: "Upload Flmngr ImgPen", // or insert them into your toolbar config    
    Flmngr: {
        urlFileManager: 'http://example.com/path/to/flmngr.php',
        urlFiles: 'http://example.com/files/',
    },
});

Refer to TinyMCE add-ons installation manual for more details

Install the plugin to cloud edition of TinyMCE 6

  1. Copy file-manager directory somewhere on your server where it can be accessible by a link.
  2. Specify the location of just copied Flmngr file manager plugin adding key-value pair in external_plugins TinyMCE config parameter.
  3. Edit TinyMCE config and add file-manager to plugins parameter.

Example

Here you can see sample cloud TinyMCE initialization code with config inside it: 

TinyMCE.init({
    selector: "#editor",
    plugins: "file-manager",
    buttons: "Upload Flmngr ImgPen", // or insert them into your toolbar config    
    Flmngr: {
        urlFileManager: 'http://example.com/path/to/flmngr.php',
        urlFiles: 'http://example.com/files/',
    },
    external_plugins: {
        "file-manager": "http://example.com/public/file-manager/plugin.min.js",
    },
});

Refer to TinyMCE add-ons installation manual for more details

Install Flmngr file manager plugin in TinyMCE 5

Download Flmngr file manager
ZIP archive of Flmngr file manager for TinyMCE 5
Self-hosted TinyMCE 5
Cloud TinyMCE 5

Install the plugin to TinyMCE 5 hosted on your server

  1. Copy file-manager directory to tinymce/plugins/.
  2. Edit TinyMCE config and add file-manager to plugins parameter.

Example

Here you can see sample TinyMCE initialization code with config inside it: 

TinyMCE.init({
    selector: "#editor",
    plugins: "file-manager",
    buttons: "Upload Flmngr ImgPen", // or insert them into your toolbar config    
    Flmngr: {
        urlFileManager: 'http://example.com/path/to/flmngr.php',
        urlFiles: 'http://example.com/files/',
    },
});

Refer to TinyMCE add-ons installation manual for more details

Install the plugin to cloud edition of TinyMCE 5

  1. Copy file-manager directory somewhere on your server where it can be accessible by a link.
  2. Specify the location of just copied Flmngr file manager plugin adding key-value pair in external_plugins TinyMCE config parameter.
  3. Edit TinyMCE config and add file-manager to plugins parameter.

Example

Here you can see sample cloud TinyMCE initialization code with config inside it: 

TinyMCE.init({
    selector: "#editor",
    plugins: "file-manager",
    buttons: "Upload Flmngr ImgPen", // or insert them into your toolbar config    
    Flmngr: {
        urlFileManager: 'http://example.com/path/to/flmngr.php',
        urlFiles: 'http://example.com/files/',
    },
    external_plugins: {
        "file-manager": "http://example.com/public/file-manager/plugin.min.js",
    },
});

Refer to TinyMCE add-ons installation manual for more details

Install Flmngr file manager plugin in TinyMCE 4

Download Flmngr file manager
ZIP archive of Flmngr file manager for TinyMCE 4

Then do these simple steps:

  1. Copy file-manager directory to tinymce/plugins/.
  2. Edit TinyMCE config and add file-manager to plugins parameter.

Example

Here you can see sample TinyMCE initialization code with config inside it: 

TinyMCE.init({
    selector: "#editor",
    plugins: "file-manager",
    buttons: "Upload Flmngr ImgPen", // or insert them into your toolbar config    
    Flmngr: {
        urlFileManager: 'http://example.com/path/to/flmngr.php',
        urlFiles: 'http://example.com/files/',
    },
});

Refer to TinyMCE add-ons installation manual for more details

Install Flmngr file manager plugin in Froala

Download Flmngr file manager
Flmngr file manager plugin for Froala

Then go through these steps:

  1. Copy file-manager JS file somewhere to your server and add it as a <script> tag to the page.
  2. Alternativaly you can use CDN version of this plugin and do not download it, URL is
    //cdn.jsdelivr.net/gh/edsdk/froala-file-manager@latest/js/froala-file-manager.js

Example

After installing the plugin you will have similar code on your page with Froala:

<script src="/path/to/froala.js"></script>
<script src="//cdn.jsdelivr.net/gh/edsdk/froala-file-manager@latest/js/froala-file-manager.js"></script>
    
<script>
    FroalaEditor('#editor', {        
        Flmngr: {
            urlFileManager: 'http://example.com/path/to/flmngr.php',
            urlFiles: 'http://example.com/files/',
        },
    });    
</script>

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

Tell a friend about Flmngr file manager

Send