iBrowser – Free Image Uploader for Tiny MCE (and SPAW, FCKeditor, Xinha, and HTMLarea)

Screenshot

I, like many other people, did not realize that TinyMCE did not include the image upload plug-in as shown in the full featured example.  But after using TinyMCE for quite some time without the image upload feature, I became comfortable with the interface and the source code, and was hesitant to switch.

In the forum I came across a third party plug-in iBrowser written by Jaeger Consulting that works with Tiny MCE, SPAW, FCKeditor, Xinha, and HTMLarea.

The readme is vague at best and doesn’t offer any solutions to troubleshoot problems.  Of course, the plug-in didn’t quite work right out of the box.  Following are the steps I took to implement iBrowser.

  • Download the latest version of both iBrowser (1.3.8) and TinyMC E (3.1.1 at the time of this writing)
  • Upload the “ibrowser” directory to the TinyMCE “plugins” directory
  • Create one or more directories to store uploaded images and edit config/config.inc.php

$cfg['ilibs'] = array (
array (
‘value’ => ‘/path/from/webroot/images/’,
‘text’ => ‘Images’,
),
array (
‘value’ => ‘/path/from/webroot/gallery/’,
‘text’ => ‘Gallery’,
),
);

  • Ensure that ibrowser/scripts/phpThumb/cache, ibrowser/temp, and your image directories have write privilages (i.e. 755).
  • Copy the file ibrowser/interface/tinyMCE.editor_plugin.js with your corresponding version number to ibrowser directory.  If your version number is not there, use generic javascript file without the version number.
  • When you include TinyMCE in a page with javascript (tinyMCE.init), make sure that the following options are included.

tinyMCE.init({
...
plugins : "ibrowser",
...
theme : "advanced",
theme_advanced_buttons3_add : "ibrowser",
});

  • If you included everything correctly, you should see a new icon in your editor.  If you don’t, you are either using an incompatible versions of TinyMCE/iBrowser or your paths are wrong.  Try the other TinyMCE Javascripts and double check where the iBrowser directory is located.  It should be in the plugins directory of TinyMCE.  If that doesn’t work, download a version of TinyMCE that is compatible with iBrowser (see interface directory).
  • If you do see the new icon but nothing happens when it is clicked then you must add a line to the begining of the javascript file you are using.

var ib = null;

  • If you open iBrowser, click Insert, then click Upload and you do not see a green icon with a white arrow to the right of the Browse button then you must modify ibrowser.php to have a smaller input box, say 40 instead of the default 53.  This uncovers the upload button.

<input name=”nfile[]” type=”file” class=”fldlg” id=”nfile[]” size=”40″

  • That should be all you need to enjoy the benefits of uploading images to web pages with iBrowser.  Let me know if anyone else finds any other problems that I didn’t address.  Enjoy!

Related Stuff

Eliot is a software developer by trade and a entrepreneur by spirit. He has built web software for the likes of YMCA, UPS, FedEx, Ford and Harcourt, and helped launch mobile apps like Coupon Policy, TourWrist, and Pocket Legal.

Join him as he learns and shares his experiences of marketing his own products online.

Subscribe via RSS
@EliotDill

Leave a Reply