I’ve been using IMCE Wysiwig Bridge on all my Drupal sites as it is the easiest to implement. However it is very un user friendly as its UI tends to intimidate users. So I decided to try elFinder which promises to fix that, however it is the exact opposite of IMCE Wysiwyg, being easier to look at and use BUT so much more difficult to install.
The problem is that elFinder’s installation instructions were mostly meant for standalone Wysiwyg installations and not in a Drupal context. So here’s how I did it.
First, install your Wysiwyg module as usual (in my case I used TinyMCE 3.x, which is compatible with elFinder along with many other popular Wysiwyg modules).
Then, download elFinder 1.x (NOT 2.x) and install at /sites/all/libraries, being careful to rename the folder ‘elfinder’, so you’ll end up with
'../sites/all/libraries/elfinder/elfinder.php.html'
activate the elfinder module. If you did not install elFinder properly you will getting the error
‘elFinder library was not found. Please download it from http://sourceforge.net/projects/elfinder/files/ and install to . (Currently using elFinder Not found)’
Now that you have installed elFinder and TinyMCE, you now have to edit TinyMCE so that it will make use of elFinder to find files for you. The link to do that is here https://github.com/Studio-42/elFinder/wiki/Integration-with-TinyMCE-3.x, however the instructions are for a standalone installation.
I learned how to do it in a Drupal setting by reading this: https://www.drupal.org/node/1714068#comment-6812332
Basically all you have to do is make a module like this in your /sites/all/modules folder:
sites/default/modules/MYMODULE/MYMODULE_tinymce_callbacks.js
Then in it, paste this:
file_browser_callback : 'elFinderBrowser'
function elFinderBrowser (field_name, url, type, win) {
var elfinder_url = '../sites/all/libraries/elfinder/elfinder.html'; // use an absolute path!
tinyMCE.activeEditor.windowManager.open({
file: elfinder_url,
title: 'elFinder 2.0',
width: 900,
height: 450,
resizable: 'yes',
inline: 'yes', // This parameter only has an effect if you use the inlinepopups plugin!
popup_css: false, // Disable TinyMCE's default popup CSS
close_previous: 'no'
}, {
window: win,
input: field_name
});
return false;
}Then you go to /sites/all/libraries/elfinder and create ‘elfinder.html’, then paste this inside it:
<!-- Include jQuery, jQuery UI, elFinder (REQUIRED) -->
<!-- TinyMCE Popup class (REQUIRED) -->
<script type="text/javascript" src="../sites/all/libraries/tinymce/tiny_mce/tiny_mce_popup.js"></script>
<script type="text/javascript">
var FileBrowserDialogue = {
init: function() {
// Here goes your code for setting your custom things onLoad.
},
mySubmit: function (URL) {
var win = tinyMCEPopup.getWindowArg('window');
// pass selected file path to TinyMCE
win.document.getElementById(tinyMCEPopup.getWindowArg('input')).value = URL;
// are we an image browser?
if (typeof(win.ImageDialog) != 'undefined') {
// update image dimensions
if (win.ImageDialog.getImageData) {
win.ImageDialog.getImageData();
}
// update preview if necessary
if (win.ImageDialog.showPreviewImage) {
win.ImageDialog.showPreviewImage(URL);
}
}
// close popup window
tinyMCEPopup.close();
}
}
tinyMCEPopup.onInit.add(FileBrowserDialogue.init, FileBrowserDialogue);
$().ready(function() {
var elf = $('#elfinder').elfinder({
// set your elFinder options here
url: 'php/connector.php', // connector URL
getFileCallback: function(file) { // editor callback
FileBrowserDialogue.mySubmit(file.url); // pass selected file path to TinyMCE
}
}).elfinder('instance');
});
</script>
Then, go to /admin/config/content/wysiwyg and click ‘edit’ on TinyMCE operations. Click ‘Buttons and Plugins’. You will need to check the ‘Image’ and ‘elFinder’ boxes, and finally you will have your elFinder.
There are lots of options to explore at ‘admin/config/media/elfinder’. I would start with establishing a Custom Path so as to keep files neat and tidy.
Easy right? No?
Well you’re right. It is downright confusing which is why I’m writing down how I did it here as well. However if it is important to you for your users to have an easier time uploading images to their articles and blog posts then this should be a good alternative to look at.
