File and image management plugins for TinyMCE
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 (free)
- TinyFCK (free)
- Kae’s File Manager (free)
- TinyMCE Ajax File Manager (free)
- TinyBrowser (free)
- SMExplorer/SMImage (commercial)
- MCFileManager/MCImageManager (commercial)
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.)
Browse by tags:
Share this article:
Subscribe to this site for regular updates
28 responses to File and image management plugins for TinyMCE. Add your own.
Adding to your list i found Tinymce Ajax File Manager @ PHP Letter
Very easy to implement and good instructions on the website.
Thanks Luke. I had actually come across that at one point but forgot about it when it came time to write the article.
Just yesterday the member of EEclub.ru published the version of LG-TinyMCE with possibility to work with KFM (Kae’s File Manager (with images support)).
You can read about it here, post #44 (link for download)
Hi Demona, thanks for the link. I hadn’t come across KFM before and it seems like it’s quite complex to set up. It would be good if there was a demo of it on the author’s site so people could see whether the time spent setting it up was worth it or not.
Unfortunately, I don’t now the author of KFM :(. I agree that he need a demo. But I had tested it with LG “TinyMCE Plus KFM” yet. It’s really easy - you don’t need to modify anything - just to copy KFM plugin from archive to TinyMCE plugins folder, and install “LG TinyMCE Plus KFM” like usual “LG TinyMCE”. All options (and access for different group of user) can be done with extension setting menu.
Screenshot
Screenshot2
Thanks Demona. I might download it and give it a try.
You were quite right Demona: easy to set up and quite easy to use. I’ve updated the article to include it.
It has been said a few times in this article that KFM does not have an online demo. However, if you go to http://kfm.verens.com/ and look to the left of the big Download button, I have placed a demo right there.
Maybe I should make it more obvious.
Thanks for testing KFM - I hope you enjoyed it, and I hope you will also enjoy release 1.4 when we let it out!
Hi Kae, thanks for droping in. Sorry, you’re right, there is a demo on your site and I completely missed it.
As far as testing KFM goes, I’m a bit confused by it now. I set it up OK locally and on a couple of other installations of EE with no problems, but then a further two installations that I tried, I was getting a PHP error in the popup window and I’m not sure what I’ve done differently.
I haven’t tested it myself but maybe add this to your list:
http://www.lunarvis.com/products/tinymcefilebrowserwithupload.php
Thanks for the link Klaas. I’ve downloaded TinyBrowser and given it a test run. Setting it up is straightforward, but whenever I try to upload files, the upload process will commence but then give me a File upload failed - please check your permissions error. The permissions on the folder are correct though because uploading using different file managers works fine.
The suggested solution is to upload an .htaccess file with:
SecFilterEngine Off
SecFilterScanPOST Off
but that stops the pop-up working altogether.
If anyone else has set up this plugin succesfully, maybe they could share their experiences with it?
I have just set up Tinybrowser for a project i’m working on and i’ve got no problems with file uploads. I’m pretty impressed with the plugin so far. It’s easy to set up, has a clean interface and some nice features.
John, maybe you can post your problems in this thread over at the moxiecode forum. The author is active there.
http://tinymce.moxiecode.com/punbb/viewtopic.php?id=12705
Hi Klaas, thanks for the link. I’m actually talking to Bryn directly by email so will post an update when we’ve worked out what’s going wrong.
It helps if you check which version of PHP you’re using.
Turns out the sites I was having trouble with were running PHP4+
I was wondering how did you setup the tinybrowser plugin? are you using it in EE?
Hi Aeran, yes I’m running it from inside EE. Still working through the issue with Bryn, the plugin’s creator, as the browser works as far as browsing files goes, but I can’t upload anything.
Nice to hear that john. I hope you’ll the post the workaround here
With regards TinyBrowser, it seems there was a problem with the .htaccess file I was trying to use as it would stop the TinyBrowser window from popping up, but the
SecFilterEngine Off
SecFilterScanPOST Off
were required because my server has mod_security enabled. I tried saving a new version of the .htaccess file and now everything is working as expected.
Hi,
I seem to have a path problem I can’t track down. After clicking the image ‘browse’ button I get the ‘popup’ but with a 404. The path in the URL is http://localhost:9026/js/tinymce/jscripts/tiny_mce/filemanager/browser.html?Connector=co….
This seems odd as the filemanager directory is in tinyfck within the tinymce plugins directory?
Hopefully someone will read this and immediatley spot a mistake I made somewhere.
Thanks
Hi Traverse, the filemanager directory needs to go in the root of the TinyMCE directory, ie, at the same level as the plugins directory.
Fast reply thanks John! Sorry, did I miss that in the instructions?
I actually put the filemanager directory into tinymce/jscripts/tiny_mce/ to get it to work.
So is the rest of the tinyfck directory is ok to stay in the tinymce plugins directory?
One more question… would you say the tinyfck solution is the best of the ones you listed?
Thanks
There’s no specific instructions but when you unzip the download from the TinyFCK site, that’s how the folders are set up.
I’d probably go for the SM, KFM or TinyBrowser plugins ahead of TinyFCK.
I’ve installed the KFM extension but I get this error when I try to browse files:
“Internal Server Error
The server encountered an internal error or misconfiguration and was unable to complete your request.
Please contact the server administrator and inform them of the time the error occurred, and anything you might have done that may have caused the error.
More information about this error may be available in the server error log.”
Is there a specific version of tiny_mce that’s needed? The version we’re using is 3.0.7
Hi Smartpill, you’d have to check the requirements on the KFM site. I’ve been using it with 3.1.0.1 and higher.
Also, this error can happen if your web server does not support some of the directives in the root .htaccess file in KFM. Best thing to do is ask at the KFM forum if you continue to have trouble.
Looks like the .htaccess directives were the cause. Mainly:
<IfModule mod_php4.c>
php_value magic_quotes_gpc off
</IfModule>
Thanks
Hi John,
Thanks for the great article. I’ve successfully installed Tiny MCE with the Tinybrowser plugin and all is working as it should unless you’re using EE’s Multiple Site Manager.
The problem arises that you can only set one series of upload destinations in Tinybrowser config file. If you are using MSM this means that images for each site are only uploaded to the default MSM site’s URL.
Have you come accross this problem and if so have you found a solution?
Thanks
Hi Odran, no, I’ve not had cause to set this up with a MSM site yet so haven’t encountered this issue. I know the SM plugins let you specify different destinations via the extensions settings though.