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.

Batman has written 222 articles

24 thoughts on “TinyMCE iBrowser Plugin

  1. Timo Kriel says:

    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.

  2. neal says:

    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?

  3. RMVGaines says:

    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.

  4. bimbolera says:

    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!

  5. yug says:

    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.

  6. Andrew says:

    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

  7. Prasanna says:

    when selecting the preview option getting an error image saying phpThumb() v1.7.9-200712090829 message

    Please tell me solution to fix.

  8. eri says:

    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”
    });

  9. constanza lópez says:

    Existe alguna forma de crear un directorio desde la interfaz del ibrowser?

  10. constanza lópez says:

    Create directories How do you do it through the interface?

  11. Markus says:

    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 .

  12. matar says:

    ib is null or not an object !! any idia what should I do to fix that?

  13. Arjun says:

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

  14. violenCe says:

    hi
    have problem with tinymce ibrowser plugin, too

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

  15. Gonay says:

    hello!

    have the same problem…

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

    what happen?

  16. Pino says:

    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

  17. ab says:

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

  18. ANGELA says:

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

  19. cx02 says:

    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.

  20. Lesk says:

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

  21. testerhome says:

    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

  22. ymai says:

    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 Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">