How to use the TinyMCE Filemanager Plugin

TinyMCE is my favourite WYSIWYG editor (and I’ve used quite a few editors over the years). It’s far from perfect – some of the code it produces can be a little non-standards compliant and we  often get clients who copy and paste directly from Word, which causes all sorts of problems. But on the whole I think it’s a pretty solid solution.

One thing it can’t do by default though, is allow people to upload and manage files, and when you’re building a CMS, this is a pretty commonly requested thing to do. They do offer a solution though, in the form of their FileManager Plugin. The only catch is, unlike the TinyMCE itself, you have to pay for it. (Which personally I don’t have any problem with as it’s very reasonably priced at 40 euros and coders have to eat too 🙂

The reason for this article is to give a brief outline of how to use the FileManger plugin, which is available as a download via the Moxiecode website.

The FileManager plugin extends the functionality of the basic TinyMCE Editor, giving people the ability to upload files and create links to them within documents. For example, you might have a PDF of sales data which you want to publish on the web. The TinyMCE FileManager lets you upload this document and then link to it via the editor.

How do I upload files with the FileManager?

It’s really very easy, first you need to write something which will act as the link anchor. So you need to give people something to click on in order to download the file. This can be a text link or an image, it doesn’t matter.

1. See Fig 1. Below for an illustration. Select the text you want to make the link, then click on the little chain icon, indicated by the red square.

2. Next, click on the ‘browse’ icon on the window that pops up. This is shown below, again with a red square around the icon.

3. This will show you the FileManager itself. Now select the file you want to create the link to and you’re pretty much done! (Jump to step 8 below.)

4. If you want to upload a new file, click on the ‘Upload’ link, as shown in the image below and indicated by the red square…

5. Next click the ‘Choose files’ button to select the file you want to upload from your computer. If this for some reason doesn’t work with your browser/computer, then try using the ‘basic uploaded’ provided instead.

6. Once you’ve selected your files, click the ‘Upload to server’ button as shown below.

7. Now you have successfully uploaded your file to the server, you just need to insert it into your document.

8. To do this, make sure you have selected the file you want to insert by ticking the checkbox to the left of it. Then click the ‘Insert’ link, just below the preview window. (As indicated again, by the red square in the image below.

9. Then you’ll be on familiar territory with the normal “add link” window. You might want to select for the link to open in a new window (_blank) so that the file (in the case of PDFs) doesn’t open on the screen and replace your website.

So there you have it. I hope you agree that it’s pretty quick and easy to upload a file using the FileManager and then create a link to it.