How to implement a custom File Manager in TinyMCE 4

The TinyMCE 4 javascript editor supports HTML5 and features a new interface and a complete rewrite of all plugins. TinyMCE is the standard WYSIWYG editor for online CMS and websites: if you have a custom file manager attached to the image button, it’s time to think about updating its loading code.

To do this in minutes, you can add a quick hack to the new image plugin. Of course, this tutorial covers a standard approach not related to any File Manager in particular. Your final working code will be strictly related to the File Manager in use, and its file upload and file select tools.

Step 1: get the plugin file

Start by downloading TinyMCE standard package and put it in your development environment. Every JavaScript file is now minified, so you have do download the TinyMCE development package and copy only the “js/tinymce/plugins/image/plugin.js” file in the corresponding folder of the standard package.

Create a safe copy of the original “plugin.min.js” file and rename the new one to “plugin.min.js”, so that TinyMCE would load the uncompressed file instead of the minified one.

Step 2: create the “File Manager” TinyMCE custom button

To add the “File Manager” button, editing the “js/tinymce/plugins/image/plugin.js” file, adding this line:

{name: 'my_file_manager', type: 'button', text: 'File Manager', onclick: openMyFileManager }

to the plugin element block (around line 87), after the opening code:

win = editor.windowManager.open({
 title: "Edit image",
 data: data,
 body: [

You can test it loading the TinyMCE editor in a sample page; the Image popup with the new “File Manager” button should look like this: Now, add a custom function to open the file mananger, like this:

function openMyFileManager() {
  src = win.find('#src')[0];
  window.open('PATHTOMYFILEMANAGER?tag_name='+src._id,'','width=800,height=540 ,toolbar=no,status=no,menubar=no,scrollbars=no,resizable=no');
 }

You can add it just before the “win = editor.windowManager.open … ” block around line 87.

Step 3: create a JavaScript callback in your File Manager

Now switch to your File Manager. Every one is different, but there should be an event or javascript function loaded when the user selects the image to put inside the editor. Once you locate that function, all you have to do is to get the selected image url and put it in the “source” field of the TinyMCE Image popup, whose ID is given by the “tag_name” you passed before as a GET parameter, plus a fixed “-inp” suffix. Then, you can close the File Manager.

Using JavaScript, given the TAG_NAME and IMAGE_URL parameters, you can do it like this:

window.opener.document.getElementById(TAG_NAME+"-inp").value=IMAGE_URL;
window.close();
window.opener.focus();

That’s it!

TinyMCE 4 is a good development platform, the new releases are even better. Happy customizing!