Designs & Code

Design, Development and WordPress

Posted by & filed under CMS, Development, HTML, JavaScript, PHP, Plugins, TinyMCE.

One of things that has consistently surprised me over the past few years using TinyMCE is that there are no good & free file manager plugins available.  Every single free one I’ve downloaded has had too many problems/bugs for it to be worth using (maybe I’ve missed the good ones!?) and the price tag of the paid for TinyMCE file manager by MoxieCode is way too high!

*** At the time of writing this, a new version of TinyMCE has been released with a whole new UI (4.0) which is not backwards compatible with older plugins, this version is compatible with TinyMCE 3.X only.  I am looking in to bringing this plugin up to date with the new version of TinyMCE.  One thing is good though, they’ve adopted Twitter Bootstrap as used in this plugin so no redesign needed ;)

After creating a couple of other TinyMCE plugins I thought it was about time to fill the gap and create a file manager that was capable of browsing images as well as other media, with simple configuration options and a simple file uploader to boot!

Using Twitter Bootstrap, BlueImp’s jQuery-File-Uploader & Image Gallery (for bootstrap), Encode Explorer and some* of my own coding we bring you the TinyMCE Open Manager.

* – actually means ‘a lot’

Lets start with the Installation

*** If you’re just here to see how this plugin works head down to the gallery below or download the demo project at the end of this post – it is not recommended you use the demo project in your live set up – you should grab the latest version below:

1. Grab the download for Open Manager – the Free TinyMCE File Manager

Download from here or grab the bleeding edge version from the GitHub TinyMCE Open Manager Project Page

2. Setup Plugin

Extract the plugin files and you will find they are in a folder called openmanager, copy this folder to the plugins folder of your TinyMCE installation – usually located in:


Then we have to register the plugin with TinyMCE and initialise our uploads folder (the folder where all our files will be stored).

So first, add ‘openmanager’ to the plugins list:

	plugins : "openmanager",

