Integration with TinyMCE 4.x

In the TinyMCE init code, add the following line:

file_browser_callback : elFinderBrowser

Then add the following function (change the elfinder_url to the correct path on your system):

function elFinderBrowser (field_name, url, type, win) {
  tinymce.activeEditor.windowManager.open({
    file: '/elfinder/elfinder.html',// use an absolute path!
    title: 'elFinder 2.0',
    width: 900,  
    height: 450,
    resizable: 'yes'
  }, {
    setUrl: function (url) {
      win.document.getElementById(field_name).value = url;
    }
  });
  return false;
}

Create (or edit) elfinder.html file. Include jQuery, jQuery UI, and elFinder

<!-- Include jQuery, jQuery UI, elFinder (REQUIRED) -->

<script type="text/javascript">
  var FileBrowserDialogue = {
    init: function() {
      // Here goes your code for setting your custom things onLoad.
    },
    mySubmit: function (URL) {
      // pass selected file path to TinyMCE
      parent.tinymce.activeEditor.windowManager.getParams().setUrl(URL);

      // force the TinyMCE dialog to refresh and fill in the image dimensions
      var t = parent.tinymce.activeEditor.windowManager.windows[0];
      t.find('#src').fire('change');

      // close popup window
      parent.tinymce.activeEditor.windowManager.close();
    }
  }

  $().ready(function() {
    var elf = $('#elfinder').elfinder({
      // set your elFinder options here
      url: 'php/connector.php',  // connector URL
      getFileCallback: function(file) { // editor callback
        // file.url - commandsOptions.getfile.onlyURL = false (default)
        // file     - commandsOptions.getfile.onlyURL = true
        FileBrowserDialogue.mySubmit(file); // pass selected file path to TinyMCE 
      }
    }).elfinder('instance');      
  });
</script>

Alternative method using the new TinyMCE 'file_picker_callback' configuration option

(seems to better populate image dimensions, this integration demo)

In the TinyMCE init code, add the following line:

plugins: "image, link, media", // example
toolbar: "link image media",   // example
file_picker_callback : elFinderBrowser

Then add the following function (change the elfinder_url to the correct path on your system):

function elFinderBrowser (callback, value, meta) {
  tinymce.activeEditor.windowManager.open({
    file: '/elfinder/elfinder.html',// use an absolute path!
    title: 'elFinder 2.0',
    width: 900,  
    height: 450,
    resizable: 'yes'
  }, {
    oninsert: function (file, elf) {
      var url, reg, info;

      // URL normalization
      url = file.url;
      reg = /\/[^/]+?\/\.\.\//;
      while(url.match(reg)) {
        url = url.replace(reg, '/');
      }
      
      // Make file info
      info = file.name + ' (' + elf.formatSize(file.size) + ')';

      // Provide file and text for the link dialog
      if (meta.filetype == 'file') {
        callback(url, {text: info, title: info});
      }

      // Provide image and alt text for the image dialog
      if (meta.filetype == 'image') {
        callback(url, {alt: info});
      }

      // Provide alternative source and posted for the media dialog
      if (meta.filetype == 'media') {
        callback(url);
      }
    }
  });
  return false;
}

Create (or edit) elfinder.html file. Include jQuery, jQuery UI, and elFinder

<!-- Include jQuery, jQuery UI, elFinder (REQUIRED) -->

<script type="text/javascript">
  var FileBrowserDialogue = {
    init: function() {
      // Here goes your code for setting your custom things onLoad.
    },
    mySubmit: function (file, elf) {
      // pass selected file data to TinyMCE
      parent.tinymce.activeEditor.windowManager.getParams().oninsert(file, elf);
      // close popup window
      parent.tinymce.activeEditor.windowManager.close();
    }
  }

  $().ready(function() {
    var elf = $('#elfinder').elfinder({
      // set your elFinder options here
      url: 'php/connector.php',  // connector URL
      getFileCallback: function(file) { // editor callback
        // Require `commandsOptions.getfile.onlyURL = false` (default)
        FileBrowserDialogue.mySubmit(file, elf); // pass selected file path to TinyMCE 
      }
    }).elfinder('instance');      
  });
</script>