What WYSIWYG? Why BUeditor + IMCE still gets my vote

I just decided to try the YUI Rich Text editor, because I had heard nice things about it. However a brief test with it this morning revealed that it produces truly horrible markup!

It doesn't take much editing to start spitting out <span> and <div> tags all over the shop.

Just look at the markup that it produces. <br /><br />This should be a new paragraph not a line break.<br /><br /><span style="background-color: #ff00ff; "><span style="background-color: #a0ff40; "><span style="color: #0000bf; "><span style="font-family: 'Comic Sans MS';">And whatever happened to separation between style and content. Inline CSS is horrid! And do you really want to run the risk of your users choosing COMIC SANS?</span></span></span></span><br /><span style="color: #0000bf; font-family: 'Comic Sans MS';"><br /></span><br><span style="color: #0000bf; font-family: 'Comic Sans MS';"><br /></span><br><br>

Urrrgh!

A much better option would be to teach users the bare minimum of html (this really doesn't take too long) and to add a custom button to provide the extra styles you need in a style sheet.

Using BUeditor with a custom button to apply the hightlighted style would make this even easier. It's a perfect compromise - users get the "look and feel" of a WYSIWYG editor, without the awful markup.

This will be much easier to maintain especially when it comes round to the inevitable re-design in three years time!

<p>Just look at the markup that it produces</p><p>This should be a new paragraph, not a line break</p><p class="highlight">And whatever happened to separation between style and content. Inline CSS is horrid! And do you really want to run the risk of your users choosing comic sans</p>

If you haven't used BUEditor, I suggest you give it a try: http://drupal.org/project/bueditor

Tags:

Comments

Couldn't agree more.
Also, YUI can seem to misbehave if you flip between WYSIWYG and code views and make edits in both.
A nice addition to BUEditor is to use it in conjunction with http://drupal.org/project/textareatabs. That way you can indent your code using the tab key.

Random Image:

Brighton beach again
Fishing boats
Hmmm, more pictures of the horizon
It's a mini adventure

Pete's tweets (@prbass)

  • I'm still tweeting, but website won't update. So long and thanks for the fishy terms of service Twitter... 4 years 18 weeks ago
  • Entrance to Victoria underground station currently closed, why don't @TFLtravelalerts ever announce this? 4 years 28 weeks ago
  • Back from hols. Diary for tomorrow says "Data Monday" hard work on UK Civil Society Almanac 2013 begins in earnest 4 years 30 weeks ago
  • @FionaPSDN I love that NHS infographic - now I understand, these are not "top down" reforms, they are "middle out" 4 years 32 weeks ago