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.

Permalink • Print • Comment

Trackback uri

http://seoroot.com/blog/computing/programming/tinymce-ibrowser-plugin.html/trackback

24 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?

Arjun @ 9:53 am:

we have problem with tinymce ibrowser plugin we have writting following code

tinyMCE.init({
mode : “textareas”,
theme : “advanced”,
elements: “template_content”,
theme_advanced_buttons2 : “cut,ibrowser”,
plugins : “ibrowser”,
theme_advanced_buttons2_add : “ibrowser”,
});

but not display image uploader icon on the tinyMce tool bar ??

violenCe @ 1:35 pm:

hi
have problem with tinymce ibrowser plugin, too

the iBrower icon is displayed in my tinymce toolbar, but i cant open it on mouseclick?

Gonay @ 7:39 am:

hello!

have the same problem…

the iBrower icon is displayed in my tinymce toolbar, but i cant open it on mouseclick.

what happen?

Pino @ 11:41 am:

Good day to everyone!
I need someone to help me to create a plugin for tinyMce to upload and/or select images. It is similar to plugin advimage included into tinyMce, but with different fields.
What I would need is exactly according to this image: http://img534.imageshack.us/img534/4006/pluginv.jpg
All images have to be stored in a folder called “images”, and thumbs in a subfolder called “thumbs”.
Therefore, if I upload a new image or I select an image I should have the possibility to select alignment (see picture to understand what I mean).
Is there anyone able to do that?
My email address is pinonirvana@gmail.com.
Thank you and hear you soon…
Pino

ab @ 3:31 pm:

Typical!, publish things that many people needs to get traffic but doesn’t works!!!

ANGELA @ 4:58 pm:

Hi,
I can’t find the file “tinyMCE.init”.someone can help me?
Thank you!!!!

cx02 @ 5:55 pm:

hi. I have problem the same with violenCe. the iBrower icon is displayed in my tinymce toolbar, but nothing is happened when I click it.

Lesk @ 5:52 pm:

It dosent show up, the icons dosent show. Followed the instructions and got the newest iBrowser for newest tinymce. Any advise?

testerhome @ 1:00 am:

i have problem with conf file i no solution yet any help me please..
here the error below:
Deprecated: Function ereg_replace() is deprecated in C:\wamp\www\ost\ibrowser\config\config.inc.php on line 121
any friend can help me pleaes

ymai @ 10:44 am:

Hello everyone
iBrowser works fine with Chromium 20.0 (and probably Google Chrome).
Works nearly with Firefox 17.0.1: the little green upload buttons are not visible because the file inputs are too large.
Does not work with Opera 12.12: nothing happens when firing the iBrowser button in the tinyMCE toolbar.

Leave a Comment