Image Upload - TinyMCE & Drupal 6 | Pride Web Design Cork

Image Upload - TinyMCE & Drupal 6

Submitted by Kevin on Wed, 04/03/2009 - 15:01

If you're using the TinyMCE wsywig editor in drupal then you may also be wondering where the Image Upload button is on the insert image screen! It's kind of hard to use the editor to insert images when you have to manually upload them to the server yourself!!

Well the bad news is that by default TinyMCE on drupal does not come with an image upload button (!!??!!), but the good news is that a module called IMCE happily provides the missing functionality. Once it's installed the insert image dialog should have a button which will bring up an image browser screen which in turn allows you to locally browse for upload images to the server.

However, if you are using the newer Wysiwyg API to provide the TinyMCE support (as you probably should be) then you will have to install yet another module to get this elusive button to appear - You need to install a module called IMCE Wysiwyg API bridge

And after all of that you should have the image upload functionality, in summary you need to install the following:

Wysiwyg API - for wysiwyg editor.
IMCE - for image upload in wysiwyg.
IMCE Wysiwyg API bridge - to get the image upload button to appear!

UPDATE 9/2009 - I have just installed tinytinyMCE instead of the tinyMCE module and it worked straight out of the box with the current version of IMCE - excellent!

Kevin's blog
3683 reads

Wed, 04/03/2009 - 17:57

Stranger

Found this very useful!

Found this very useful! Thanks!

Tue, 17/03/2009 - 16:04

Stranger

Linked from google

I am looking for just this topic. Thank you!

Thu, 09/04/2009 - 17:04

Stranger

great info!

Just what i needed as i was surprised to find tinyMCE without image uploading modalities in drupal :-)

thanks!

Tue, 14/04/2009 - 17:01

Shane

Joined: 10/10/2008

Hi Kev, 6.x-1.1 is the one to

Hi Kev, 6.x-1.1 is the one to use?

-----------------------------------------------

Award Winning Web Design Cork : Pride Web Design Cork

-----------------------------------------------

Wed, 15/04/2009 - 11:07

Kevin

Joined: 08/01/2009

IMCE Wysiwyg API bridge

Hi Shane,

At the time of writing I was using:

Wysiwyg API 6.x-1.0
IMCE 6.x-1.2
IMCE Wysiwyg API bridge 6.x-1.x-dev

But since then, IMCE Wysiwyg API bridge version 6.x-1.10 has been released and it seems to work fine in the set-up too!

Sun, 21/06/2009 - 19:35

Stranger

i tried this but the image

i tried this but the image upload facility said "browser server" for files, or something like that. which is no use, as i just wanna upload images from the local computer

anyone know how to solve this?

Mon, 29/06/2009 - 13:24

Kevin

Joined: 08/01/2009

It should work like this...

Hi Anon,

With this working you should be able to browse for image files locally. When you hit the insert image button on the editor you should see something like this:

The Browse Button

There is a 'Browse' button on the right. Clicking this button will bring up a big file browser window, click on the 'upload' link near the top to allow you to browse for image files on your local computer (it will make a section on the window visible):

Upload Options

Browse for the file you want, and hit the 'upload' button, this will upload the file to the server and you should see it added to the list of files below the 'upload' area:

Click on the image thumbnail

Click on the image thumbnail in the file list, this will add the image into the area below the list of files, now just click on this image to insert it into the editor..

Click on the image to insert it into the editor

Hope this helps...

Tue, 08/09/2009 - 13:16

Kevin

Joined: 08/01/2009

UPDATE Image Upload & TinyMCE

UPDATE 9/2009 - I have just installed tinytinyMCEand instead of tinyMCE and it worked straight out of the box with the current version of IMCE with much less mucking around required - excellent!

Wed, 09/09/2009 - 12:08

Shane

Joined: 10/10/2008

I thought you liked mucking

I thought you liked mucking around Kev .... seriously though, fair play!

-----------------------------------------------

Award Winning Web Design Cork : Pride Web Design Cork

-----------------------------------------------

Wed, 03/02/2010 - 11:47

#10

Stranger

thank you

grazieeee!
andrea

Wed, 03/02/2010 - 13:36

#11

Shane

Joined: 10/10/2008

I just blogged about a really

I just blogged about a really nice new, well new to me, way to upload images in line into Drupal's text editor.

Blog post on image uploads

-----------------------------------------------

Award Winning Web Design Cork : Pride Web Design Cork

-----------------------------------------------

Thu, 27/05/2010 - 15:00

#12

Stranger

All is setup stiil not display browser server button

I have installed all needed for editors for latest drupal 6.16 , yet i can't see the browser server button/image in insert image screen. Please help soon.

Thu, 22/07/2010 - 08:27

#13

Stranger

Thanks!

Thank you very much... I looked for hours on drupal.org without success.