At 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!