Flexible WYSIWYG editing for Drupal

16 Nov 2009

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.) 

Testing!

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. 

Comments

Unknown Drupaloid's picture

Thanks for this -- some useful stuff here. I have to train some people to edit & update their Drupal site & I have only a fairly slippery grip on it myself.

I will make up a pdf manual for them showing what the bits of their site (blocks, etc) look like & how to find & edit them.

Hopefully it will work for them.

drupalace's picture

Thanks for the comment! And while it's not something you asked about, as long as I'm here, I'll take this chance to add a tip related to the main text content: WYSIWYG text editing.

I mentioned that the WYSIWYG module and Tiny MCE leave me with a big complaint: pasting text into a text editor window creates lots of <span>-enclosed garbage code (font, size, etc.) that I never asked for. All I want is to paste in copied text as it is, ideally keeping any line breaks, italics, and so forth from the source, but not adding new cruft.

Turns out there's a Tiny MCE button that does the job. Place the cursor where desired, click that button, and a small window pops up to accept your text pasting. From there, it's inserted neatly into the text editor window, with line breaks etc. but none of the garbage code. 

I can't recall the name of the button, so let me check. Heading to my Wysiwg admin page, and clicking "Edit" for the appropriate input format, I get...

Ha. I get nothing. For reasons unknown, I now can't open the Wysiwyg/Tiny MCE button settings for this site. (There's always something broken on this site.)

Fine. Borrowing another site, where things are working, I see there are two similar buttons: "Paste text" and "Paste from Word". Unfortunately, the former doesn't give the results I want: it adds line breaks, and adds garbage code too. Yechh. "Paste from Word" does work nicely for me. Which makes the "Paste from Word" name a wee odd, as I'm using it with success to paste from my browser, from my text editor, from pretty much anywhere but Word (speaking of "yecch"). Well, unfortunate name aside, I'm glad it works.

So, there's one text editor trouble overcome, even if somewhat clunkily through use of a separate paste window. Still no spell check in my Tiny MCE, though. (And now I have a buggy Wysiwyg admin form on this site. Sigh.)

Add new comment