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
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.
Ross Morsali
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.
jenifer
Hi, i just wanna choose the tinymce on my website, can i ask that Open Manager have upload video function? thanks
Ross Morsali
Thanks jenifer however I am no longer providing updates for this plugin – there is a new version of TinyMCE out now!
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 :/
Arslan
Thanks Alot
saman vahdat
you save my time . thank you
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
Ross Morsali
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
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!
Ross Morsali
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.
Thanks
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!
Shad
Ok, had another chat with my webhost and they’ve made some changes and now it works!!! Good stuff!
Ross Morsali
Glad to hear, Luca is having the same problem as you wondering if you can shed some light on how you fixed it? 🙂
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.
Shad
This is really cool.. works like a charm!
Ross Morsali
Thanks Shad 🙂 Please leave a rating over on the WP site if your registered!
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
Ross Morsali
Thanks for the tip 🙂
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
Ross Morsali
What environment are you using, do you have a link I could look at?
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:
“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).
uploadfolder/images
uploadfolder/images/thumbs
uploadfolder/media”
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”;
to
$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 🙂
Ross Morsali
Hi Monika thanks for the message, unfortunately absolute paths do not work properly – someone has modified this to work – https://github.com/rmorse/Open-Manager/pull/1 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?
Thanks!
fasiha
http://www.care-24-7.com/Test/full.html
this is my editor but its not showing every image.
Ross Morsali
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?
fasiha
Error: Upload folder not correctly configured
Ross Morsali
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
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
Ross Morsali
No problem glad you got it working 🙂
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!
Ross Morsali
Hi Jay, did you download the demo project to test?
koushik
can u plz tell me why
mkdir(“tinymce/upload_files/$insertedid”);
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
Ross Morsali
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 🙂
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
Ross Morsali
Please read the other comments, this has already been answered 🙂