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:
- look for the plugins option and add “ibrowser”
- either add the “ibrowser” button in the theme_advanced_buttonsX option or add an extra theme_advanced_buttonsX_add option if you have used some predefined button set (”theme”)
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 :-) :
Bookmark this post:
Subscribe to future posts:
November 10th, 2005 at 04:40
A million thanks for your article. I was facing the same problems.
Good write up. Thanks again!
November 21st, 2005 at 23:08
Hello
Thanks for your guide.
I had some problems which were gone when I switched the name of editor_plugin.js to editor_plugin_src.js
December 1st, 2005 at 07:37
[...] inymce was not found on this server. Sucks. Oh, well. There’s two options here: iBrowser plugin for TinyMCE - This works really well, except for IE. IE [...]
December 6th, 2005 at 12:46
The ibrowser window is to small, so i can’t push the “go-button” in the upload file section (the green arrow). How can I fix this? I’m using firefox and osx.
December 9th, 2005 at 12:23
Great work, thanks.
Remember to also change the path in the config.inc.php file for:
$cfg['ilibs_dir']
To the image folder. I also had to chmod the folders mentioned in this tutorial to 777 - 755 wouldn’t work, so it may be the same for others :)
Again, thankyou!
December 13th, 2005 at 00:30
@Harry,
I’m afraid I can’t help you there, I’m not an OSX user, and I have not experienced the problem myself. I suggest you try the TinyMce or the Jaeger Consulting Forums:
http://tinymce.moxiecode.com/punbb/viewforum.php?id=3
http://www.j-cons.com/forum/index.php
December 16th, 2005 at 16:20
@ Harry
I too couldn’t upload pics because the “Browse…”-button that lets you select a file on your computer was hiding the button that lets you say: “Yes, please upload!”
I changed the size of the input field in ibrowser.php, made it 10 chars shorter.
I had this problem with Firefox on Unix (Opera worked well).
The j-cons forum seems to be rather empty …
Cheers,
N
December 18th, 2005 at 20:40
Thanks for this info. It worked great. I’ve wanted to add image upload to TinyMCE for quite a while.
On my system, the iBrowser dialog (which is very cool) always snaps into the top left position on my monitor, whenever I click any of its buttons. Is there a way to make it stay where I put it on the screen?
December 20th, 2005 at 19:44
iBrowser seems to want to force images to be either 400px or 120px wide. If I uncheck all those boxes, iBrowser won’t upload. Is there a way to fix this? Thanks in advance for any info.
December 21st, 2005 at 01:28
@Vik,
I’m afraid I can’t help you there, I have not experienced the problem myself. Maybe you could describe your system (OS, browser…) so other readers might better recognize the issue?
Even if there’s not a lot of activity at the forums mentioned, I encourage everyone to (cross)post questions and solutions there (as well), since that is the place were info should be centralized not at this odd blog posting whose aim it is to point people to the right resources.
http://tinymce.moxiecode.com/punbb/viewforum.php?id=3
http://www.j-cons.com/forum/index.php
December 21st, 2005 at 18:05
Thanks for the feedback, Pascal. I’ll try the forums.
December 22nd, 2005 at 16:29
@Vik,
>”iBrowser seems to want to force images to be either 400px or 120px wide. If I uncheck all those boxes, iBrowser won’t upload. Is there a way to fix this? Thanks in advance for any info.”
edit “ibrowser/config/config.inc.php” -> remove the comments on the first $cfg['thumbs'] array entry (about line 47)
it should look like this: (without the “/*” and the “*/”)
$cfg['thumbs'] = array (
array (
’size’ => ‘*’,
‘ext’ => ‘*’,
‘crop’ => false,
),
… more arrays there
this will make a button “Original” appear :)
hope this helps!
btw. I got the same “snapping window” problem (firefox 1.06 / osx 10.3. If anybody finds a fix for this, i’d be glad :)))
bassy regards,
benjamin
January 20th, 2006 at 15:31
you are ·ne f·t b·st·rd i l·ve y·u
thanks for the precious help!
February 5th, 2006 at 23:56
OK, I’ve been racking my brain. I’m getting an “Error building image list!” where the list of images should be. I have my path to the images set properly, I can’t understand why this would be happening. Anyone have any suggestions?
February 8th, 2006 at 15:43
I had the same problem as Nic, but ended up having to make both a editor_plugin.js and a editor_plugin_src.js for the plugin directory to make it work.
( As all the other plugins seem to have )
- Thanks for taking the time to put this tutorial up, very helpfull.
February 17th, 2006 at 17:56
When using iBrowse I get an error message when I click on the insert or pop-up buttons. In the main image area i get the following message:
Error building image list!
I set my directory to /new/images/uploads/ and set permissions to 777. Is there something I am missing
Thank you,
Brandon
February 24th, 2006 at 21:55
copy tinyMCE.editor_plugin.js file into the iBrowser plugin directory and rename it to “editor_plugin.js”
Where is this file located? I copied the editor_plugin.js file from the _template directory in plugins, but it doesn’t seem to work. I don’t get a button showing up to upload images :-$.
Am I just retarded?
March 3rd, 2006 at 10:11
You can find this file in ibrowser\interface
March 15th, 2006 at 13:44
I get the “Error building image list!” error message too. Is PHP missing a library?
March 16th, 2006 at 04:14
Lemming, try placing a dummy jpg file in your upload folder and see if it then appears in your list. It worked for me although it only removes that error and forces an image in that folder. Uploading still fails for me on FireFox under OS X 10.4 and I still get the No GD Library detected, which I think is untrue… and I have ImageMagick installed too which although I’ve set the path manually is not being detected.
Plus, the interface for this plugin is not all that intuitive, some buttons stay gray when they should be enabled and other glitches, but I know of no other such tool.
I just need a simple “upload” button which creates the link automatically. Something like a Browse button to select an image and upload it and it auto-inserts an image tag with the src set to the uploaded image. No manipulations or anything. Does anyone know of such a tool for tiny_mce?
March 21st, 2006 at 10:41
Has someone managed to get this working on Windows server? I’m getting “Error building image list!”, seems like it can’t find the path no matter what I do. Otherwise this seems like a great peace of software.
March 23rd, 2006 at 11:05
Hello, I love this tool allready, but I am not experienced at all.
I don’t understand what to do with:
// use static image libraries
$cfg['ilibs'] = array ( // image library path with slashes; absolute to root directory - please make sure that the directories have write permissions
array (
‘value’ => ‘/dev/im/assets/images/’,
‘text’ => ‘Images’,
),
array (
‘value’ => ‘/dev/im/assets/gallery/’,
‘text’ => ‘Gallery’,
),
);
Can someon please explain me where to create a writeable image dir and hwo to set this in above script?????
Thanks!!!!
March 24th, 2006 at 11:42
Hi, I got Ibrowser to work, but when I insert an image the path will be ../path/to/images, how do I make the path absolute?
March 26th, 2006 at 21:59
Im getting phpThumb() error when i try to upload any image. I don´t know how to fix it …. if anybody fixed this problem or has any experiences with it, please write me email.
Thanx
April 27th, 2006 at 22:13
I also have error with the phpThumb…. it looks like it duplicates the dir where it looks for the file… i’ m trying to understand the code
June 30th, 2006 at 16:52
Hi, I was very happy finding your iBrowser and even more happy finding your installation guide. Anyway, I have not succeeded installing the iBrowser. I am no expert in scripting, so if it won’t be too much, I would like to ask you for some more advise.
I have the page also on my localhost (localhost/[nova]). There are image-folders:
localhost/[nova]/[images] - general images used within the whole website
localhost/[nova]/[galleries]/[nature]
localhost/[nova]/[galleries]/[monuments]
localhost/[nova]/[galleries]/[events]
localhost/[nova]/[galleries]/[patners]
… maybe also more in the future.
Tiny_MCE is in localhost/[nova]/[tinymce] folder.
Please, help me with the setup. I have read your guide in CMSimple forum and followed it the best I could. Without result. I can see the iB bbutton, I can start the iB. There are the names of image folders in the list. But there is only a message that the image list couldn’t be created.
Thank you so far.
July 1st, 2006 at 13:20
Hi Martin,
I’m not the author of IBrowser and I can’t give any support on it - I just documented the way I got it working.
Try the forums at
http://tinymce.moxiecode.com/punbb/viewforum.php?id=3
http://www.j-cons.com/forum/index.php
as I suggested in my December 21st comment.
July 20th, 2006 at 01:37
If you are having problems loading your image list into iBrowser, read this post:
http://tinymce.moxiecode.com/punbb/viewtopic.php?id=4099
Specifically, the error I was getting:
Error building image list!
Hope that helps.
Treye
July 20th, 2006 at 22:08
Great job, just what I was looking for. The one thing that is not clear from your article or the docs is WHERE you copy the editor_plugin.js (and the src one) to. Answer for my tinymce setup at least is tiny_mce/plugins/ibrowser.
Thanks a bunch!
July 24th, 2006 at 19:41
[...] 1) It uses version v0.9 of tinymce 2) I could not upload images/attachments (unless if I am missing something Jack) A search for one that can do point 2 yields things like ibrowser (instructions here) etc BUT for me, not quite what I was looking for e.g. I don’t talk of php in my environment for one. [...]
July 31st, 2006 at 11:09
Hello,
your howto doesn´t work with tinyMCE 2.0.5.x !
1. For tinyMCE 2.0.5.x just copy the ” /imanager/ ” directory to ” /tiny_mce/plugins/ ” .
2. Edit the ” /imanager/config/config.inc.php ” like the way described in the howto.
3. Copy from ” /imanager/interface/ ” the two files ” tinyMCE 2.05_editor_plugin.js ” and ” tinyMCE 2.05_editor_plugin_src.js ” to the ” /imanager/ ” directory. Rename it to ” editor_plugin.js ” and ” editor_plugin_src.js “.
4. Edit the ” /tiny_mce/advanced.js ” add to the line plugins : “imanager” and to the line theme_advanced_buttonsX_add : “imanager” .
That´s it. It should work now :)
Btw. very good plugin. keep it up!
Arne
August 11th, 2006 at 03:09
Hey thanks dude. Instead of spending an hour messing around I followed your instructions and it worked perfectly. You may want to mention the location of tinyMCE.editor_plugin.js though. That’s the only thing that took more than 5 brain cells.
Again, many thanks.
August 14th, 2006 at 21:02
copy tinyMCE.editor_plugin.js file into the iBrowser plugin directory and rename it to “editor_plugin.js” ???
can’t find tinyMCE.editor_plugin.js >in the tinyMCE folder???
August 16th, 2006 at 11:06
To have absolute path to your image directories you may use something like this:
$cfg['ilibs'] = array ( array (
‘value’ => imageAbsolutePath(’images/’),
‘text’ => ‘Gallery’,
),
and insert next function to end of config.inc.php
function imageAbsolutePath($dirName){
$realpath=realpath(__FILE__ . ‘/../../../../../../../’ . $dirName);
$htmlpath=str_replace($_SERVER['DOCUMENT_ROOT'],”,$realpath);
return $htmlpath . ‘/’;
}
Parameter for $dirImage will be absolute path of your images dir on server. Take care on number of ../ in $realpath. That must be like config.inc.php have slashes to site root (url no local path)
August 16th, 2006 at 12:46
Cant get ibrowser to work with tinymce. I have try with tinymce 2.0.5x! and a new version but no image buttom. Why? HELp
August 19th, 2006 at 21:41
Aight it’s kool. tnx to plugin creator, holler
August 23rd, 2006 at 18:39
Desperately trying to figure out how to get images to be inserted with the full path as what I see when if view the source is:
src=”../uploadimages/…….
when I would want to see src=”http://mydomain.org/uploadimages/…..
I have the
$cfg['furl'] = true;
and have spent hours trying to figure out where the ../ is inserted without any success. I have seen a few mentions of people who have had this problem but no suggestions of how to fix it.
Would appreciate any clues people could give.
cheers
John
August 23rd, 2006 at 19:29
As usual just after I post I finally find the answer. See http://tinymce.moxiecode.com/tinymce/docs/faq.html#paths for details on how to set the path for tinymce. Also note that the file that you have to make those changes in is tiny_mce.js.
September 5th, 2006 at 11:42
nice tool, it works perfectly. is it possible to right-click “image properties” on the picture and get back to the ibrowser- popup?
September 7th, 2006 at 04:27
I had a similar problem with PHPThumb as mentioned in one of the comments. The exact error (in case of a gif image) is:
All attempts to create GD image source failed (GD does not have read support for “Content-Type: image/gif”), cannot generate thumbnail
This can be resolved by downloading the GD library for PHP –> PHP4-GD or PHP5-GD packages.
Also note that in some linux distributions (only had this on Ubuntu Dapper…) the php.ini needs to be modified. Uncomment the line:
extension=gd.so
Dont forget to restart Apache afterwards ;)
November 7th, 2006 at 12:45
Great News! One question though, me as a php-nub :) How can I change the default frame to be the one, when I click insert instead of the iformation about ibrowser? Any is greatly appreciated!
November 7th, 2006 at 19:39
I was having problems with the phpthumb error in tinymce and I found that the problem was caused by the image directory being a symbolic link. I removed the sym link and viola, it was fixed. I am guessing this is a problem with phpthumb.
November 19th, 2006 at 02:06
changing the default frame is easy, just alter the ibrowser.php file, change the html class of the div you want to show from hideit to showit. remember to change the old one that was set to showit back to hideit. Thats it.
December 12th, 2006 at 22:50
What I want to do on my blog, is every few hours take the oldest post and move it to the
front of the queue, all automatically. Anyone know if there is a plugin that can do this or
a simple way to set up another plugin to do this (use my own feed perhaps)?
Thanks.
December 13th, 2006 at 02:46
Thanks a bunch. Ibrowser works great with TinyMCE and has a good interface. It also works good as a standalone Image Browser for use in other cases (with a bit of tweaking). It is surely the best image browser for TinyMCE you can get for free. Great Tutorial Btw, couldn’t have done it without ya :)
January 3rd, 2007 at 14:27
How can i make IBrowser work as a standalone Image Browser?
I want to click on an image and then open the Image Browser. After selected the right image i want to have a callback and have the path to the image inserted in a textbox.
Can someone help me? Thanks!
January 5th, 2007 at 17:59
Email me Ced, and I’ll help you with that. lasaldan at gmail dot com.
January 9th, 2007 at 14:15
I got the iBrowser to work and I LOVE IT!!! One question though… Has anyone added directory delete/rename with the directory create function and have it recursively delete images in that directory when called? iBrowser would be kick@ss with this functionality!
Thankx… great work!
~A
January 18th, 2007 at 07:26
Can anybody tell me how to use TinyMce to edit my CSS.
I hv just downloaded the TineMce_2_0_9. Please reply with the besic instuctions about “How to use it”.
Waiting 4 a good reply.
Thanks.
January 18th, 2007 at 19:10
Hi
I have my directories set in the config file set as such…
/DEV/img-dir/
It saves the image to this directory, but the page tries to read it as ../img-dir/image.jpg instead of the correct directory. I’ve tried altering the config, but any other directory input gives me an error in the upload editor.
Help?
January 19th, 2007 at 02:18
[...] Nemultumit de felul in care WordPress-ul manipuleaza poze, m-am hotarat sa incerc un plugin, iBrowser. Nu e un plugin WordPress ci un unul pentru editoare WYSIWYG, care se joaca frumos cu tinyMCE, editorul folosit de WordPress. A trebuit sa-l adaptez putin si dupa ce am pus in practica instructiunile a mers. [...]
February 2nd, 2007 at 01:39
I have successfully installed iBrowser in TinyMCE on a PostNuke 0.764 site. When I am editing, the iBrowser icon in on the TinyMCE toolbar, and I can upload a file and insert it into my copy. It appears within the editor window, but when I update the page, the image is gone. My text changes are fine, but no pic - or error message.
Any advice?
Thanks,
David
February 12th, 2007 at 21:31
[...] But after having installed WordPress and playing with this great app, I’m seriously considering swapping FCKEditor for TinyMCE. This looks so much neater… and seems very quick to load. I realise there’s no built in file uploading… but I found this plugin which looks like exactly the kind of thing I’m looking for. [...]
February 17th, 2007 at 20:24
Great Program, but
PLEASE, PLEASE, PLEASE Change Line 1266 in iBroser.php to
finaly.
The original size with 53 is too large (FireFox 2.0.0.1) and the GreenArrow- button is not available.
Even if you show it in the pic on this site with a FireFox; - that user may have pressed Ctrl ‘-’, perhaps it depends on the local user font and sreen resolution.
One more thing: “An error occured while handling file upload. Please try again.Error: An error occured while handling file upload. Please try again.”
Thats really not an error message! You could write also: Something went wrong. I’am still debugging.
cu
February 18th, 2007 at 17:34
Hello,
I cant get it to work. I’ve copied the ibrowser directory in /httpdocs/includes/tinymce/jscripts/tiny_mce/plugins/
I’ve got the file called tinyMCE.editor_plugin.js copied into /httpdocs/includes/tinymce/jscripts/tiny_mce/plugins/ibrowser and i called it editor_plugin.js
I’ve also tried editor_plugin_src.js.
In my head tags ive got the following
tinyMCE.init({
mode : “textareas”,
theme : “advanced”,
plugins : “ibrowser”,
convert_fonts_to_spans : false,
theme_advanced_buttons1 : “bold,italic,underline,bullist,numlist,outdent,indent,cut,copy,paste,undo,redo,link,unlink,formatselect”,
theme_advanced_buttons2 : “”,
theme_advanced_buttons3_ad : “ibrowser”,
theme_advanced_toolbar_location : “top”,
theme_advanced_toolbar_align : “left”,
extended_valid_elements : “a[name|href|target|title|onclick],img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name],hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style]”
});
I hope you can help me
February 19th, 2007 at 20:54
I also have a problem to get iBrowser working within HTMLarea under CMSimple2.7.1. Can somebody drop here some good guide as how to make it? Or I would be wery thankfull if somebody could send me adjusted files at msereday[at]stonline[dot]sk.
February 19th, 2007 at 21:41
Tried to follow all instructions above with TinyMCE. The iBrowser says
Error building image list!
NO IMAGE SELCTED PREVIEW NOT AVAILABLE
February 20th, 2007 at 16:51
To debug any image upload / image list build problems, put the following line at the bottom of config.inc.php and load that file in your browser:
var_dump($cfg).
This will display a root_dir value. the path to your images should be relative to that path.
February 24th, 2007 at 14:41
I found another answer to the problem of ‘upload file button hidden in Firefox’. I edited the style.css file found in config/css folder.
Change:
/* outer div */
#outerDivWrap {
width: 640px;
}
To:
/* outer div */
#outerDivWrap {
width: 680px;
}
February 25th, 2007 at 19:29
Hello,
I have a problem with the plugin. Everything is working fine but i can’t see the upload section in the pop-up as you can see in this image :
http://img340.imageshack.us/img340/3784/imgibrowserri3.png
Can someone help me ?
Thnx
March 1st, 2007 at 12:15
how spaw shows full path image ? what file i have to edit ?
please help me…thx
March 1st, 2007 at 12:59
yeh ! i can solved my problem . set $spaw_disable_absolute_url_stripping = true; in config file
it works.
March 5th, 2007 at 00:37
Hey
Someone try it in tinymce v. 210 ??
I can’t make it work out there. pls help..
March 8th, 2007 at 10:13
Natural Capital Institute is looking for a developer who can integrate tinyMCE to one of its Ajax applications for inplace editing. The work involves developing a custom markup plugin as well as enhancement with image upload, etc. If you are interested please send an email to dev at naturalcapital.org.
March 20th, 2007 at 03:03
[...] Entretando, o FCKEditor é muito grande, e o TinyMCE não possui um administrador de uploader livre (Ibrowser só funciona com PHP). Precisei implementar um sistema de notícias com características de upload de imagens na própria edição, foi então que encotrei o TyneFCK, como seu nome mesmo diz, é uma integração do TyneMCE com o admnistrador de upload do FCKEditor. [...]
April 25th, 2007 at 11:30
Working fine on WP 2.13 + TinyMCE 2.0.8 … Thanx for such a perfect upload solution..
Could anybody give a tip for changing the default EN language interface to custom language?
I’m trying to edit the lang.class.php without any result…
Thanx for any help
April 25th, 2007 at 11:47
OK a dirty solution for anybody having the same problem… I’ve just renamed the mylang.php to en.php and voila its working fine…
April 25th, 2007 at 12:08
think this is not a forum but ok:
in myeditor.js I set the lines
..snip…
theme : “advanced”,
language : “de”,
theme_advanced_toolbar_location : “top”,
..snip..
if you have a lang file de.js in the langs dir it should work, but this is also very good documentated. From my CMS is german and english supported. To switch the language in tiny too, I just have two myeditor.js one is called myeditor_deu.js and the other ‘myeditor_eng.js’. Depending on the actual language in the cms I load the different files when tiny is to start; - works fine.
Thanx too a lot for this nice editor!
May 3rd, 2007 at 20:20
It seems very good, but unfortunately don’t appears none new button… :(
May 3rd, 2007 at 20:21
ops… in my editor it don’t appear…
May 5th, 2007 at 17:50
I installed iBrowser with Tiny_MCE and it seems to work OK, but when it first loads, the image listing for the specified library is empty. If I switch between list view and thumbnail view, the list becomes populated with the images that are in the specified library folder. So that seems to be OK.
BUT when I upload a photo, iBrowser seems to go through the motions OK, but the image never appears in the image library. If I view the folder contents via FTP, *the image appears to be successfully uploaded* and residing in the specified library folder. But it never appears in the iBrowser interface. The file size of the .jpg in the image folder is 0KB. I’m a little confused.
Any help?
Jonny May
May 6th, 2007 at 07:46
try to upload a .jpg (not a gif) without any resizing first
(ibrowser doesn’t investigate the gd-lib on the server)
if the image still does not appears after upload, check
your rights to do uploads on that server with a simple
php-example (got to php.net) in to the same dir as ibrowser
analyse your rights with a phpinfo: safe-mode? do you have a gd-lib?
and wich gd-lib, gif-support? wich type? upload-tempdir? and so on.
what are the (apache/user) rights in the imgage dir? .. in the tmp-dir?
iBrowser does not sends any detailed error messages about that
whole proccess but a ‘upload failed’, or sometimes nothing, even there is no gd-lib,
or there is one, but without gif-support, or the upload failed by apache or php.
greetings
May 10th, 2007 at 13:30
Pascal,
Thanks for for your article. Everything is working except the Ibrowser button that is not been active when selected or “mouseover”. I saw a javascript error at satatus bar: ” Object doesn’t support this property or method”.
Any help?
[]s,
Luiz
May 25th, 2007 at 09:32
It’s for PHP… Shit…
June 4th, 2007 at 01:25
Hello..
This is a great article but I am facing 2 problems after making iBrowser to work in tinyMCE editor.
1) When a new directory is created, I have to close and then reopen iBrowser window so that folder list to be refreshed.
2) When an image already is present in TinyMce editor and after I select it and change it using iBrowser, the new image appears right in the editor, but when I see image properties, the old image file name appears, and consequently, when I submit the form, the old image file name is stored.
Anybody has the solution for these problems?
Thanks
Jaime
June 4th, 2007 at 09:08
Hi,
Great article and discussion, however I’m still facing one problem - paths (?!) :-|
In my config file:
$cfg['ilibs'] = array (
array (
‘value’ => ‘BNM/linki/zdjecia’,
‘text’ => ‘Zdjecia’,
),
);
When including TinyMCE with iBrowser I have:
relative_urls : false,
There is no problem to add an image, but I can’t see them. In the source code I have:
Some paths:
http://server.pl/mysite
http://server.pl/mysite/BNM/cms/tinymce/jscripts/tiny_mce/plugins/ibrowser/config/
Can anyone help me? I’m confused. And.. sorry for my english ;)
June 4th, 2007 at 09:28
As usually - after posting here I’ve found solution :)
I’ve forgot about using stripslashes for my data from POST. Now I do love it :)
June 12th, 2007 at 00:59
Hi there
Can anyone please help with using iBrowser (or iManager) as a standalone?
I’m needing it to be launched from a custom button and then insert the selected image filename into a text input field.
= )
BK
June 13th, 2007 at 13:11
What can I say, apart from a big big thank you.
image uploads have been doing my nut, and its quite simple when someone shows you.
June 13th, 2007 at 19:55
Thx guys to made this great plugin!, you’r great! :)
June 14th, 2007 at 09:18
hi, im having problem w/ the tutorial u have given. i have followed all your instruction but its not working. nothing changed in the insert button of tinymce, when i click the browse button i still get “example of filebrowser callback: field_name:src,url:, type:image” error please help me! thx in advance
June 19th, 2007 at 19:12
Hi, to everyone that wants to use the iBrowser as a standalone with a textbox here I come with a solution, that worked for me.
Steps:
1- Copy the ibrowser contents to any folder you want.
2- Configure the image paths in the /config/config.inc.php For example: $cfg['ilibs_dir'] = array(’/imageFiles/’);
3- Replace the following lines in ibrowser.php with the STANDALONE CODE below - begin at line 388:
//——————————–ORIGINAL CODE—————————————–
// save image to wysiwyg editor and close window
window.returnValue = args;
window.close();
if (iBrowser.isGecko) { // Gecko
}
//——————————– END ORIGINAL CODE—————————————–
With the following lines, where direcc is the name of the textbox where you want to capture the image path+filename:
//——————————-STANDALONE CODE——————————————
if (iBrowser.isGecko) { // Gecko - LIKE FIREFOX
window.opener.document.getElementById(’direcc’).value = args.popSrc;
}
else{
// save image to wysiwyg editor and close window - FOR IExplorer
window.returnValue = args;
}
window.close(); //chg
//——————————-END STANDALONE CODE——————————————
4- Create a index.html page ( at the same level of the ibrowser.php ) that contains the textbox called direcc and some javascript that captures the path+filename from the ibrowser popup.
The code of the index.html and the modified ibrowser.php can be downloaded from http://rapidshare.com/files/38161446/ibrowserStandAlone.zip.html
To open the ibrowser just click over the textbox and Voila!, everything should work in IE and Firefox at least.
Hope that helps
July 10th, 2007 at 16:03
I have tried to follow all instructions above, but it didn’t work and I got three following errors:
1. missing ) after argument list ibrowser.php (line 149)
var msg = escapeHTML(’m(’er_001′) . ‘: ‘ . $l->m(’er_002′); ?…
2. document.getElementById(”dialogLoadMessage”) has no properties rfile.php(line 206)
hideloadmessage()rfiles.php (line 206)
onload(load )rfiles.php (line 1)
parent.document.getElementById(’cimg’).attributes['cmdate'].value = obj.attr…
3. init is not defined ibrowser.php (line 1)
onload(load )
Any suggestions? Does it only work in PHP, not in JSP?
Thanks!
July 17th, 2007 at 19:24
copy tinyMCE.editor_plugin.js file into the iBrowser plugin directory and rename it to “editor_plugin.js”
WHy is this file not already in the plugin directory?
July 19th, 2007 at 00:17
[...] Image Upload Plugin for TinyMce (tags: TinyMce upload plugin) [...]
August 1st, 2007 at 03:44
hey guys thanks for all the super helpful info here
Question: I get the list building fine, but when I click on an image for a preview it says, “CGI Error
The specified CGI application misbehaved by not returning a complete set of HTTP headers.”
What do you make of that?
August 5th, 2007 at 19:26
[...] więcej taką frazę wpisałem po angielsku w Googlu i oto co otrzymałem: Image Upload Plugin for TinyMce Autor mówi o pluginie ibrowser - fajny on, ale niestety niedoskonały. Podstawowym problemem jest [...]
August 13th, 2007 at 19:18
If you use absolute paths in $cfg['ilibs'] like ‘/var/www/images/’ and get errors “Error building image list!” in the file window and upload doesn’t work, then simply set:
$cfg['root_dir'] = ‘/’;
Hope it helps. :-)
Chris
August 24th, 2007 at 09:50
I’ve the same problem as Luiz Augusto:
——————————
Pascal,
Thanks for for your article. Everything is working except the Ibrowser button that is not been active when selected or “mouseover”. I saw a javascript error at satatus bar: ” Object doesn’t support this property or method”.
Any help?
—————————–
How can I solve it?
Thanks, Thomas
September 6th, 2007 at 21:56
works perfect, had a little problem with setting up the directory, but after a few tests it finally works - what a great plugin… good job!
September 7th, 2007 at 12:00
thanks to chris,
set ROOT-DIR to: $cfg[’root_dir’] = ‘/’;
fixes the problem with :”Error building image list”…
thanks,
mondfish
October 12th, 2007 at 15:20
I followed the instructions, but the ibrowser button does not appear in the toolbar:
tinyMCE.init({
mode : “textareas”,
theme : “advanced”,
theme_advanced_toolbar_location : “top”,
plugin : “ibrowser”
});
I added this: theme_advanced_buttons3_add : “ibrowser”
but same problem.
help please
October 12th, 2007 at 17:49
I am a mac user and need to hire someone to guide me through the changes necessary to enable my computer to allow me to upload images.
If you’re savvy on such things please email me.
Thanks!
October 13th, 2007 at 21:15
If you cannot upload an image like me on my mac firefox because you cannot see the green send button right to the “browse” button, just edit line 1266 of ibrowser.php and change the value from the size attribute to something like 30 or 40 instead of the 53.
October 22nd, 2007 at 11:13
Thanks, this one really helped me out!
October 22nd, 2007 at 11:18
Very clear HOWTO.
I got it working within 5 minutes with TinyMCE 2.1.2 under FF2.0.0.8 and IE6.
Thanks a lot!
October 22nd, 2007 at 11:22
Just a little note i forgot:
Under IE6 it uses editor_plugin.js, with FireFox it needs the editor_plugin_src.js!
November 13th, 2007 at 07:36
@Luiz and Thomas
You copied the tinyMCE.editor_plugin.js, but if you copy the tinyMCE 2.05_editor_plugin.js it will solve your problem.
November 23rd, 2007 at 11:38
I struggled for a while with not being able to get the tinymce ibrowser plugin button to show. By putting an alert at the top of the plugin file, I realised it wasn’t being called.
I had to rename the file to editor_plugin_src.js - I’m not sure why my installation is set to call the src and not the compact version of the plugins.
November 29th, 2007 at 20:17
[...] This is an excellent plugin for TinyMCE called iBrowser. It give you the ability to browse and upload photos within TinyMCE and a few other web-based WYSIWYG editors. Go to this site to find instructions on how to set it up: http://pascal.vanhecke.info/2005/08/25/image-upload-plugin-for-tinymce/ [...]
November 30th, 2007 at 05:04
The button never showed up…using Firefox and IE7, I tried using both versions of the tinyMCE files, tried renaming it to _src, nothing. Very disappointed.
December 2nd, 2007 at 16:09
This is for all those having trouble incorporating the ibrowser plugin into the TinyMCE editor, specifically where after all steps have been followed and no ‘ibrowser’ button shows.
I spent hours on this, scoured every forum on the planet looking for answers. Some seemed to be lucky and others not. I finally had a result with the following init code:
tinyMCE.init({
plugins : “print”,
plugins : “ibrowser”,
mode : “textareas”,
theme : “advanced”,
width: “400″,
theme_advanced_layout_manager : “SimpleLayout”,
theme_advanced_buttons1_add:”seperator,fontselect”,
theme_advanced_toolbar_location : “top”,
theme_advanced_toolbar_align : “left”,
theme_advanced_text_colors : “default”,
theme_advanced_path_location : “bottom”,
theme_advanced_buttons3_add : “print”,
theme_advanced_buttons3_add : “ibrowser”
The ‘print’ button does not show but the ‘ibrowser’ button does - at last. Somehow the ‘print’ button is dumped in favor of the ‘ibrowser’.
So, in this instance the answer seems to be to use at least one other incorporated TinyMCE plugin and ’sacrifice’ it in favour of ibrowser!
Best of luck everybody!
January 6th, 2008 at 18:06
Hello Robert,
I have tried your solution, but it does not work. I am using the TinyMCE latest version, the 3 beta. It turned out, when I tried it.
Any suggestion?
January 11th, 2008 at 15:33
Great stuff,
God bless you …
January 16th, 2008 at 01:30
Anyway to make ibrowser to run as the username? I am running phpsuexec, ibrowser uploads the images as nobody and can’t transfer the images to the images folder. They are making it to the temp folder OK but then it all breaks down from there.
January 16th, 2008 at 02:39
Pls someone help me with my problem. I cant find the uploader icon in TinyMCE. I am using drupal and i am new to it. I’ve followed the steps stated above but it doesnt work. Where can I find these lines of code.
tinyMCE.init({
…
plugins : “ibrowser”,
…
theme : “advanced”,
theme_advanced_buttons3_add : “ibrowser”,
});
January 16th, 2008 at 20:32
Hello,
You can put it in the HTML code, whereever you want the TinyMCE to set up.
tinyMCE.init({
theme : “advanced”,
mode : “textareas”,
language : “en”,
plugins : “save,preview,table,contextmenu,fullscreen,style_font_size,ibrowser,media”,
theme_advanced_buttons1 : “newdocument,save,separator,bold,italic,underline,strikethrough,sub,sup,separator,justifyleft,justifycenter,justifyright,justifyfull,fontselect,fontsizeselect,separator,undo,redo,fullscreen”,
theme_advanced_buttons2 : “visualchars,table,cell_props,col_after,row_after,split_cells,merge_cells,separator,bullist,numlist,outdent,indent,separator,preview,forecolor,backcolor,image,cleanup,hr,removeformat,separator,charmap,ibrowser,media”,
theme_advanced_buttons3 : “”
});
It is just a general setup, take care of the paths!
Bye,
Viktor
January 16th, 2008 at 20:33
Sorry for the formatting ;)
January 17th, 2008 at 16:32
I like it. It works great
January 17th, 2008 at 17:32
Hi,
i don’t understand how to work.
I’ve the version 3.0rc1. I copy the directory ibrowser into plugins.
My page code:
tinyMCE.init({
// General options
theme : “advanced”,
mode : “textareas”,
language : “en”,
plugins : “save,preview,table,contextmenu,fullscreen,style_font_size,ibrowser,media”,
theme_advanced_buttons1 : “newdocument,save,separator,bold,italic,underline,strikethrough,sub,sup,separator,justifyleft,justifycenter,justifyright,justifyfull,fontselect,fontsizeselect,separator,undo,redo,fullscreen”,
theme_advanced_buttons2 : “visualchars,table,cell_props,col_after,row_after,split_cells,merge_cells,separator,bullist,numlist,outdent,indent,separator,preview,forecolor,backcolor,image,cleanup,hr,removeformat,separator,charmap,ibrowser,media”,
theme_advanced_buttons3 : “”
});
I see all, but i dont’ see the ibrowser icon.
Why? The tinymce Version 3.0 is not supported?
January 17th, 2008 at 17:34
Hi!
I had the same problem with version TinyMCE 3.0. I guess there is a big change in set-up, so I stayed at 2.x version.
Regards,
Viktor
January 17th, 2008 at 17:43
ibrowser work with version 2.x ?
I want to use version 3 because in this version the code is xhtml valid code.
In the version 2 the code is not xhtml code?
January 18th, 2008 at 19:35
Hi,
To convert relative image paths to absolute you dont need to change any script !
simply add these lines to tinyMCE.init
document_base_url : “”http://www.mydomain.com/”,
relative_urls : false,
remove_script_host : false,
it worked for me.
Nice plugin thanks for the developer. l :)
January 21st, 2008 at 03:47
[an error occurred while processing this directive]
Can’t shake this error!
January 22nd, 2008 at 22:46
[...] que o TinyMCE não possui um assistente de upload de fotos, mas que você pode usar o plugin Ibrowser para isso, se estiver usando PHP. Se for ASP, JSP, CFM ou qualquer outra linguagem pode se utilizar [...]
January 23rd, 2008 at 00:09
I wonder if any body can help… The link at the top of this page for downloading the plugin is not working? maybe the site has gone off line or the URL has changed.
If the case is either/or, would someone be kind enough to tell me if the plugin mentioned above is available anywhere else on the web??
Many thanks!
January 23rd, 2008 at 00:12
Working here:
http://j-cons.com/downloads/ibrowser.zip
January 23rd, 2008 at 00:19
I am getting “connection timeout” message from all browsers FF, IE5/6/7, Safari, Opera??
I’ll try again some other time, thank you
January 23rd, 2008 at 00:24
Try it here: http://wsdh.net/ibrowser 18-35-28.zip
January 23rd, 2008 at 00:29
I am just trying to unsubscribe from these comment emails. Hopefully this will do it.
January 23rd, 2008 at 00:37
You have to click on the link in your email.
January 23rd, 2008 at 00:37
Unfortunatly, that link produces a 404 error…
January 23rd, 2008 at 00:40
When I click the link in either this thread or my email i get this error message…
404 The requested URL /ibrowser was not found on this server.
The URL’s appear to be the same in both
January 23rd, 2008 at 00:44
Not your day is it? Try this one. http://wsdh.net/ibrowser.zip
January 23rd, 2008 at 02:55
Thanks mrprez, I didn’t see the link since Gmail was hiding the quoted message :) *sheepish*
January 23rd, 2008 at 16:00
Thank you for this article it really what i looking for the tinyMCE editor, article save me to write a plugin.
January 28th, 2008 at 19:33
Hello @,
I could adapt the iBrowser to the TinyMCE 3.0b version. At least it is enough for me.
Here is the link: http://rapidshare.com/files/87347750/editor_plugin.rar.html
Take care of paths :)
Bye,
Viktor
February 18th, 2008 at 00:13
Hi Viktor - your editor_plugin runs but still gets an error:
ib is not defined on line 22…
any ideas?
February 18th, 2008 at 20:51
Hello Scott,
Use Firebug, and debug the code.
Is the script file loaded?
Take care of paths.
Is the iBrowser plugin copied to the folder?
BR,
Viktor
February 19th, 2008 at 01:12
WOW! Thanks for writing me back Viktor, I appreciate it!
I have firebug and see the error - I don’t know how to “debug” beyond that. I agree that “ib” is not created because whatever needs to find “common.js” is not doing so. So, I know the problem - it is as you suggested - the baseurl is not set right. I have no problem editing code, I just have no clue where that needs to be set - I’ve tried manually setting it in about 10 different files and nothing has changed the broken behavior. Then again, I’m not sure if the basurl needs to be something like “http://www.domain.com/admin/” or a path as in “/usr/apache/htdocs/www.domain.com/admin” and I’m not sure about the trailing slash…
Any ideas?
Thanks!
-scott
February 19th, 2008 at 20:33
Hello Scott,
I try to help you, as much I can. I have download the link above, that I linked. I see, in the 2nd line there is a tinymce.ScriptLoader.load(); function. So, it tells to the TinyMCE, to load the script: common.js. If it is in the path. You can check it back easily, just open Firebug window, and click Net tab. There find the line, where ibrowser editor pluging loads, and the next line is the common.js. At least should be. So, all in all: before you want to use the ib variable, you have to load the common.js somehow. That is the point.
And I think, you do not have anything to do with baseurl.
You are using TinyMCE v3.x, do you? :) Just to be sure.
I hope you can solve it, because this version 3 is really cool.
Bye,
Viktor
February 19th, 2008 at 21:46
Thanks Viktor - sorry I’m dumb about these things - I didn’t realize it was right there in that file! Thanks for the “how to” on Firebug, I’ve never noticed that “Net” button - I thought that had to do with “.NET” or something - never even tried it. Very handy! Yes, I am using version 3 of TinyMCE, in fact, I thought I needed to downgrade to v2 at one point but am glad I can stick with 3.
OK, it is loading common.js now correctly and all is good… except it still doesn’t work.
I was excited to have this all working then saw this error in firebug when I click on the ibrowser button:
“ib.oEditor.getFocusElement is not a function”
That’s coming from line 25 of the editor_plugin.js
I see that the ib.baseURL is set on line 26 and I tried “correcting” that one too - it still did not fix the problem. I’m using Firefox 2 (not sure if that matters).
I noticed in your example, you had a lot more plugins being called. Do I need call more plugins to get ibrowser working? Any ideas to my problem this time?
March 10th, 2008 at 18:47
[...] cost. If you need good image upload support for free you would be better looking at Kupa, there are however plugins out there for just that. Other than that the features are extremely rich, and it can be configured to work in XHTML mode. [...]
March 13th, 2008 at 13:54
Anyone willing to be paid to set this up? PHP 4.3.9, TinyMCE 3.0.5
March 13th, 2008 at 14:31
After some discussions, I’m switching back to FCK Editor… apparently image upload is built in. Good luck ya’ll.
March 14th, 2008 at 18:34
Some error appears on linux ubuntu… fckeditor works fine.. (
March 17th, 2008 at 11:25
I can’t seem to download the ibrowser plugin from the site (just sent them a message too), the link appears to have changed as the url ending in .zip is currently displaying a badly formed php page.
Has anyone got a copy of the file they could upload somewhere?
Thanks !
Matt
March 17th, 2008 at 23:46
Current downloads can be found here:
http://www.j-cons.com/downloads/
March 18th, 2008 at 14:11
Excellent, thanks for that!
Just installing it now.
Matt
March 18th, 2008 at 15:54
Great stuff, had to make a couple of changes to the default install though, I had to chmod the directories mentioned in the readme file to 777 not 755, and also in config.inc.php, where it looked like the image paths were the full path - eg.” ‘value’ => ‘/dev/im/assets/gallery/’, “, I had to use the path relative to the web server. Ie what I thought was to be entered as “/var/www/vhosts/mysite.com/httpdocs/mydirectory/images/” turned out to only work using “/mydirectory/images/” - which is fine now i know that.
Great application though & thanks again for the links!
Matt
March 18th, 2008 at 16:38
Check at http://j-cons.com/downloads/
March 18th, 2008 at 16:43
Hi Matt,
I’m trying to make this plugin work under apache-tomcat, any ideas or links ?
Felipe
March 18th, 2008 at 18:16
Hmm dont know much about tomcat, what exactly are the problems you’re having? Make sure you’ve set the directory permissions, I didn’t at first and had to do a bit of debugging, are you getting an error message?
March 18th, 2008 at 18:23
My problem right now is that ibrowser.php file is being downloaded instead of running the plugin.
F
March 18th, 2008 at 18:53
Oh, are you sure you’ve got php installed on the server? Sounds rather like you dont..
March 18th, 2008 at 18:59
Matt,
sounds like you know about this, how much will you charge for taking a look and hopefully solve my problems. Is a linux machine.
If you want we can chat about it: fgrajales at ingenian . com
Felipe
March 18th, 2008 at 20:08
Matt,
why don’t we chat and I give you access to the server.
Felipe
March 21st, 2008 at 02:50
[...] then deciding it was down to me to write a file uploader myself, I discovered the following page: http://pascal.vanhecke.info/2005/08/25/image-upload-plugin-for-tinymce/. Check the comments where I’ve posted as MattP to find the current link to download this, but [...]
March 25th, 2008 at 07:16
hello.. I’ve been wanting to upload files through tinymce but I’m using coldfusion server and I don’t know how to make it work with php. Help please.
March 25th, 2008 at 07:18
For all the guys who are struggling with a tiny mce file uploader / browser, finally here is a working version of simplebrowser (Initially made by Andrew Tetlaw) for TINY MCE 3.0.5:
http://www.ingenian.com/tiny_mce_3.0.5_with_simplebrowser.zip
Is working with php.
It may require a little bit of adjustment depending of the web servers and connectors languages.
March 28th, 2008 at 22:23
The download link above is dead … Do you have another link?
Thanks in advanced
March 28th, 2008 at 22:36
Hey Del,
I’ve updated the link to http://j-cons.com/downloads/ .
Sorry guys that I (as the owner of this blog) have been totally absent in this thread but this is already such a long time ago and I don’t even remember how the whole thing worked (I haven’t needed to set it up once more since that time)…
I’m glad you can help each other out in the comments.
March 30th, 2008 at 19:29
Is it working with drupal 5.x + TinyMCE?
March 30th, 2008 at 21:06
Where to find “tinyMCE.init” statement??? I’m using drupal 5.x + TinyMCE 3.x
March 30th, 2008 at 22:13
In the interface folder there is new editor plugin (tinyMCE3.0_editor_plugin.js) for tinyMCE version 3.x. Which I managed to find. But can anyone please help me where should I keep this code:
tinyMCE.init({
…
plugins : “ibrowser”,
…
theme : “advanced”,
theme_advanced_buttons3_add : “ibrowser”,
});
I’m very new to it. A step-by-step explanation will be appreciated. I’m using drupal 5.x + TinyMCE 3.x.
March 31st, 2008 at 01:27
Apeee,
that code goes inside script tag where your head tag template is located.
Read this: http://wiki.moxiecode.com/index.php/TinyMCE:Installation#Examples
Felipe
March 31st, 2008 at 04:17
Thanks Felipe.
hmm….it is to be used as javascript between header but I found that there is already such a script between head tags whenever TinyMCE shows in page. How can I add plugins : “ibrowser” and theme_advanced_buttons3_add : “ibrowser” in this script. Is there probably a file where I can add this. Or how can I make this add within the script that already exits. The script is like this:
tinyMCE.init({
mode : “exact”,
theme : “advanced”,
relative_urls : false,
document_base_url : “/”,
language : “en”,
safari_warning : false,
entity_encoding : “raw”,
verify_html : true,
preformatted : false,
convert_fonts_to_spans : true,
remove_linebreaks : true,
apply_source_formatting : true,
theme_advanced_resize_horizontal : false,
theme_advanced_resizing_use_cookie : false,
plugins : “advhr,advimage,advlink,autosave,emotions,fullscreen,iespell,paste,preview,print,searchreplace,spellchecker”,
theme_advanced_toolbar_location : “top”,
theme_advanced_toolbar_align : “left”,
theme_advanced_path_location : “bottom”,
theme_advanced_resizing : true,
theme_advanced_blockformats : “p,address,pre,h1,h2,h3,h4,h5,h6″,
theme_advanced_buttons3 : “advhr,cut,copy,paste,emotions,fullscreen,iespell,selectall,print,spellchecker”,
theme_advanced_buttons1 : “bold,italic,underline,strikethrough,justifyleft,justifycenter,justifyright,justifyfull,bullist,numlist,undo,redo,link,unlink,fontsizeselect”,
theme_advanced_buttons2 : “image,cleanup,forecolor,backcolor,sup,sub,code,hr,preview,search,replace”,
extended_valid_elements : “hr[class|width|size|noshade],img[class|src|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name],a[name|href|target|title|onclick]“,
content_css : “/themes/garland/style.css”,
elements : “edit-comment”
});
I can’t copy paste it in all pages (or in my html theme pages) as it will convert all textareas and other fields of websites to show tinyMCE editor.
March 31st, 2008 at 04:26
To add ibrowser plugin, just add the ibrowser folder bellow plugins folder, and change the following lines:
plugins : “advhr,advimage,advlink,autosave,emotions,fullscreen,iespell,paste,preview,print,searchreplace,spellchecker,ibrowser”,
theme_advanced_buttons3 : “advhr,cut,copy,paste,emotions,fullscreen,iespell,selectall,print,spellchecker,ibrowser”,
Make sure that browser cache don’t trick you when refreshing.
Felipe
March 31st, 2008 at 11:22
Detailed installation procedure of ibrowser v1.3.8 for TinyMCE v3.0.5 for Durpal.
1. Download ibrowser from http://j-cons.com/downloads/ibrowser%20V%201.3.8.zip
2. Unzip and extract to /modules/tinymce/tinymce/jscripts/tiny_mce/plugins
3. 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’,
),
);
4. 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)
5. Find interface folder in ibrowser where you have to make 2 same copies of tinyMCE3.0_editor_plugin.js to editor_plugin.js and editor_plugin_src.js. That is both 2 new files are copy of tinyMCE3.0_editor_plugin.js just getting their names changed. Now copy this 2 new files to /modules/tinymce/tinymce/jscripts/tiny_mce/plugins/ibrowser
6. Now go to /modules/tinymce where you will find plugin_reg.php . Open it in an editor (notepad) and then add
$plugins['ibrowser'] = array();
$plugins['ibrowser']['theme_advanced_buttons3'] = array(’ibrowser’);
just before
return $plugins;
}
and then upload it to the same path.
7. Now login to your durpal website (with admin rights) and go to /admin/settings/tinymce click on the edit of profile name that you want to assign ibrowser to. Now at the “Buttons and plugins” section you will find ibrowser where you have to tick it and save the settings.
8. There you go. Your ibrowser is setup and running now. This will work will all drupal websites using TinyMCE.
April 12th, 2008 at 15:38
[...] http://pascal.vanhecke.info/2005/08/25/image-upload-plugin-for-tinymce/ [...]
April 14th, 2008 at 19:16
Can please someone tell me what is the chmod and how to use it?
i assume that it is well-known since nobody asked it before, but i am not familiar with it.
Please give a detailed description if you can, thanks.
April 14th, 2008 at 23:48
CHMOD is a linux command which changes permissions to a file or directory (recursivelly), in this case is used to give tinymce plugins unrestricted access to write files.
CHMOD -r 777 gives full permissions to the current user (first 7), group (second 7) and any other user (third 7).
Detailed info http://en.wikipedia.org/wiki/Chmod
April 25th, 2008 at 16:49
Hi,
I set up ibrowser and had no problems getting it running with Tinymce. However, once I beefed up my server security with open_basedir, things started to go awry - no gd appeared in place of the thumbnails. It seems that phpThumb is looking at the path to my images folder (set as relative) and starting the path from outside of root, which of coarse open_basdir does not permit. Is there any way around this? Thanks in advance to anyone taking the time to offer a suggestion.
Mike
May 19th, 2008 at 14:05
Hello,
Great TinyMCE plugin but it is not working on the latest Safari 3…
Does it work for anyone else?
May 21st, 2008 at 20:43
Few questions:
1) tinyMCE.editor_plugin.js file, where is it?
2)what path do the image galleries take? are they the root of the ibrowser plugins or what? I have done ../../../../images (which i am assuming would take me to the folder in the same dir as the jscripts folder of TinyMCE.
TIA
May 27th, 2008 at 12:03
hello folks,
i want to use i Browser with tinyMCE with jsp.
tinyMCE works great, but i’m not sure if i can use iBrowser with jsp
thanks in advance
May 29th, 2008 at 18:54
Looks pretty awesome. I just wish it was LGPL instead though. I can’t use something that’s been GPL’d because that would require my company to release the entire application. Guess I’ll have to find another solution.
June 3rd, 2008 at 01:23
I made a little snippet for those who don’t want to add the absolute path everywhere. This basically determines the absolute path of the site.
$pathArray = explode(”/”,$_SERVER['SCRIPT_NAME']);
$pathFolderNumbers = count($pathArray)-1;
for($i = 0;$i<$pathFolderNumbers;$i++)
$pathToThis.= $pathArray[$i].”/”;
echo $pathToThis;
Then just work it out relative. Works for me, and it’s much easier to keep track. (basically no need to).
June 4th, 2008 at 12:34
These setup instructions worked a treat - took just 30 mins cos I had the “Error building image list!” — fixed by reading the instructions properly. On this page ( http://pascal.vanhecke.info/2005/08/25/image-upload-plugin-for-tinymce/ ) there is a picture in which the images are shown as filenames . In my installation the images are displayed as thumbnail so can anyone tell me how to show the images as filenames ?
June 5th, 2008 at 11:45
thanks, this helped me :)
June 20th, 2008 at 19:04
Hi there!
This is a neat plug-in, but I was having some problems with Firefox 3. Couldn’t open the dialog from tinyMCE 3.0.
The problem seems to be related to some firefox namespace, where the ib variable isn’t available back in the tinyMCE3.0_editor_plugin.js. The common.js file loads just fine, and everything is happening in the correct order, but I couldn’t seem to get a hold of the ib variable after the inclusion of the common.js file.
I made a temporary fix localy (Only tested with IE7 + FF3):
Added the following to interface/common.js directly after “var ib = new iBrowser;”:
function iBrowser_GetIb() { return ib; }
The following was added below: “tinymce.ScriptLoader.load(url + ‘/interface/common.js’);”:
var ib = iBrowser_GetIb();
Keep up the good work =)
June 23rd, 2008 at 15:23
Can’t get the plugin to work in Safari. I tried Merl’s fix (see comment above), but Safari still won’t recognize the ib variable.
I’m guessing it’s a security issue in Safari. The common.js file, with the ib variable, is loaded and it DOES execute (I tried putting an alert in there), but editor_plugin.js can’t access any functions or variables from it. Strange.
If anyone has a fix for this, please leave a comment for the rest of us.
June 23rd, 2008 at 22:34
OK, so here’s my issue:
I turn on ibrowser, and my XP/FF2 machine is fine. But my client’s machine (sometimes Vista, sometimes Mac, on FF, IE, whatever) can’t see the whole textarea TinyMCE WYSIWYG once I enable ibrowser. Using TinyMCE 3.0.8. Before I didn’t do the whole copy tinyMCE3.0_editor_plugin.js twice and call it editor_plugin.js and editor_plugin_src.js thing, BUT I just tried that and it still doesn’t work. Any ideas?
July 1st, 2008 at 12:43
Merl solution works for me FF3:
add var not where stated (see Merl post),
but here - editor_plugin.js:
// Internal image object like a flash placeholder
if (ed.dom.getAttrib(e, ‘class’).indexOf(’mceItem’) != -1)
return;
//fix for ff3
var ib = iBrowser_GetIb();
do not forget to change the common.js as above in Merl post.
if you need a full tiny_mce+ibrowser module for website baker, go to: http://forum.websitebaker2.org/index.php/topic,10183.0.html for download
cheers
Iti
July 8th, 2008 at 11:37
For all those who has problem with installation, ( missing button )
you have to copy all ibrowser folder to location ‘../tinymce/jscripts/tiny_mce/plugins/ibrowser/’ ( path to ibrowser will look exactly that way ), it solves all my problems …
July 9th, 2008 at 14:57
Hi, Ibrowse plugin is working well with php, I wants to integrate it with ruby
in editor_plugin.js
tinycme.create(’tinymce.plugins.IBrowserPlugin’, { // here I am getting error tinycme is not defined
July 11th, 2008 at 15:14
@iti and Merl
All u have to do is remove ‘var’ in front of the line ‘ib = new iBrowser;’. This will fix the problem and it’s an easier fix.
July 11th, 2008 at 15:48
Great find and thanks for the step by step instructions.
i ran into problems with loading the iamges and uploading. I set my permissions correctly and uploaded dummy images to test with but after troubleshooting through the scripts I found that I didn’t need the full path in the $cfg['ilibs'] array
My full path is: /home/user/public_html/website/assets/images/
but in the array all I needed was:
$cfg['ilibs'] = array (
array (
‘value’ => ‘/website/assets/images/’,
‘text’ => ‘Site Images’,
),
[...]
Hope that helps someone! I’m excited to get to using this now!
July 15th, 2008 at 10:58
Hello,
i did everything like written bellow, but in my app did not appear insert button. Anybody could help?
Working on Boonex Dolphin 6.11 with tiny_mce plugin
July 15th, 2008 at 12:47
To Robert
‘Print’ button doesn’t show, because you cover him. Your tinyMCE.init must look like that:
tinyMCE.init({
plugins : “print,ibrowser”,
mode : “textareas”,
theme : “advanced”,
width: “400″,
theme_advanced_layout_manager : “SimpleLayout”,
theme_advanced_buttons1_add:”seperator,fontselect”,
theme_advanced_toolbar_location : “top”,
theme_advanced_toolbar_align : “left”,
theme_advanced_text_colors : “default”,
theme_advanced_path_location : “bottom”,
theme_advanced_buttons3_add : “print,ibrowser”,
Hope this helps. Have a nice day :)
———————————
This is for all those having trouble incorporating the ibrowser plugin into the TinyMCE editor, specifically where after all steps have been followed and no ‘ibrowser’ button shows.
I spent hours on this, scoured every forum on the planet looking for answers. Some seemed to be lucky and others not. I finally had a result with the following init code:
tinyMCE.init({
plugins : “print”,
plugins : “ibrowser”,
mode : “textareas”,
theme : “advanced”,
width: “400″,
theme_advanced_layout_manager : “SimpleLayout”,
theme_advanced_buttons1_add:”seperator,fontselect”,
theme_advanced_toolbar_location : “top”,
theme_advanced_toolbar_align : “left”,
theme_advanced_text_colors : “default”,
theme_advanced_path_location : “bottom”,
theme_advanced_buttons3_add : “print”,
theme_advanced_buttons3_add : “ibrowser”
The ‘print’ button does not show but the ‘ibrowser’ button does - at last. Somehow the ‘print’ button is dumped in favor of the ‘ibrowser’.
So, in this instance the answer seems to be to use at least one other incorporated TinyMCE plugin and ’sacrifice’ it in favour of ibrowser!
Best of luck everybody!
———————————
July 15th, 2008 at 13:57
Hello,
now i receive just such screen and nothing more, that screen looks like stucked….
http://www.jaglas.lt/chainas/ibrowser_error.jpg
Please help anybody…