By steevithak on

I'm running Drupal 6.4. I need a WYSIWYG editor that allows users to click a button and upload an image. I've searched the forums and found 1) lots of people want this and 2) there's no clear documentation on how to do it.

Most of the posts said I need tinyMCE and the WYSIWYG module. So I've installed those. This part actually worked and got me part way there. I now have a working WYSIWYG editor but when you click the image button it asks for a local path to an image instead of offering a browse button for image uploads. This is useless for the average non-technical user. A file browse button is needed so the user can upload the image.

One forum post said I needed the drupalimage plugin for tinyMCE found in the img_assist module. I've installed img_assist but the instructions for installing drupalimage appear out of date. They reference a file that doesn't exist (/modules/tinymce/plugin_reg.php). I tried creating the file and adding the recommend lines but it didn't result in any change to tinyMCE. (yes, I've cleared browser cache, Drupal cache, and all the usual things).

Next I found a post that said I need the IMCE module. I installed IMCE, found it made no improvement in tinyMCE's image upload capability and returned the forums. Another post says in addition to installing IMCE, I have to follow these instructions ( http://drupal.org/node/241753#comment-792305 ) and copy some additional code into the template.php file. Sadly, this doesn't work either. Best I can tell, these instructions are also for some outdated version of Drupal or the modules.

So, long story short, I've gotten nowhere. I'm either trying the wrong things or trying the right things in the wrong way. Has anyone successfully gotten image upload to work with a WYSIWYG editor in the current version of Drupal? If so, can you point me to some instructions that actually work? Please please please. Thanks!

⋅ Categories: Drupal 6.x

Comments

pixelite’s picture

pixelite
Primary language English
Location Montreal
commented

TinyMCE is still in development for Drupal 6, but if you want something really simple to hold you over, BUEditor is easy to configure. If you have IMCE installed, it will let you upload images and insert them directly into the textarea. It's not a WYSIWYG, but it works!

pixelite’s picture

pixelite
Primary language English
Location Montreal
commented

And I should also mention, the YUI Editor, which I discovered yesterday, has an image upload. I haven't tried to configure it yet, but the interface is very pretty. You need the YUI module for it to work.

mattyoung’s picture

mattyoung commented

http://drupal.org/project/fckeditor

Just enable IMCE integration in its configuration once you have IMCE installed.

I like it better than YUIEdit because fckeditor can be turned off during content edit so you can enter plain html.

steevithak’s picture

steevithak commented

TinyMCE shouldn't be used with Drupal 6.x because it's still under development
BUEditor has working image upload but isn't WYSIWYG
YUI Editor might have image upload but you haven't actually tried configuring it
Fckeditor + IMCE works now with Drupal 6.x, is WYSIWYG, and has image upload

Thanks for the feedback. Sounds like I need to dump TinyMCE and start over with Fckeditor

steevithak’s picture

steevithak commented

I've downloaded and installed Fckeditor, following exactly the steps in the README.txt file. This got the basic editor working. I've downloaded and installed IMCE as well. But adding the IMCE module did not enable any sort of browse button or image upload capability within Fckeditor. The Fckeditor README.txt file says near the end that there are 3 ways of handling images and does list IMCE as one, however, it provides instructions for two other methods and then abruptly ends without explaining how to use IMCE, so I think the README.txt file may be missing something critical.

Has anyone else managed to get image uploading working with the Fckeditor and IMCE modules on a drupal 6.x? If so, you can you point me to some instructions on how to do it. Thanks...

steevithak’s picture

steevithak commented

The missing step is:

admin -> site configuration -> FCKeditor -> Profile default edit -> File Browser Settings -> File Browser Type

Select IMCE in the drop down and save.

Adding that step to the README.txt file would save the next downloader from having to search the forums.

fit’s picture

fit commented

I've installed FCKeditor and I have browse button for uploading images and all works fine. I've uploaded several images and it shows in my textarea but when I save it and go on preview that page - there is no picture ??

-Anti-’s picture

-Anti- commented

Check your 'input format' section on the 'create content' page.
By default the 'filtered html' does not allow images or media.
Try posting your tests using the 'full html' filter.

Later, when you get the editor working and know more about what you're doing (eg. custom toolbars, buttons and styles, and different toolbars dependent on user permissions), you'll need to go back and create a filter (or filters) which allow all the html tags that your editor uses when creating the source, because it isn't safe to allow your users to post with the 'full html' filter.

fit’s picture

fit commented

How I can set up a full html input format for my pages?

Or how I can set up a pictures to be included in the filtered html?

-Anti-’s picture

-Anti- commented

Assuming your user-role permissions are set-up correctly, you should see an 'input filter' section under the text area on the 'create content' pages. In admin -> input filters, by default there are only two filters: 'filtered html' and 'full html'.

Use the 'full html' filter for admin during development until you get used to the fckeditor and get your toolbars set-up for each role. Only once you know which buttons each role will have can you really start adding tags to the filters' 'exceptions' list. To allow images to be posted, for example, you'd add <img> to the 'filtered html' exception list. Then <img> tags won't be stripped out.

The list is labelled 'allowed html tags' in admin -> input formats -> filtered html -> configure
My 'filtered html' exception list looks like this:
<p> <br /> <big> <small> <h3> <ul> <ol> <li> <em> <u> <strong> <del> <sub> <sup> <span> <q> <blockquote> <code> <embed> <img> <a> <div>

Don't just copy that though. Some of those tags may be dangerous (eg. span, embed, img, a), but necessary for my site. You'll need to research on which tags are safe for your own site; the more you allow, the more unsafe it becomes. You need to balance functionality and security. Here's a thread which claims even the img tag is not safe: http://drupal.org/node/347924

ebot’s picture

ebot commented

First, thanks so much steevithak for taking the time to write this up. I've been going through the same process the last couple of days trying to get uploaded inline images in blog posts easily.

While I got FckEditor and IMCE working together, I'm wondering if anyone has simplified the upload image function to:

- Bypass the "browse web server" button and feature altogether and just have an "upload image" button. Ideally, I don't even want to show the web server files at all. Just have an upload image button from a user's desktop.

- Would also like to have the ability to add multiple images with simple "add field" buttons.

Possible?

gearhead’s picture

gearhead commented

I have the same need for uploading images inline with a text editor by browing the local computer for the file not a folder on the server. Most people are not going to understand why they need to upload the image first, then remember the URL to the file they uploaded and then know that the dialog box is asking for that URL path.

So,
Is there a solution in Drupal that allows any text editor, to keep our options open, that allows a user to post inline images by browsing their local computer for the files?

Gear Head
Muscle Cars

Alpha5’s picture

Alpha5 commented

I also need a editor to upload image and add link to view it to page, upload music and play them, upload video and play them. All of them get from local computer.

lancsDavid’s picture

lancsDavid commented

i agree with mr's ebot, gearhead & alpha5. WYSIWYG + editor + ability to upload images from local comp = the thing 2 have

Neutrino Sunset’s picture

Neutrino Sunset commented

Shameless bump for some sorely needed functionality. Any new developments in this area?

ShannonK’s picture

ShannonK commented

I hope someone out there is working on a solution and shares! I currently have WYSIWYG - FCKeditor - IMCE, and although it works, it is not easy for the un-savvy user to the site.