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
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
Ross Morsali
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.
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
Ross Morsali
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:
tinyMCE.init({...
open_manager_upload_path: '/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.
Thanks
John Rainey
Thank you so much for this. This has saved me so much time. You are a genius!!
Ross Morsali
np 😉
jawad
How can i fix Network Error (tcp_error) ?
Ross Morsali
Can you provide some more info? I think the problem is not to do with the plugin!
pete buzz
This is exactly what i was looking for !
Works great (running IIS, classic ASP)
thank you – where is the donate link ?
Ross Morsali
Thanks Pete, not sure how you got it working on classic ASP? :S Unfortunately no donate link atm, probably should set one up! 🙂
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…
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
Ross Morsali
Hi Jimmy, have you downloaded the demo project?
Mehmet Ali BAYHAN
For the link popup window, i found a solution. At plugins directory edit the file
tinymce/plugins/advlink/js/advlink.js
at line 31 and 32 change file to media
http://www.codesend.com/view/76c145b62f2dbf565a96914292c3e8c9/
Ross Morsali
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 😉
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
Ross Morsali
Looks like I’ll be including this feature 😉 Should be up in the next week or so!
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
Ross Morsali
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.
Thanks
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 asp.net or know of any that you can recomend for me on .net environment?
Thanks
Lucious
Ross Morsali
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!
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.
Ross Morsali
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 🙁
Jay Bee
Hi, thanks for the good work you are doing. My request is if you could create one that also plugs into CKeditor.
Ross Morsali
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.
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.
Ross Morsali
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:
if(isset($_GET['tab']))
{
$tabno = (int)$_GET['tab'];
}
else
{
$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!
Taka
isn’t media_manager_upload_path should be open_manager_upload_path?
Ross Morsali
Ah yes you’re right! Thanks for the comment – the demo download should have everything set up correctly, updating the post now 😉
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)
Ross Morsali
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!
Ross Morsali
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 😉
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!
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!
Ross Morsali
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 🙂
erwin
where is demo ?
i get problem with upload path ?
can you explain, where is default i put upload folder ?
Ross Morsali
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.