Image Upload Plugin for TinyMce

It took me quite some time (…) to figure out a way to upload images from within the TinyMce online html editor, so I’m documenting it here…

File upload is not included in the default download, so you have to look for third party plugins. Don’t waste your time however searching the linked third party plugins page, the 2 file upload scripts I tried there were buggy and outdated.

In the forum I found the excellent Ibrowser plugin by Jaeger Consulting (it not only works with tinyMCE, also with SPAW, FCKeditor, Xinha, and HTMLarea). The 652 KB download appears to be a stripped-down version of the much more complex Imanager plugin (4MB zipped!), that gives you a some additional image manipulation tools.

Then (summarized from readme.txt for a simple setup, have a look at it if you want to know more):

  • download the latest version, unzip and upload the Ibrowser files to tiny_mce\plugins\ibrowser
  • select the one, 2 or more directories you want to be able to insert images from and and upload to and indicate them with easy to understand names (that will show up in the interface) in config/config.inc.php:

    $cfg['ilibs'] = array (
    array (
    'value' => '/path/from/webroot/images/',
    'text' => 'Sprekers',
    ),
    array (
    'value' => '/path/from/webroot/gallery/',
    'text' => 'Sponsors',
    ),
    );
  • chmod these directories and additionally the directories ibrowser/scripts/phpThumb/cache and ibrowser/temp to 755 or 777 (depending on the privileges your webserver has – try with 755 first if you’re not sure)
  • copy tinyMCE.editor_plugin.js file into the iBrowser plugin directory and rename it to “editor_plugin.js”
  • somewhere in an included or inline javascript, you should have the “tinyMCE.init” statement, configuring your TinyMce setup:

    Example for the latter:

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

And finally, if you don’t find the upload text box after clicking the “insert” button, it’s hidden behind the Upload Icon :-) :
Upload Icon for IBrowser V1.3

IBrowser V 1.3 screenshot

251 Responses to “Image Upload Plugin for TinyMce”

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