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


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

    • Ross

      I’m afraid Development & Support for this plugin has stopped because it is only compatible for TinyMCE 3.x – 4.x has been out for roughly over a year now.


  1. 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!


  2. 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.

    • 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

  3. 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

  4. 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?


    • 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 :)

  5. 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.


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

  7. 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.

  8. 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

  9. 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

  10. 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 :(


Leave a Reply

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