System Integration

MCImageManager is made to be easy to integrate with your system and it also seamlessly integrates with TinyMCE (our open source editor).

Integrating MCImageManager as standalone

The most common way to use MCImageManager as a standalone application is to simply add browse buttons in forms that then enables the user to select a file and insert that URL into the form, for example selecting a image or document.

In order to create a browse button you will need to add the mcimagemanager.js file and then add a special javascript link that opens up the MCImageManager. This javascript link includes a call to a special function that takes a number of parameters.

NOTE: Check the mcImageManager.browse function, replacing the .open function.

The function with it's parameters looks like this: mcImageManager.open(form_name, element_names, [file_url], [js], [settings]).

  • form_name - The name of the form element or a index number.
  • element_names - The name of the form elements, like input fields. These fields will be filled with the selected file URL.
  • [file_url] - Optional file URL, this is the default path that will be used by the MCImageManager.
  • [js] - Optional JavaScript callback function name, this function will have the selected URL as it's first argument and a file info object as the second.
  • [settings] - Optional JSON style settings these settings are the same as in the page level init call. These settings will override the page level settings.

The example below shows what lines needs to be added to a simple form page. The lines are marked in bold.

Example how to use MCImageManager in standalone mode

<html>
<head>

<title>Example</title>
<script language="javascript" type="text/javascript" src="js/mcimagemanager.js"></script>
</head>
<body>

<h3>Simple example:</h3>
<form name="example1">
Some URL field: <input type="text" name="url" value="Select file">

<a href="javascript:mcImageManager.open('example1','url');">[Browse]</a>
</form>

<h3>Iframe example:</h3>
<form name="example2">
<div><iframe id="myiframe" src="about:blank" style="width: 600px; height: 450px"></iframe></div>

Some URL field: <input type="text" name="url" value="Select file">
<a href="javascript:mcImageManager.browse({target_frame:'myiframe');">[Browse]</a>
</form>

</body>
</html>

Integrating MCImageManager with TinyMCE

Copy the imagemanager directory into the plugins directory of TinyMCE then add "imagemanager" to the list of plugins in the TinyMCE plugins option. Consult the TinyMCE manuals for details on this option.

Example of how to add the MCImageManager to TinyMCE as a plugin

<script language="javascript" type="text/javascript" src="../jscripts/tiny_mce/tiny_mce.js"></script>
<script language="javascript" type="text/javascript">
tinyMCE.init({
mode : "textareas",
theme : "advanced",
plugins : "imagemanager"
});

Integrating MCImageManager with MCFileManager

If you have both MCImageManager and the MCFileManager installed on the same system you can integrate them with each other. This is done by changing the filemanager.urlprefix to the URL location of the MCFileManager and adding the filemanager to the general.tools option. This will add a new filemanager button that links to the MCFileManager.