Easy Drupal content creation with FCKEditor and IMCE
Posted on: 28 May 2009
All the Drupal sites I build use the FCKEditor module to provide a nice WYSIWYG editor for the content administrators.For most sites, this works fine. However, my current site has rather a lot of pictures to manage.
The FCKEditor built-in image manager does a great job of simplifying uploading new images and creating folders to keep them organised, but has a huge drawback of not showing thumbnails for the images. This is fine as long as you give all your images good descriptive names, but users being users this is never going to happen!
CKFinder looks like a promising enhancement which will provide this, but this is a commercial product. The licensing is very reasonable, but right now any licensing cost is too much!
Enter IMCE - another Drupal module which adds file management with thumbnails. This plugs into the FCKEditor very easily, and is free and open source. All sounds perfect, until you actually try to browse images on the server - the interface looks dreadful:
Happily though, IMCE uses the same PHPTemplate theming engine as Drupal, so it's just a case of copying imce-content.tpl.php and imce-content.css from the IMCE module directory into your active theme directory, make whatever changes you want, and PHPTemplate will pick up the new instructions.
With a bit of work though it can be made to look much more intuitive, and fit the overall site theme:
The trickiest part was changing the text on the "Send to FCKEditor" button. As IMCE is designed to work with a number of different rich text editors, it uses the name of the selected editor in the button name:
imce.setSendTo(Drupal.t('Send to @app', {'@app': appName}), sendtoFunc);
This means that the Drupal translation layer can be used to translate the "Send to" part of the caption, but not the "FCKEditor" part. My users have never heard of FCKEditor, and don't want to have to.
Since FCKEditor depends on the user having Javascript enabled, I can add a sneaky bit of jQuery to my new imce-content.tpl.php file:
$(document).ready(function() {
$("li#op-item-undefined a").html("Select Image");
});
and Bob's the proverbial.