Drupal 7 – Rich Text Editing and Uploading Images

I got Drupal 7’s final release installed a few days ago and I’ve figured out how to get started at themes (more on that later). Once you start getting to work on themes you need to really have some content in your site to see how the layout responds to large posts. Adding content generally means entering content and that generally means a rich text editor with full functionality and the ability to add attachments and images.

Drupal 7 – Shouldn’t this be easy?

I think this is a reasonable question – why is this not all out of the box with Drupal 7? Joomla and Plone both have this all setup as a default configuration with well tested integrated rich-text editing and image/media managers. Other tools too – like the one I’m using for my blog – WordPress. Great and simple editor. What’s the deal Drupal? Oh well – I’m sure this can be fixed so read on.

Drupal 7- Finding and Adding Modules

So the first thing that you’ll need to do is pick out the right modules to use. This is not an easy task on the Drupal site these days. There are so many modules, the filtering for only modules that work with Drupal 7 does not really work too well, and there’s not a lot of guidance as to which is the best. I’ve really stopped using the main Drupal site and instead go here: http://drupalmodules.com/ to look for the best modules and reviews on them.

The first thing to do is go into the D7 admin tool and enable the image module and then set the permissions so that the right user groups have access. Under Configuration and Text Formats you will also want to tweak the filtering of HTML formats. I generally enable full HTML for authenticated users, but you may not want to do this for security reasons.

Drupal 7 – IMCE

After getting that setup I picked out a few modules. For managing of files I grabbed IMCE – this is a no brainer. The instructions and module worked perfectly so just download it and extract it to your sites/all/modules area. I restarted apache and then enabled the module.

You’ll want to go and adjust a profile for IMCE and then apply if to your user groups. Pretty straightforward – I didn’t adjust much except to allow any size image resolution to be uploaded – look under Administration>>Configuration>>Media>>IMCE for the options. With all that done you’ll now be able to attach files to posts and have them appear as attachments in blogs, pages, etc. – that’s ok, but not exactly what I wanted.

Drupal 7 – CKEditor

Rich text editing requires an editor – there are a bunch, but I think CKEditor is a good one that I’ve used in the past. There’s a D7 module for it. I grabbed the module. The next step is too go to the CKEditor site and grab the actual editor. The instructions are pretty good in the module. You need to extract the module to your config. Then extract the editor itself into the ckeditor folder inside the extracted druapl module. If you get that all right then you’ll have a working editor that is pretty complete.

There’s a button on the toolbar for adding an image, but at this point there’s still no “upload” capability. Why not? There’s no connection right now between the IMCE stuff and the CKEditor module. I messed around a ton and google’d around. I found no clear answers to this seemingly easy thing to get working. There are two possible solutions I found –  getting CKFinder to work with CKEditor or giving the WYSIWYG module a try. I couldn’t find any D7 info for CKFinder (there’s a bunch of posts like this for D6) so I decided to give WYSIWYG a shot.

Drupal 7 – Installing and Configuring WYSIWYG

The module install is pretty straightforward. After extracting the files and then enabling the module (there are two of them – WYSIWYG and the “bridge”) I was a bit puzzled because when I went to the module’s configuration screen it listed CKEditor as “not installed”. Looking closely at the instructions, you need to have a copy of the editor’s code placed in a new directory all/sites/libraries. I put a full copy of the editor in there and then restarted apache.

Sure enough that did the trick, but I still had a problem. When I went back to the editor I still could not see the menus and options to upload files. I still had the original CKEditor enabled. I figured that Drupal might still be putting the original editor in the fields rather than the “new” one so I disabled the original one and bounced everything. Now when I went to edit stuff I could see an editor loading, but the toolbars were completely empty. What now? I went back into the WYSIWYG setup screens and under buttons all the checkboxes were off. I went thru and checked them all and voila!

With that fixed everything seems to be working right. The browse button now appears properly when the image add screen is displayed. When you click browse the IMCE screens open up and you can either browse images already on the server or upload new ones.

That sure seems like an awful lot of work to get something that is almost universally expected and desired to be used out of the box. Once it is working its ok. I think because the modules are all coming from separate sources that the user experience is not that great. It just looks and feels a bit clunky as a user, but for not I’m satisfied with this configuration. The editor itself is ok, but since WYSIWYG supports a bunch of different editors I am going to try them all and see which one is the best.

I’m also going to read through the CKFinder stuff for Drupal 6 and see if it would apply ok to Drupal 7. That might also give a more integrated feel between the editor and the upload functions.

UPDATE 05-Feb-2011: I figured out how to update CKEditor to not be quite so ugly. If you look in siteslibrariesckeditorskinskama you’ll find the CSS and images and things that it is using. I updated all the sprites to use reasonable colors and such. At this point I think I still prefer TinyMCE. I have both enabled on my Drupal site so that I can use them for a while and decide.