Then add Open Manager as the file browser call back (this is so the plugin is launched when a user clicks the icon to browse for a file or image:

	file_browser_callback: "openmanager",

And then we need to set our upload path – this must be a relative path:

	open_manager_upload_path: 'uploads/',

N.B. Please note, that when using a relative upload path, it is relative from the plugin directory itself (i.e. assetsjavascripttiny_mcepluginsopenmanager ) so if your upload folder was in assetsuploads then your upload path would be something like ../../../../uploads/

With this current setup we now have the basics in place, whenever a user presses the filebrowser button, Open Manager will be used, allowing for image and file uploads.

In addition to this, we can add a button to the toolbar which launches the image gallery & file upload form, allowing a user to insert images in to a document directly from the plugin without clicking a file browser button elsewhere within the TinyMCE UI.  To do this simply add the button to a button row:

	theme_advanced_buttons1 : "openmanager",

To take the full example from TinyMCE’s website and setup the plugin, our initialisation code would look like this:

		// General options
		mode : "textareas",
		theme : "advanced",
		plugins : "autolink,lists,pagebreak,openmanager,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,wordcount,advlist,autosave,visualblocks",

		// Theme options
		theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect",
		theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
		theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
		theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak,restoredraft,visualblocks,|,openmanager",
		theme_advanced_toolbar_location : "top",
		theme_advanced_toolbar_align : "left",
		theme_advanced_statusbar_location : "bottom",
		theme_advanced_resizing : true,

		file_browser_callback: "openmanager",
		open_manager_upload_path: 'uploads/',

		// Example content CSS (should be your site CSS)
		content_css : "css/content.css",

		// Drop lists for link/image/media/template dialogs
		template_external_list_url : "lists/template_list.js",
		external_link_list_url : "lists/link_list.js",
		external_image_list_url : "lists/image_list.js",
		media_external_list_url : "lists/media_list.js",

		// Style formats
		style_formats : [
			{title : 'Bold text', inline : 'b'},
			{title : 'Red text', inline : 'span', styles : {color : '#ff0000'}},
			{title : 'Red header', block : 'h1', styles : {color : '#ff0000'}},
			{title : 'Example 1', inline : 'span', classes : 'example1'},
			{title : 'Example 2', inline : 'span', classes : 'example2'},
			{title : 'Table styles'},
			{title : 'Table row 1', selector : 'tr', classes : 'tablerow1'}

		// Replace values for the template plugin
		template_replace_values : {
			username : "Some User",
			staffid : "991234"

After all the above is complete the plugin should be ready to use, however we must make sure that the write permissions are set correctly on the upload folder – allowing the plugin to upload files to the upload folder and create sub folders.

3. Screenshots


Thoughts & Next Steps

1. Security considerations

One thing about this script is that it certainly is not secure   It has not been designed with security in mind, only function at this stage and therefore should only be used in a closed system (i.e. in an admin section of site) and even then it is not 100% secure if someone kind find the path of the upload script.  Any input on this is welcome, you can fork the project on GitHub too.

2. Improvements

As the plugin is only in v1.0 there are a good few features I’ve left out/not got round to coding, most notably:

1. A new file browser/manager when uploading media – the idea is to remove any reliance on Encode Explorer and build this section custom, including functionality such as creating folders, moving files and deleting files.

2. Add more functionality & organisation to the image gallery/browser – add features such as creating galleries, browsing images by category, creating folders and moving images.

3. Code cleanup/refactor – this plugin has come straight out of dev!

+ many many more, leave requests in the comments or via GitHub.


Demo Project

I’ve included a download package which makes use of the “Full” demo of TinyMCE 3.x in the TinyMCE 3.x download.  This download package should be ready to go and you should be able to test on your development server with little or no installation, just ensure that the uploads folder has the correct write permissions so that sub folders can be created by the PHP script.  This Demo project will not be updated as often as the Open Manager direct download or Github page so use this as a point of reference for setting up your installation rather than a ‘live and ready’ package to use.

Download the Open Manger Demo Project


99 Responses to “Open Manager – The Free TinyMCE File Manager Plugin [PHP]”

  1. erwin

    where is demo ?
    i get problem with upload path ?
    can you explain, where is default i put upload folder ?

    • Hi Erwin, I’ve updated the post above with details of a demo project which is downloadable – you should be able to download this zip file, unzip to your server and use straight away – it comes with TinyMCE so all you should theoretically need to do is set the write permissions on your upload folder – download here.

  2. Hi Erwin, there is not live Demo available as of yet, use the screen shots for an idea of how it works.
    Are you setting the variable `open_manager_upload_path` when you initialise TinyMCE? It sounds like the plugin cannot find the folder you are using for your uploads…
    If you can outline your directory structure of your site (just the uploads folder and the TinyMCE plugin folder) I should be able to help you out setting this up :)

  3. Paul Sandel

    You Are My Hero!!! I’ve been working on solutions for tinymce upload for several hours and as you noted above, most are too buggy or too expensive! thank you thank you thank you thank you thank you thank you thank you thank you thank you!

  4. Paul Sandel

    hiya! Me again, with a couple questions:

    1) I can’t browse previously uploaded images. PHP errors: undefined variable files, undefined index tab (index.php:54), invalid argument supplied for foreach (ajax.php:37)

    2 Is it possible to use this plugin to upload files (.doc, .pdf, etc…) or is it only for images?

    Thanks again!

  5. Paul Sandel

    okay, last time, I promise. My earlier errors were due to an inaccurate file path. I’ve found that I can indeed upload other files, although there appears to be problem, when you use link to upload a file. It inserts the file location as a src attribute on an image element, when all we want is a url. If I get a fix, I’ll push it your way.

    Thanks again for an excellent solution (feel free to delete my previous comments)

    • Hi Paul no worries! :) In TinyMCE 3.x there are two things a file manager does: 1, provide an image management and 2, provide file management.

      You can launch the image manager in two ways, by clicking on the Open Manager Icon (if you added it) or by clicking the “insert/edit image” icon that comes with TinyMCE, then by clicking the browse icon – you will need to make sure you have set `file_browser_callback` in the tinyMCE init in order to see browser buttons at all.

      The file manager can only be launched using this browse icon, for example if you clicked the “insert/edit embedded media” icon, and then clicking the browse icon from there – the two interfaces look very similar. Let me know if you have any more problems!

    • And just another quick one, after digging around and checking your code, I realised that the file browser wasn’t working properly – turns out I hardcoded the uploads directory in there. Grab the latest version from all the usual links for the fix – they’ve all been updated ;)

    • Ross Morsali

      Ah yes you’re right! Thanks for the comment – the demo download should have everything set up correctly, updating the post now ;)

  6. Thierry

    Hello thank you very much for this wonderfull work. I cannot solve a problem while i try to use the manager ; i get this error :
    Undefined index: tab in C:Intranetsourcetiny_mcepluginsopenmanagerindex.php on line 54 and
    I cannot scceed in identifying the reason . Sorry for my poor english.

    • Hi Thierry

      This error is happening because I am using a `$_GET` but not checking if it has been set first – you should change this line to:

      $tabno = (int)$_GET['tab'];
      $tabno = 1;

      I’ll update the code online soon.

      If you have any further problems please try downloading the Demo Project and see if you have errors there – let me know!

  7. Jay Bee

    Hi, thanks for the good work you are doing. My request is if you could create one that also plugs into CKeditor.

    • Hi Jay thanks for the message, unfortunately I’m not looking at doing a version for CK editor, this one was born out of my needs for a good file uploader for TinyMCE (which I use extensively), if there is enough interest, I *may* look in to CK editor.

  8. Adam

    Its brilliant, thanks very much for lovely plugin. Is there any way to put images directly in chosen folder instead of standard images folder created by the plugin.

    • Hi Adam, unfortunately there is not with this version – you can obviously move the upload folder by setting `open_manager_upload_path` however the current structure of the uploads folder, with two sub folders for images & media cannot be changed. This is something I wanted to include in a future version, however it is unlikely I will include this for this version of the plugin which supports TinyMCE 3.x, the next version I will be working on will support TinyMCE 4.x.

      You could try opening up the several PHP files in the plugin (index.php, functions.php, ajax.php, fileactions.php) and searching for the word `images` – you should be able to play around with the paths you find there but it might be a bit tedious – I didn’t set the folder as a constant or global that is easily changed :(

  9. Lucious

    Hi Erwin,

    Thanks a lot for the file manager, works awesome on php. I have a request here. Do you have the one that works on MVC or know of any that you can recomend for me on .net environment?


    • Hi Erwin ;) Unfortunately I have not come across any free ones that I know of as I rarely use .net, the official one called MoxieManager from Moxiecode does say it supports .net, sorry I can’t help any more!

  10. Barxudan

    Dear Ross Morsali
    thanks a lot ,it’s a very good project ,I use in my web project
    but i have some problem
    1- when i want add link for a (pdf ,ppt , …) file ;tag <src img in url must be delete, and this design only for image files
    2- i save posted information from textarea in database, how i can retrive thumbs image file
    3- when i insert link for a file , i want when user click over link redirect to dowload.php?name=filename
    how i can automatically redirect user to this page for every link

    • Hi Barxudan, thanks for the comment – took a while before I saw it!

      1) I think you are hoping the plugin will add a link to your document directly to an uploaded file? A typical TinyMCE (3.x) file manager does not support this. The only way to use the file manager is if you select the “add media” button on the tinymce toolbar, then click “browse” icon – this will launch the file manager instead of the image manager.

      2) The thumbnail images have the exact same filename as the full size image – it is just inside a “thumbs” folder. So if your full size image was `uploads/images/image1.png`, then the thumbnail would be in `uploads/images/thumbs/image1.png`.

      3) Not sure what you’re trying to do here but it seems out of the scope of this plugin – this plugin doesn’t supply links for files and I guess this would largely depend on how your “download.php” file is setup.

      Let me know if that makes sense.

  11. Ivor Humphreys

    This is superb for Images and Media but what about browsing to add, say, a hyperlink to download a PDF. I get the image browser. Or am I missing something?
    Kind regards,
    Ivor H

    • Hi Mehment thanks for the info I will check it out, should really look at adding this in to the plugin as a few people have mentioned it now ;)

  12. Jimmy

    Hi there, this plugin is great, really nice and simple way of handling images, however i cant get the file_browser_callback function to work, the button just doesnt show, working on TinyMCE v 3.5.8

    thanks in advance

  13. Sumit Bajracharya

    For the error “Unidentified index tab..”, replace line number 54 of index.php with
    “$tabno = (int)(isset($_GET[‘tab’])? $_GET[‘tab’] : 0);”.. It should work fine…

  14. pete buzz

    This is exactly what i was looking for !

    Works great (running IIS, classic ASP)

    thank you – where is the donate link ?

  15. koushik

    i want to upload images in different folders so that while browsing each client can see only his uploaded images.

    can i do that .

    if yes please suggest…

    thanks in advance

    • Hi Koushik

      This should be simple enough to do if you are comfortable with handling these kinds of things in PHP already.

      Basically, when initialising TinyMCE you have to set `open_manager_upload_path`, you could add the user ID or something similar here so each user has their own uploads folder, to use the example we have already it would be something like:

      open_manager_upload_path: '< ?php echo $user_id; ?>/uploads/',

      You would need to make sure that these folders are created first by your scripts before trying to use them.

      I would just note that this is potentially not very secure so make sure your users are not passing along secure data or anything that should be kept private or you have other measures in place to protect their data.


  16. koushik

    thank you Ross Morsali

    i have one more doubt

    when ever the client browse for image in the server i want to show them only the content of his folder where he has uploaded his images.

    how to do that

    • The upload path is the same as the path for getting the images for the user, so if you do as I mentioned, and set the upload path using the user ID, then when they browse images using the plugin, they will only see their own images.

  17. koushik

    thank you Ross Morsali

    Its working properly…

    thanks for the info.

    can u tell about

    Notice: Undefined index: tab in /Applications/XAMPP/xamppfiles/htdocs/d/tinymce/jscripts/tiny_mce/plugins/openmanager/index.php on line 54

    Thanks again

  18. koushik

    can u plz tell me why

    is creating folder on local server but not on the apache server.

    and for image uploading its working properly on local server but in webserver its showing

    Error: There was a problem uploading the file, please try again

    and sometimes problem with the permission in upload folder

    • Hi again Koushik, if mkdir cannot make folders on the live server and cannot get the right permissions then the plugin will not work, you need to make sure this can work first and follow all the steps of the tutorial. There could be many reasons mkdir does not work, unfortunately this is out of the scope of my support for this plugin! I would contact your hosting provider to see what the problem is. Thanks :)

  19. Jay

    I got everything running but when I hit browse, it doesn’t show any images. I checked to see if the files are uploading and they are. Please help!

  20. koushik

    Thank you Ross Morsali

    now its working i changed the permission of the folder where new directory is creating..

    Thanks again for the help

    • Hi Fasiha, please download the demo project first? There should be no problems with that. It sounds like you have not correctly configured the upload folder – make sure the variable `open_manager_upload_path` is set correctly, or download the demo project where this has already been done for you. Thanks

    • Hi Fasiha, I can’t tell from this what the problem is exactly. Can you please download the demo project and test this? Please read through the article and check if the permissions are set properly on all your upload folders, have you managed to get any other PHP file upload scripts to work?

  21. Monika

    Hi great tutorial, I’m trying to use it for joomla website. I have a problem with open_manager_upload_path, when I test the CMS I get an error:


    The upload folder is not correctly configured, please ensure the ‘open_manager_upload_path’ variable is correctly initialised in TinyMCE, the path must be absolute or relative (from this plugins directory, where the ‘index.php’ file resides).

    The upload folder must also contain the following directory structure and have the correct permissions set (this script will try to create the sub directories automatically however depending on server setup/permissions this may not be possible).


    I have this plugin in folder: /media/editors/tinymce/jscripts/tiny_mce/plugins/openmanager
    and I want folder /images , /images/thumbs, images/dokumenty to be set as those 3 folders. I changed the code in fileactions.php from

    $mediafolder = “media”;


    $mediafolder = “images/dokumenty”;

    and I set open_manager_upload_path: “../../../../../../../”,

    but I still get that error

    I tried many paths, like:
    open_manager_upload_path: “../../../../../../”,
    open_manager_upload_path: “../../../../../../../../”,
    and absolute path with no success.

    Please help :)

    • Hi Monika thanks for the message, unfortunately absolute paths do not work properly – someone has modified this to work – however it is currently untested by me.

      In regards to the other stuff, you can’t change the file paths easily – the only file path you can change is the upload folder, but the sub folders `images, images/thumbs, media` are hardcoded across several files, if you want to change the names of these you need to go in to the various php files and update – this might be a bit tricky and I really should make this more easy. You might also need to update AJAX/JS files (I haven’t looked at the code in a while).

      I would suggest keeping the sub folder names as they are (if you can live with that) and and work on getting your relative path working properly – please download the standalone demo project and test that and let me know how it goes?


  22. nishant

    your demo project not working it is causing a javascript error while uploading a file in open manager after click ing on upload button.Let me know if you have any solution for it

  23. Thankyou

    Thanks very much nice work! A tip for getting correct upload path in config, view the dialog box in seperate window and play with directory path in url by adding ../ as appropriate

  24. Shad

    It works perfectly on my local host which is where I initially tested. However, when I uploaded it to my web host I get an error that’s associated with mod_security and that the way to fix it is by making some slight changes to apache. Got intouch with my host (HostGator) since I’m on a shared hosting plan and they told me that my only option is to get a virtual or cloud hosting server. Would you know if there’s a less expensive and huslle-free way to fix this error? Oh, by the way – the error (when I click on the tinyMCE button to open the openmanager interface) – says:

    Not Acceptable!

    An appropriate representation of the requested resource could not be found on this server. This error was generated by Mod_Security.

  25. Shad

    Ok, had another chat with my webhost and they’ve made some changes and now it works!!! Good stuff!

  26. Luca

    I have the same problem of Shad!
    “An appropriate representation of the requested resource could not be found on this server. This error was generated by Mod_Security.”
    Does anyone know what i have to say to mywebhost in order to solve the prblem?
    They told me the mod_security has been disables but i have the same problem!

  27. Justin

    Hi – I’m still not clear on how this can be used to upload PDF files and provide a link to them (not convert them to an image). You say you need to use the Media plugin but PDF isn’t an option for that plugin. Thanks!

    • Hi Justin, if you read the other comments this plugin does not do that, this plugin is solely used as a TinyMCE file uploader where TinyMCE allows a file uploader – this is in 2 places – when using the built in “insert image” functionality, and when using the built in “insert Media”, neither of which will allow what you are trying to achieve.. This plugin then allows you to upload files within those two specific areas.

      To be honest, what you are asking for seems to be quite a popular feature request, and wouldn’t be too difficult to implement, so I may add this in the future although I am not actively updating this plugin as it is for an old version of TinyMCE.


  28. Lae

    Hi Erwin,
    i’m triyng the plugin but i see tha it can’t upload a pdf file, i mean it made the uploading in the dir, but when you tried to submit it you get error

    • Hi Lae, as I mentioned several times in the comments, this plugin works as a file browser for TinyMCE when inserting images or embedded media, it does not officially support uploading files and inserting links to those files

  29. Zolee

    I would like to inquire that the Open Manager when would be available for TinyMCE 4.x, please.

    • admin

      Hi Zolee, I had plans to create this but right now that project is completely on the backburner so I have no idea when this will be available atm :/

  30. jenifer

    Hi, i just wanna choose the tinymce on my website, can i ask that Open Manager have upload video function? thanks

  31. nishant

    hi, i have use it in two web but one server give error that file permission issue.

    i have set same file permission and code both but still give such error , need urgent help on it.

    • Hi nishant, if you can’t get the right file permissions you’ll need to contact your host to see what they can do. Without it this plugin will not work.

  32. Greg


    I am using TinMCE 3.x version and I have problems with uploading images with polish letters in name of files, like

    tesciór.jpg e.g
    or with images with names like

    test cos i juz.jpg

    or when file has big JPG like


    after uploading those files I cannot see them, and cannot add them to editor.

    Is it any solution for this? I love your plugin, but this is a problem for me, solving one or two of them would be great.

    Three will be awsome.

    Can anybody helps me?

    • Hey Greg, I’m providing limited support for this plugin as it uses and old version of TinyMCE I’m not really developing this anymore. I’m sure the PHP script is somewhere renaming files with polish characters so then it can’t find the thumbnails and in turn means that your gallery remains blank.

      I don’t imagine its too hard to fix but I can’t guarantee I’ll ever update this plugin again :(

  33. Mahdi Nasrabadi

    Hi. I installed it and it works correctly, but on the top of openmanager window, this error shown:

    Notice: Undefined index: tab in /var/www/vhosts/ on line 54

  34. David Horvath

    I dont konw what to say just delete my comments :) i am working online and you set the jquery trough internet, so i linked it to local and its fine. thanks a lot for the plugin

  35. Elmurod

    Hello Ross Morsali, Thank you very much for doing such special thing that helped me su much. I really appreciate this and hope to see the new version capable with tinymce 4.x version.

  36. artur

    Hi! what is a max file size? Where can i change the limit, because it seems to be limited to 100MB.

    • Ross

      Hey artur this is dictated by your server settings so you need to see what your host allows

  37. Hi Ross,

    I installed Open Manager into my project. It is Awesome. Thank you very much. But here’s
    the problem I have…

    If I upload an image that contains any uppercase characters it doesn’t work.
    The images get uploaded to a linux webserver and their filenames are saved correctly, but
    the filename that tinymce3 creates, in the img tag, gets converted to lowercase, and that does
    not match with what is on the server. So I just get a broken image icon. Has anybody had
    this problem? Please help.


    • Ross

      Hmm it’s been a while since I looked at this plugin but from what I remember it worked fine, maybe its the latest version of IE – I’m not actively updating it any more but guess this is something to do with the CSS which should be pretty easy to fix :)

  38. Hi,

    I tested open manager in IE10 and the button [ + Add image ] wouldn’t click when I clicked on it with
    a mouse. The next day I tried again, this time I double clicked the [ + Add image ] button and it works.
    Does anybody know what needs to be changed to get the single click working?


  39. Anji

    it is not working Properly in localhost. iam tried demo in, in editor when i clicked image browse option
    file manager popup open and php file is downloaded. there is no upload option. Pls give me suggestion how to upload image and update the image

    • Ross

      This post is supposed to be the tutorial ;) To be honest I’m not really providing much support for this plugin as its for an outdated TinyMCE – I would recommend downloading the sample project and going from there

  40. Mats

    Thank you for a great file manager.
    Up and running under 2 minutes. Iove it.
    I have one issue though. I can upload .png images but the .png images does not sgow in the tab “browse imges”.
    I can see the png images in the folders with my ftp program.

  41. The plugin works only TinyMCE version 3 or lower, is there version for latest version of TinyMCE? the version 4?

    • Ross

      Latest version of TinyMCE is 4 – this only supports 3 and is no longer supported – there are plenty of alternatives out there!



Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>