Quick WYSIWYG with Image uploading recipe

Sometimes Drupal is the best thing since sliced bread, sometimes it is a pain in the keister. The most painful moments are when you are trying to do something that you are sure will be simple, but ends up taking hours of trial and error. My latest example was setting up a site with a Wysiwyg front-end with simple image uploading and manipulation. I have done this lots of times over the years, and wasn't expecting much trouble, but man.

My initial setup used the FCKEditor and IMCE modules, which seemed to be working fine, until we ran into an error with dragging the images. Updating the modules and underlaying library didn't fix it (despite the issue being marked as fixed in the issue queue), so I thought this would be the perfect time to check out the WYSIWYG API module. Unfortunately, this is a module with a lot of moving parts, many of them progressing at different speeds. And drupal.org's policy of not hosting 3rd party libraries makes finding a complete set of modules and libraries that work together somewhat nightmarish.

Long story short, here is what I got working:

Once those are all installed on the server:

  • Enable the three modules
  • Either create a new wysiwig Input Format that won't be available to untrusted users. If you add an HTML filter to that Format, be sure it allows <img> and <p>.
  • Wysiwyg module setting
    • Set your perfered Input Format to FCKeditor 2.6.5 (Note, once you set this, you will need to delete the profile before you can set it to something else. UX fail).
    • Select your buttons, being sure to check at least image and IMCE.
  • IMCE
    • Remember to select a profile for the whatever role your content creator will have.
    • I like to remove the Thumbnail and Resize options to keep it simple.

Can you show an example

Hi Tao,
Nice blog!
I'm looking to do some "documentation" in Drupal so I need to combine all kind of images and text that are open in other documents, or just copied from the web.
Does your solution apply to that? Do you know if anything like that CAN be done in Drupal 6?
Thanks

I might be missing the

I might be missing the complexities of your situation, but what you describe sounds like a typical use case.

Filefield Insert

The wysiwyg API requires a little more setup, but it also saves a lot hassle having to remove the editor where it doesn't belong (like the block visibility settings).

IMCE is the least bad solution when you need to have a library of images, but if sharing images between different pieces of content is not a requirement I would definitely try Filefield Insert as an alternative.

I've been intrigued by

I've been intrigued by Filefield Insert, but I don't really like to use modules without an official release. Especially ones that you need to patch by hand. Have you been using it in production?

I wouldn't enable img tags

I wouldn't enable img tags for the default input format. If you do you'll be inundated by spambots posting images in comments, or the less visible tracker 1px images.

Good Point

That is a good point. The particular site I am building right now doesn't allow input from untrusted sources, but I will add a warning in the original article.

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.