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

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 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.

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 …

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).

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

Yes, it’s the last row that’s most important of 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]