Got WYSIWYG?

WYSIWYG, the acronym that's fun to say, tricky to type, and painful to see on an RFP. I don't have an abiding hatred for WYSIWYG editors, but I'm not terribly fond of them either. However, understanding that most people can't grok HTML (the same ones who don't know what grok means, perhaps), I can see why people appreciate them. Unfortunately, in Drupal, WYSIWYG editors can cause a world of hurt.

I'll be brief: if you're building a site that requires WYSIWYG, do yourself a favor and alter the settings so the editor defaults to disabled and is added only to specific fields on a "need to use" basis. If you're maintaining a WYSIWYG module, do the rest of us a favor and have them default to disabled in most areas with the ability to opt-in specific textareas. I've been managing CKEditor on a client site, and it has a nifty pattern matching system for tweaking the visibility of the editor on various fields. (I still think it might default to being enabled everywhere, though.)

Why? Am I just being crotchety? In truth, while there are routinely used textareas on which the end user might benefit from a WYSIWYG editor, there are an equal number of textareas scattered around Drupal's administrative pages where editors just get in the way. Even worse, most seem to add empty p tags to textareas when their form is saved "just because." I'm not sure how it is for other module maintainers, but at least with Ubercart we regularly received puzzling support requests about simple features not working. This might be an e-mail that doesn't get sent because the textarea where the end user specifies multiple recipients (one per line... sound familiar?) has HTML in it that the end user can't see... thanks to their helpful WYSIWYG editor.

A less is more approach will benefit the end user and the module maintainers. Furthermore, an editor is often just visual clutter, like on the message textarea of a contact form. I don't suppose people usually compose contact form submissions in Word?

There might be modules out there that already operate like this, so please don't take this as an indictment on any particular module. Also, if anyone is aware of a WYSIWYG module like Unfuddle's, I'll give you a bearhug at the next Drupalcon if you'd be so kind as to link to it in the comments. If you haven't seen what they do, you should. It's my ideal solution if someone could ever bake it into a Drupal module.

Topics: 

Comments

Yeah, one of my clients sent out a mass mail message last week that ended up with p and br tags all over, despite being plain text. Ouch.

But of course he couldn't see them.

I also have a major problem with people pasting in html content to wysiwyg editors, the end results are unpredictable.

We need them, but we despise them. Not a good position to be in.

Have you thought about using Markdown or Textile? It's simple enough that most clients can grok it but it doesn't add crap to your markup. Also, you might check out MarkItUp editor in Markdown mode for an unfuddle-like editor.

Would it be possible to build an input filter that would "correct" a lot of the typical Word spans and fonts? If so, this would be a great cleanup option for pasted word docs.

Yep! In fact, that's what I meant by Unfuddle's approach to WYSIWYG. I should've clarified in the post... they have WYSIWYG type buttons, but all they really do is add the appropriate Markdown or Textile (you can pick) markup into the textarea. It's really slick and looks great!

One of the biggest (okay, THE biggest) problem I have with WYSIWYG editors is copying and pasting content from word documents. Users insist on doing this even when I beg them not to. I usually end up having to untangle the rat's nest of span and font tags myself.

There must be a way to strip out the crap while keeping things like paragraphs and lists, but I have yet to find one-- at least one that works. Anyone have any suggestions?

I've been using http://www.wymeditor.org/ lately and while spartan, it seems to to the best job of telling the user "This is not right!" with it's nice visual blocks around p's and divs's. I definitely agree though that there's no existing optimal solution.

I've used the WYSISYG module on some sites I've done with TinyMCE with success, for the most part. It has a great filter for pasting form word, and even has the option to always paste form word (the default is to provide a popup window to paste into). It takes some tweaking, but Tiny MCE can be configured to give a bit more than basic functionality, but not a full editor that could be overkill and let your users break your carefully crafted design.

The WYSIWYG module only adds the relevant WYSIWYG editor when the associated input format is enabled for a certain textarea. For example, if TinyMCE is associated with the Filtered HTML input format, then only textareas that are using Filtered HTML will see the TinyMCE WYSIWYG editor. That eliminates all problems with administrative forms because you would only use the Filtered HTML format on a textarea where HTML would make sense.

But i'll link it anyway:

http://drupal.org/project/bueditor

benjamin, agaric

Hmm, I know it exists, but I wasn't aware of the Markdown integration. I'll have to give it a spin! Thanks, Benjamin. Smile

Have you looked into using the WYSIWYG module? It've used it to great success.

I found a new one called Whizzywig (a nice way to pronounce it!)

So far so good but it has problems using the indent left once you have applied a bullet point.

I actually found out the code tag recently and in my view for forums, discussions, and anything that doesnt need pictures, it is actually sufficient with a standard HTML text area (ie sumbit the textarea info to a script and surround it with before printing out submission to browser and watch it print just as written in standard text area!

Never used CKEditor (yet), but the FCKEditor has settings that you can set up per role and make the editor default to disabled on all pages and include on certain ones or vice versa (enabled, but disable in specific paths or even fields). even gives you the path or field to enter in that settings screen to enable/disable in that field/path. will be using CKEditor on new sites if needed though. much slicker looking and supposed to be quicker loading (big problem with FCK!).