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:
tiny_mceplugins
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:
tinyMCE.init({
...
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:
tinyMCE.init({
...
file_browser_callback: "openmanager",
...
})
And then we need to set our upload path – this must be a relative path:
tinyMCE.init({
...
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:
tinyMCE.init({
...
theme_advanced_buttons1 : "openmanager",
...
})
To take the full example from TinyMCE’s website and setup the plugin, our initialisation code would look like this:
tinyMCE.init({
// 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 UPLOAD MODS
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
[metaslider id=958]
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
Mattijs
Older version of TinyMCE can be found here 3.5x:
http://archive.tinymce.com/download/older.php
Ross
Thanks Mattijs!
Mobasher Fasihy
Hi
This plugin is nice and used it but one problem that i have is that it can’t upload media to media folder, but image can be uploaded. media and images folder are in the same media folder.
Ross
Hi there, this plugin is quite outdated and no longer supported I’m afraid. Thanks for checking it out.
Ubaid
Thank You so much……… 🙂
Mallikarjuna Rao
Hi,
How to make setting for images sort by date when i browse the images in tinymce ?
Thanks
http://tnews10.com
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.
Thanks
Waren
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!
Thanks
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
Hi there – I’m afraid I’m no longer working on this plugin – feel free to contribute / fork over on Github – https://github.com/rmorse/Open-Manager
siddhesh
Thanks ! you saved my lot of time
Freddy
Hey bro i just ask some tutorial ? would you make tutorial about cekeditor and kcfinder ? please
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
Catatan Belajar
Can i use this plugin in TinyMCE 4.x ?
Ross
I’m afraid not
Freddy
hey thanks alot, i have downloaded it and tested, well it support for tinymce versi 4
Ross
unfortunately not
Subash Fernando
Excellent work !, and Thank you verymuch
Anji
it is not working Properly in localhost. iam tried demo in asp.net, 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 plugin is PHP, not ASP, you will need to find another plugin to do this.
Geoff Williams
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?
Thanks.
Amila
Nice one this works well on firefox but Internet Explorer it’s not 🙁
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 🙂
Geoff Williams
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.
Thanks.
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
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.
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
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/drdelirclinic.com/httpdocs/admin/manage/includes/tinymce/jscripts/tiny_mce/plugins/openmanager/index.php on line 54
Ross Morsali
Hi there, please read the comments, a user had this problem before however it was due to an inaccurate file path
Greg
Hello
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
test.JPG
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?
Ross Morsali
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 🙁