How to use the Filemanager with tinyMCE 3 or 4

A dedicated page explains how to integrate an external Filemanager to TinyMCE v3.

Few changes are required for TinyMCE 4, please see the code below :

    file_browser_callback : function(field_name, url, type, win) { 
		    
	            // from http://andylangton.co.uk/blog/development/get-viewport-size-width-and-height-javascript
	            var w = window,
	            d = document,
	            e = d.documentElement,
	            g = d.getElementsByTagName('body')[0],
	            x = w.innerWidth || e.clientWidth || g.clientWidth,
	            y = w.innerHeight|| e.clientHeight|| g.clientHeight;

		    var cmsURL = 'index.html?&field_name='+field_name+'&langCode='+tinymce.settings.language;
		    
		    if(type == 'image') {		    
		    	cmsURL = cmsURL + "&filter=image";
		    }
		
		    tinyMCE.activeEditor.windowManager.open({
		        file : cmsURL,
		        title : 'Filemanager',
		        width : x * 0.8,
		        height : y * 0.8,
		        resizable : "yes",
		        close_previous : "no"
		    });		    

		}

Note that field_name parameter passed into the url is mandatory to return back the value.