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:
   

   	/**
   	* ColdFusion File Manager Plugin for TinyMCE 4
   	* updated to support TinyMCE 5 by kartogram
   	*
   	* Saman W Jayasekara sam@cflove.org
   	* Twitter : cfloveorg
   	*
   	*/
   	(function () {
   	var filemanager = (function () {
   	'use strict';
   	tinymce.PluginManager.add('filemanager', function(editor, url) {
   	if (typeof fileManagerpath != 'undefined') {
   	var fileManagerpath = editor.settings.fileManager_path;
   	} else {
   	var fileManagerpath = editor.settings.url_converter_scope.baseURI.directory + '/plugins/filemanager/index.cfm'
   	}
   	editor.ui.registry.addIcon('filemanagericon', '<svg height="48" viewBox="0 0 48 48" width="22" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h48v48H0z" fill="none"/><path d="M4 12H0v10h.02L0 40c0 2.21 1.79 4 4 4h36v-4H4V12zm40-4H28l-4-4H12C9.79 4 8.02 5.79 8.02 8L8 32c0 2.21 1.79 4 4 4h32c2.21 0 4-1.79 4-4V12c0-2.21-1.79-4-4-4zM14 30l9-12 7 9.01L35 21l7 9H14z"/></svg>');
   	function showDialog() {
   	editor.windowManager.openUrl({
   	title: 'My Files Home',
   	url: fileManagerpath,
   	width: Number($(window).innerWidth()) - 40,
   	height: Number($(window).innerHeight()) - 80
   	});
   	}
   	// Add a button that opens a window
   	editor.ui.registry.addButton('filemanager', {
   	tooltip: 'Insert From My Files',
   	icon: 'filemanagericon',
   	onAction: showDialog
   	});
   	// Adds a menu item to the tools menu
   	editor.ui.registry.addMenuItem('filemanager', {
   	text: 'My Files',
   	//context: 'insert',
   	icon: 'filemanagericon',
   	onAction: showDialog
   	});
   	return {
   	getMetadata: function () {
   	return {
   	name: 'My Files',
   	url: fileManagerpath
   	};
   	}
   	}
   	});
   	}());
   	})();

   view raw plugin.js hosted with ❤ by GitHub
   
   
   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:
   

   external_plugins: { "filemanager" : "/admin/jscripts/tinymce/plugins/filemanager/plugin.js"},

   view raw TinyMCEinit.js hosted with ❤ by GitHub
   
   
   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:
   

   	menu: {
   	file: { title: 'File', items: 'newdocument restoredraft | preview | print ' },
   	edit: { title: 'Edit', items: 'undo redo | cut copy paste | selectall | searchreplace' },
   	view: { title: 'View', items: 'code | visualaid visualchars visualblocks | spellchecker | preview fullscreen' },
   	insert: { title: 'Insert', items: 'image link media template codesample inserttable filemanager | charmap emoticons hr | pagebreak nonbreaking anchor toc | insertdatetime' },
   	format: { title: 'Format', items: 'bold italic underline strikethrough superscript subscript codeformat | formats blockformats align | removeformat' },
   	tools: { title: 'Tools', items: 'spellchecker spellcheckerlanguage | code wordcount' },
   	table: { title: 'Table', items: 'inserttable | cell row column | tableprops deletetable' },
   	help: { title: 'Help', items: 'help' }
   	},

   view raw TinyMCEinit.js hosted with ❤ by GitHub
   
   
   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.