My TinyMCE MCFileManager/MCImageManager trick: When media is file, not image (or vice versa)

TinyMCE LogoAt work (I switched fulltime jobs a little while ago, remember?) we use MCFileManager and MCImageManager as the file- and imagemanager for TinyMCE. The former – quite obviously – handles files and the latter images … but what about media (flash, quicktime, etc.)? At work MCImageManager popped up for managing media, yet we wanted MCFileManager to kick in … *BOOM* the start of an investigation to making MCFileManager handle media files.

WARNING: This post is written for MCImageManager and MCFileManager 3.0.2. As of version 3.0.5 of these plugins, this is configurable through the TinyMCE Config

All.your.sourcecode.are.belong.to.bram.us!

As I hadn’t worked with MCFileManager nor MCImageManager before I dove into the sourcecode of the plugins to see what is happening when each plugin is loaded. Turns out the plugins were written to play nice when used together. In laymens terms it comes down to this:

  • The MCFileManager plugin it basically states: If it’s an image and MCImageManager is loaded: use MCImageManager to handle the image; else (viz. file or media) use me
    (@see Line #50 of filemanager/js/mcfilemanager.js)
  • The MCImageManager plugin states: If it’s a file and MCFileManager is loaded: used MCFileManager to handle the file; else (viz. image or media), use me.
    (@see Line #50 of imagemanager/js/mcimagemanager.js)

The Quick Fix

The quick fix would be to edit imagemanager/js/mcimagemanager.js, to make it so that media is passed to MCFileManager. As I don’t like modding the sourcecode of an existing plugin because that would make upgrading a pain in the ass, I continued my quest to finding an elegant solution as the two statements above gave me an opening into tricking the plugins which one would load what.

Can I kick it? Yes you can!

The opening lies in the fact that both plugins can handle media. Given this I quickly looked at the config we use, right where the plugins are loaded. There I found:

[js]tinyMCE.init({

plugins : “inlinepopups,filemanager,imagemanager,paste,contextmenu,media,bramus_cssextras”,

});[/js]

(yes, Netlash was already using bramus_cssextras even when I wasn’t working there yet 🙂).

So where’s the problem? That line quite obviously loads MCFileManager first which states that MCImageManager should be used when it’s an image, right? Right, but not 100% right

1 background, 2 scenarios

TinyMCE loads the plugins in serial mode: one by one (viz. the one after the other). If (for example) the first plugin loaded states that the variable window.myVar equals 100; and the second plugin loaded states that it’s 200, one will end up with window.myVar being equal to 200. Given that as a background, we end up with 2 scenarios:

Scenario A: filemanager, imagemanager

The first scenario is the one where MCFileManager is loaded first (viz. its init function is executed first), and then MCImageManager. In code that reads:

[js]tinyMCE.init({

plugins : “filemanager,imagemanager”,

});[/js]

Now, when clicking on the browse button when placing a link, an image or media, MCImageManager is executed first as it was loaded last (flash back to the background I wrote above). MCImageManager will tell to use MCFileManager if it’s a file, and continue working if it’s something else (an image or media).

Scenario B: imagemanager, filemanager

The second scenario is the one where MCImageManager is loaded first (viz. its init function is executed first), and then MCFileManager. In code that reads:

[js]tinyMCE.init({

plugins : “imagemanager,filemanager”,

});[/js]

Now, when clicking on the browse button when placing a link, an image or media, MCFileManager is executed first as it was loaded last. MCFileManager will tell to use MCImageManager if it’s an image, and continue working if it’s something else (a file or media).

Scenario Matrix

Translating the above into a little table, we end up with this nice “scenario matrix”:

What is loaded? Scenario A Scenario B
file MCFileManager MCFileManager
img MCImageManager MCImageManager
media MCImageManager MCFileManager

Yes, it’s the last row that’s most important of it all 😉

Summarizing it all

In order to use MCImageManager to handle media, init the plugins like this:

[js]tinyMCE.init({

plugins : “filemanager,imagemanager”,

});[/js]

In order to use MCFileManager to handle media, init the plugins like this:

[js]tinyMCE.init({

plugins : “imagemanager,filemanager”,

});[/js]

Happy coding!

B!

Published by Bramus!

Bramus is a Freelance Web Developer from Belgium. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.