System Integration

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

Integrating MCFileManager as standalone

The most common way to use MCFileManager 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 file or document.

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

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

The function with it's parameters looks like this: mcFileManager.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 MCFileManager.
[js] - Optional JavaScript callback function name, this function will have the selected URL as it's first argument.
[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 MCFileManager in standalone mode

<html>
<head>

<title>Example</title>
<script language="javascript" type="text/javascript" src="js/mcfilemanager.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:mcFileManager.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" id="url" value="Select file">
<a href="javascript:mcFileManager.browse({fields : 'url', target_frame : 'myiframe'});">[Browse]</a>
</form>

</body>
</html>

Integrating MCFileManager with TinyMCE

Copy the filemanager directory into the plugins directory of TinyMCE then add "filemanager" 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 MCFileManager 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 : "filemanager"
});

Integrating MCFileManager with MCImageManager

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

Get your own copy