Skip navigation
Tyssen Design — Brisbane Freelance Web Developer
(07) 3300 3303

File and image management plugins for TinyMCE

By John Faulds /

If you're using ExpressionEngine (EE) with a WYSIWYG editor, chances are you're using either TinyMCE or FCKEditor. I myself use TinyMCE and it seems like a lot of people prefer it to FCKEditor, but for one thing – it doesn't have good image and file management capabilties built in by default.

So in this article, I’m going to look at some options available via plugins to give your clients control over their own images and other file uploads. The ones that I’ve come across include:

iBrowser

iBrowser is a free file management plugin and it was the first I came across when I began using TinyMCE and while it doesn’t do a bad job, its interface is a bit confusing and some don’t find it very intuitive. Instructions for its integration with ExpressionEngine can be found on the wiki, but basically, after downloading and unzipping the plugin, upload it to TinyMCE’s plugins folder, set the path to your images folder in the config file and add ibrowser to the plugins and buttons lists of your TinyMCE settings which you’ll find under the Extensions tab if you’re using either EE’s TinyMCE first-party plugin or the more flexible version from Leevi Graham (it enables you to choose which textareas to assign as WYSIWYG editors; the EE version doesn’t).

TinyFCK

As mentioned in the introduction, the main rival to TinyMCE is FCKEditor which comes with a good file manager already built in. So some enterprising souls decided they would take the only thing missing from TinyMCE – a free file management plugin – from FCKEditor and integrate the two. The result is TinyFCK.

To get this to work in ExpressionEngine, you need to take the example code from the TinyFCK home page and add it to the script that initalises TinyMCE. I use the LG-TinyMCE extension on my sites, so I did this by simply adding the code to ext.lg_tinymce.php just after:


// render the tinymce init
$r .= "\n" . '
<script type="text/javascript">
//<![CDATA[
    tinyMCE.init({'.$settings_parts.'});

and just before:


//]]>
</script>';

So what you should end up with will look like:


// render the tinymce init
$r .= "\n" . '
<script type="text/javascript">
//<![CDATA[
    tinyMCE.init({'.$settings_parts.'});

    function fileBrowserCallBack(field_name, url, type, win) {
    var connector = "../../filemanager/browser.html?Connector=connectors/php/connector.php";
    var enableAutoTypeSelection = true;

    var cType;
    tinyfck_field = field_name;
    tinyfck = win;

    switch (type) {
        case "image":
            cType = "Image";
            break;
        case "flash":
            cType = "Flash";
            break;
        case "file":
            cType = "File";

            break;
    }

    if (enableAutoTypeSelection && cType) {
        connector += "&Type=" + cType;

    }

    window.open(connector, "tinyfck", "modal,width=750,height=400");
    }
//]]>
</script>';

You then need to open up /filemanager/connectors/php/config.php and set the path to your images folder at line 27. If you use default EE folder structure, it will look like this:


// Path to user files relative to the document root.
$Config['UserFilesPath'] = '/images/uploads/' ;

The last thing you then need to add this to your TinyMCE settings:


file_browser_callback : "fileBrowserCallBack"

Once you’ve followed all these steps, your file/image manager should be good to go but there’s a couple of refinements that can be made to make it more usable. By default, when you first set up the FCK file manager, it will create new folders based on the type of file you’re uploading in the location that you’ve specified. For instance, if your default upload location is /images/uploads/, the file manager will create a new folder called Images inside that when you first upload an image. If you don’t like this behaviour (and I didn’t), you can change it by adding some lines to the end of /filemanager/connectors/php/config.php:


$Config['FileTypeDirectories']['Image'] = "";
$Config['FileTypeDirectories']['File'] = "documents";

This is to let you upload images directly into /images/uploads/ and upload other files into /images/uploads/documents/. You then need to open /filemanager/connectors/php/io.php and change:


function GetUrlFromPath( $resourceType, $folderPath ) {
	if ( $resourceType == '' )
	return RemoveFromEnd( $GLOBALS["UserFilesPath"], '/' ) . $folderPath ;
	else
	return $GLOBALS["UserFilesPath"] . strtolower( $resourceType ) . $folderPath ;
}

to:


function GetUrlFromPath( $resourceType, $folderPath ) {
	global $Config ;
	if ( $Config['FileTypeDirectories'][$resourceType] == '' )
	return RemoveFromEnd( $GLOBALS["UserFilesPath"], '/' ) . $folderPath ;
	else
	return $GLOBALS["UserFilesPath"] . $Config['FileTypeDirectories'][$resourceType] . $folderPath ;
}

And then change:


function ServerMapFolder( $resourceType, $folderPath ) {
	// Get the resource type directory.
	$sResourceTypePath = $GLOBALS["UserFilesDirectory"] . strtolower( $resourceType ) . '/' ;

	// Ensure that the directory exists.
	CreateServerFolder( $sResourceTypePath ) ;

	// Return the resource type directory combined with the required path.
	return $sResourceTypePath . RemoveFromStart( $folderPath, '/' ) ;
}

