Flexible WYSIWYG editing for Drupal

A shocking discovery for many a newcomer to Drupal is that a fresh installation offers no controls for styling text in node bodies, comments, or wherever else you might like to drop a boldface or a header.

Most of those stunned beginners eventually realize that this makes sense: Some users want no such text styling, or prefer the complete control of manual HTML tags. And for those who do want word processor-style editing controls, there is no universally-loved solution; there are many editor solutions floating about, each with its own strengths and fans. Drupal lets the administrator choose and install any of many favorites, including FCKeditor and Tiny Tiny MCE. That still irks some who want a built-in solution, but it's a good state of affairs for anyone not afraid of a little hands-on work installing a module and setting up WYSIWYG editing.

Trouble again

I used TinyMCE for a long time, quitting when troubles drove me batty. I switched to Tiny Tiny MCE, which turned out to be a good move when development on the TinyMCE module stopped. But lately, things went haywire again. The symptom was a simple one: Where full Tiny Tiny MCE controls should have shown up for me on this site, nothing appeared but a featureless text box with no editing controls. The "disable/enable rich-text" toggle remained below, but did nothing. Yet I had the correct input format chosen, with all its settings appearing normal too. In fact, I couldn't think of any recent tweaks I'd made that could explain the loss. 

Theme problem? I compared with other sites using a variant of the same theme; they had no problem – at first. I then found the problem appearing with other sites as well, regardless of theme – typically not immediately, but only after refreshing or reediting a node for the second time. Was this a new problem with Safari, then? Apparently not; I saw the same behavior in Firefox too. So, maybe some Javascript incompatibility with the latest version of my OS (OS X 10.6) itself? That could be; I haven't had opportunity to check that yet.

By this point, I went from "let's track this down" mode to "let's find anything that works" mode. (In truth, I was a wee tired of Tiny Tiny MCE too; it lacks the vast customizability of Tiny MCE.) After a little research, I decided to give the Wysiwyg module a try. It's a great piece of work that I think I'll roll out to every site. But it's a different animal from the above-mentioned editor modules, and needs a little introduction.  

Wysiwyg module

Wysiwyg isn't an editor itself. Rather, it provides infrastructure for you to use other editors more easily and flexibly than has been possible so far. In a nutshell:

Editors like FCKeditor or TinyMCE aren't themselves Drupal projects; they're open-source projects usable in many ways. They had to be packaged as Drupal modules by hard-working volunteers, letting know-nothings like me build those editors into sites. (Even then, editors aren't the easiest modules to install, sometimes requiring manual combination of original editor files into the module.)

The Wysiwyg module lets you scrap dedicated stand-alone modules like the above. You install the Wysiwyg module normally, then copy supported editor project files directly into a sites/all/libraries directory. Other than manually creating that directory in your Drupal installation, it's dead simple; the Wysiwyg module admin page even lists the editor projects it supports, complete with download links for quick action. 

Best of all, it lets you easily mix combinations of editors in a single site. You could, for example, assign FCKedit to the anonymous input format, a simplified TinyMCE to an editor input format, and a fully-equipped TinyMCE to a top administrator input format, all from admin/settings/wysiwyg. I'm happy that I can once again configure TinyMCE all I like, and am typing right now into a TinyMCE setup that's pretty simple but has the controls I want. (If you leave a comment, you should see an even simpler set of TinyMCE controls.) 

One sad omission: I lost the wonderful image-handling benefits of the IMCE module, which ceased to work. It turns out, though, that the Drupal community has provided a great fix: the IMCE Wysiwyg bridge module. Simply install it, enable it normally, then enable "IMCE" in the TinyMCE (or other supported editor) configuration options that Wysiwyg provides, and image handling in the editor gains all the great options of IMCE. Things are good. (If there's a little image to the right of this text, then IMCE is working for me.) 

That's a preliminary glowing review, though. There are a couple of things I'm not happy about. I had spell checking in my old Tiny Tiny MCE setup, but there's no checking happening now. And whereas copying text – including links – worked wonderfully in the old setup, now when I paste link-bearing text into this editor, I'm getting unwanted garbage text added to the link code (style attributes, a <span> tag, and so on). Those could be browser issues, not Wysiwyg issues; I need to experiment. Fortunately, Wysiwyg makes that easy, placing many different editors on tap.

More discoveries are sure to come, good and (maybe) bad. In any case, I think the flexible approach Wysiwyg takes is great; if you're starting out on Drupal (or starting new sites), do check it out as a contender for your workhorse WYSIWYG solution.