TinyMCE iBrowser Plugin

Ever wanting to have an interface to manage your images in TinyMCE editor? Then this could be what you were looking for, the iBrowser plugin. iBrowser allows you to manage your image files via web browser (so far i have it tested only on IE and Firefox browsers, but other browser should work well). It will enable you to do the following.

Create directories
Upload, rename and delete images
Change image attributes such as image size and orientation
Requirements

PHP 4.x/5.x compiled with GD library support (how to install GD with php coming soon).

Installing iBrowser on TinyMCE WYSIWSYG editor

Download the iBrowser package and decompress it in your tinyMCE plugins directory /tiny_mce/plugins/ibrowser
Inside the ibrowser/config directory, open config.inc.php and change the following to reflect to your setup
$cfg[‘ilibs’] = array ( // image library path with slashes; absolute to root directory – please make sure that the directories have write permissions
array (
‘value’ => ‘/path/to/your/wwwroot/images/’,
‘text’ => ‘Site Pictures’,
),
array (
‘value’ => ‘/path/to/your/wwwroot/gallery/’,
‘text’ => ‘Gallery’,
),
);

Copy the tinyMCE.editor_plugin.js (you can find it under ibrowser/interface) and rename it to editor_plugin.js. Then copy and paste editor_plugin.js to editor_plugin_src.js ( you should have both the editor_plugin.js and editor_plugin_src.js files)
Change directory permissions of the following directories to 755 or 777. ibrowser/temp and ibrowser/scripts/phpThumb/cache (only for unix/linux systems)
In your tinyMCE initialization line (tinyMCE.init), look for the plugins line then add “ibrowser” (without quotes). Then look for the “theme_advanced_buttons(N)” and add “ibrowser”. see example below:
tinyMCE.init({
mode: “exact”,
elements: “template_content”,
theme: “advanced”,
plugins : “aibrowser”,
theme_advanced_buttons2 : “ibrowser”
});

If everything works fine, you should be able to click the ibrowser.gif icon and a popup window will appear.

ibrowse.png

To upload an image click on the upimg.gif icon to display the browse/file upload field.

Troubleshooting

Problem:

error building image list! or An error occurred while handling file upload.

Solution:

be sure you have the right directory setup in your config.inc.php file and that you have it setup with the right permissions (see installation guide nos. 2 and 4)

If you have comments, suggestions or corrections, Please feel free to post them here.