to:


function ServerMapFolder( $resourceType, $folderPath ) {
	global $Config ;

	// Get the resource type directory.
	$sResourceTypePath = $GLOBALS["UserFilesDirectory"] . $Config['FileTypeDirectories'][$resourceType] . '/' ;

	// Ensure that the directory exists.
	CreateServerFolder( $sResourceTypePath ) ;

	// Return the resource type directory combined with the required path.
	return $sResourceTypePath . RemoveFromStart( $folderPath, '/' ) ;
}

Another thing missing from the FCK file manager by default is the ability to delete files, but Bram Van Damme comes to the rescue with a good description of how to add this ability. (I found out after having gone through this process that there’s another file manager for FCKEditor, MCPUK, which already has this built in. And the people who put together the TinyMCE/FCK file manager combo have also done one for MCPUK. But I had trouble with folder permissions with this one and, having already customsised the FCK file manager to my liking, gave up.)

SMExplorer/SMImage

I only just came across these plugins from Synasys Media last week (and looks like I missed out on getting it as freeware by only a couple of weeks 😉 ). The site is in German but it’s still fairly easy to work out what you need to know and that is that:

  • there are plugins for images, files and symbols for both TinyMCE and FCKEditor,
  • there’s also multi-upload plugins for both to enable uploading of multiple files simultaneously,
  • personal licences start at €15 and commercial licences (for use on unlimited sites) start at €100 (significanly cheaper than the alternatives offered by Moxiecode – see below).

Set-up is also very easy: at its most basic, all you need to do is upload the plugin to the plugins folder and then add smexplorer and smimage to your lists of plugins and buttons in your TinyMCE settings, although there are a variety of other configuration options which can also be added to your TinyMCE settings (i.e., no need to edit any other files – all the settings can be controlled via your EE control panel).

The interface is much better than both iBrowser and the FCK file manager and really the only thing that sets it apart from the Moxiecode offerings is that some of the main function icons don’t have labels next to them so you need to hover them to find out what each one does (although the icons do give you a fair idea of what they’re for).

MCFileManager/MCImageManager

Moxiecode, the makers of TinyMCE do provide these two very good plugins, but they’re the most expensive of the ones I’ve looked at and as far as I can tell, the only advantage they have over the similar offerings from Synasys Media is, as I mentioned above, a slightly better interface with labels on some of the main function icons. All other functionality seems to be identical.

And with prices for a single domain at $73 US and $47 respectively, and for unlimited usage at $440 and $293, they may soon find SMExplorer and SMImage will become the more preferred commercial option.

Kae’s File Manager (KFM)

As pointed out in the comments by Demona, KFM is another free plugin which can be used with either TinyMCE or FCKeditor. I’d not heard of it before and the KFM website doesn’t exactly sell its virtues too well (it could do with an online demo), but Demona said it was easy to set up, so I thought I’d give it a try. And it turns out Demona was right: set up is as easy as uploading the plugin folder and a modified version of LG-TinyMCE which can be downloaded from EEclub.ru, and then enabling the extension and modifying your settings. As well as the usual TinyMCE settings, the extension also lets you configure KFM including which panels to show, which member groups to give access to it and the location of your uploads directory.

The interface is much better, and set up was much easier than for TinyFCK, and for a free plugin, from my limited testing so far it certainly gives the commercial ones a run for their money. The only slight problem I found was that when creating a new folder, when trying to highlight the default text that comes up with the mouse, the whole window would move and the text wouldn’t be selected; you had to use the backspace key instead.

TinyMCE Ajax File Manager

Also pointed out in the comments by Luke Vincent is TinyMCE Ajax File Manager by PHPLetter. This one comes with an online demo, so I haven’t tested it personally (although it would be good if the demo wasn’t limited to uploading files under 2Kb). Set-up doesn’t appear to be as straightforward as for SMExplorer/SMImage or KFM, and the fact that those two can largely be controlled from the extension’s settings in the control panel would make me prefer them over PHP Letter’s offering.

TinyBrowser

Another pointed out in the comments by Klaas is TinyBrowser by Lunarvis. There’s no online demo which is a shame because it’s actually a very good file management plugin, is user-friendly, and not very hard to set up. It uses Flash to upload files and you can add multiple files simultaneously with progress bars to let you know how the upload process is going.

To set it up in EE all I had to do was edit the config file that comes with TinyBrowser to point to the correct uploads folder, and then modify ext.lg_tinymce.php to add


$r .= "\n" . '<script type="text/javascript" src="/path_to_tinymce/plugins/tinybrowser/tb_tinymce.js.php"></script>';

just after


$r .= "\n" . '<script type="text/javascript" src="' . trim($this->settings['script_path']) . '"></script>';

(There’s actually two places that the script path is called depending on whether you’ve selected Gzip compression from inside the extensions settings or not.)