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