Recently we have chosen to upgrade our CMS systems to utilize the latest version of the TinyMCE WYSIWYG editor (v5). Not that the 4th iteration of the plugin was any bad, but keeping up with the times is always advisable and therefore ought to be followed. Of course one of the custom plugins that we’ve been using for quite awhile has stopped working due to the changes in the new editor. The plugin in question is ColdFusion File Manager for TinyMCE 4, which can be found here: http://cflove.org/2013/10/coldfusion-file-manager-for-tinymce-4.cfm

It would be a real shame to drop a fully functioning plugin in order to upgrade. Even worse (ideologically) is sticking with an old editor for the opposite. So we took on the task to update in order to win the both worlds. It is worth noting that the plugin itself  is being preloaded in a modal dialog window, so there’s nothing there to be corrected. It is the initialization itself that is the issue and here’s a 6 step guide on how to fix it (the guide is for the self hosted version):

1. Download TinyMCE 5 editor from here
2. Download the File Manager plugin from here and upload it to the plugins directory
3. Inside it find the plugin.js file and open
4. Update the file’s content with the following code:
   
   
   1. The changes include updating browser icon, as the new TinyMCE selected icon is simply hideous as well as multiple updated references to support the new syntax
      
      
5. Go to your editor initialization script and add the plugin to it by appending ’filemanager’ to the toolbar in your chosen position as well as adding the following line to the whole init code:
   
   
   1. Of course correct the path to where you placed the plugin within your project’s structure
      
      
6. Last thing to note, even though it was defined within the plugin.js file, the new entry will not automatically be inserted into the drop-down menu, as the ’context’ feature has been removed from the latest editor version, hence commented out within the code. In order to achieve that you will have to rebuild the entire menu (I know, it’s rather ’inconceivable’). To do so either copy the code below, or adjust it to your requirements and insert it within the main TinyMCE init section:
   
   
   1. As you will notice, the File Manager plugin was inserted into the ’insert’ sub-menu
      
      
7. Additional (aesthetic) step - open File Manager’s style.css file and add ’display:none’ to the #fmtopbar tag. The new editor automatically adds the header and close button to the modal window, hence the native bar becomes obsolete and just duplicates the already existing functionality. 

And that is it. I hope the above will help somebody out. Feel free to ask questions within the comments section below.