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 
icon and a popup window will appear.
To upload an image click on the 
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.
Spread the word
del.icio.us Digg Furl Google StumbleUpon Technorati Windows Live Yahoo! Help
14 Comments on TinyMCE iBrowser Plugin »
Timo Kriel @ 10:44 am:
Thanks for these helpful instructions.
Everything worked up to the point where a thumbnail was to be viewed by clicking on its filename in the Images list. An error message would appear (in image format, not text) in the preview panel. Despite lots of efforts I could not track down the exact fault, but it seemed phpThumb put folders in some path strings that were not right. What solved it was to move the whole site from where it was to directly under the Apache root (ubuntu: /var/www). The site used to be under my home folder with a symbolic link from the Apache root. This solved the problem . I am sure a more clued up person would know why, and hopefully relieve my mysery.
The installation is running under Ubuntu Edgy, with Apache2.
neal @ 2:33 pm:
hi
I have my init like this
tinyMCE.init({
theme : “advanced”,
mode : “textareas”,
plugins : “fullpage”,
theme_advanced_buttons3_add : “fullpage”
});
how do i add ibrowser without removing fullpage plugin, or do i have to remove it?
RMVGaines @ 11:07 pm:
Neal,
theme_advanced_buttons3_add : “ibrowser”, “fullpage”
I would think though, I myself am no expert and just started working with tinymce and the ibrowser plugin.
bimbolera @ 5:54 am:
this is depressing but i was confused with pasting the editor_plugin.js to editor_plugin_src.js because i don’t know WHICH LOCATION will i be pasting editor_plugin.js. i’ve searched the whole tinyMCE and found many editor_plugin_src.js within different folders. i hope i can get an answer soon! thanks!
yug @ 8:04 am:
I have added this contribution with Cre Loaded 6.3
It is working fine for IE but it is not working for Firefox.
Please let me know how to fix fo firefox.
Andrew @ 6:36 pm:
Hi did you ever find a solution to this problem. I had the same problem with this error message displayed in the preview window.
Warning: file_put_contents(C:\Users\charles.hughes\Documents\Business_&_Education\Natcoll\apache_root\sandbox\tinymce_w_ibrowser\javascript\tiny_mce\plugins\iBrowser\scripts\phpThumb\cache\f\f0\f05\f05a\phpThumb_cache_localhost_srcf05a2185232f71e71ea1bf85f1b31f26_par0b9e73569dbbfe81d5e1ff2a11d92887_dat1248041658.jpeg) [function.file-put-contents]: failed to open stream: No error in C:\Users\charles.hughes\Documents\Business_&_Education\Natcoll\apache_root\sandbox\tinymce_w_ibrowser\javascript\tiny_mce\plugins\iBrowser\scripts\phpThumb\phpthumb.class.php on line 540
**Headers already sent in file “C:\Users\charles.hughes\Documents\Business_&_Education\Natcoll\apache_root\sandbox\tinymce_w_ibrowser\javascript\tiny_mce\plugins\iBrowser\scripts\phpThumb\phpthumb.class.php” on line “540″, dumping error message as text:**
phpThumb() v1.7.9-200712090829
OutputThumbnail() failed - headers already sent
Prasanna @ 11:22 am:
when selecting the preview option getting an error image saying phpThumb() v1.7.9-200712090829 message
Please tell me solution to fix.
eri @ 9:44 am:
hi,
i follow the instruction as written but when i wrote the pluginit does not work. if i remove plugin list from the code it works.
below code not working… what is wrong with it?
tinyMCE.init({
theme : “advanced”,
mode : “exact”,
elements: “icerik”,
plugins : “ibrowser”,
theme_advanced_buttons2 : “ibrowser”,
theme_advanced_toolbar_location : “top”
});
irones @ 5:31 am:
cannot display ibrowser.gif. Why?
shahid @ 2:26 am:
Exrtremly poor plugin
constanza lópez @ 6:34 pm:
Existe alguna forma de crear un directorio desde la interfaz del ibrowser?
constanza lópez @ 4:43 pm:
Create directories How do you do it through the interface?
Markus @ 8:13 am:
You need to the new version of iBrowser 1.4.x if you want to use it with TinyMCE 3.x. You can download it from here (until the link changes next time
:
http://visions4net.com/downloads.html
The iBrowser version from the download link above only works with the plug-in API from TinyMCE 2.x, unless you modify the editor_plugin.js .
matar @ 9:45 am:
ib is null or not an object !! any idia what should I do to fix that?