YUI Editor: A Simple, Beautiful, and Easy Drupal WYSIWYG editor

10.13.2008

Reviewed Version: yui_editor-6.x-2.0
Depends on: Yahoo YUI

VERDICT: Outstanding! The only lovable Drupal WYSIWYG editor . Painless Installation, Great First Impressions, Easy to configure, image Uploading/insertion works out of the box, editor behavior solid and intuitive, and offers good security features.

In our last review of WYSIWYG editors, a certain editor won because it met my low expectations. Thanks to the tip from Sanjeev, I found an editor so good its off the charts.

Painless Installation, Great First Impressions

The moment after I installed YUI Editor I found this refreshing WYSIWYG smiling at me.

By default, the module uses files hosted by yahoo to avoid having to download install 3rd party scripts. For those who feel squeamish about this, the module allows you to set the include path to somewhere locally on your server. However, for most users, this setup means one less step, one less thing to screw up, and one less 3rd party library to track.

Easy to Configure

Managing which buttons you want to include, or exclude on your editor couldn't be easier. You just drag and drop the buttons into enable or disable blocks, hit save and done.

When I looked over the other profile settings, I was flabbergasted. I had control over everything that I cared about, and I don't care about much:

Height and width of editor
Show a code view button? or a plain text button?
textarea IDs, user roles, and paths to apply the profile

Bravo!

Image Uploading/Insertion works out of the box!

If enabled, this even works out of the box!

Intuitve, and Rock Solid Editor Behavior

This editor doesn't guess what a paragraph is, instead it takes a different approach: hitting return twice, creates a blank line that becomes a paragraph. Hitting return creates a simple break tag. Lists, and headers work better than any other editor I've used. It feels good to write in this editor!

No Editor is Perfect

Alas, there were a few things I didn't like:

flickr integration completely broken
Having access to a editor profile seems to result in every needing javascript and css file to be included in head. This won't be a problem for sites that don't need to have a public facing wysiwyg editor.
This is made worse by the fact that path based inclusion is currently broken.
Editor escapes dangerous tags, which is great for security, but I'm selfish, and wish I could write tutorials in the editor - that doesn't seem to be an option!

Shortcomings aside

If you need a drupal wysiwyg editor, this one is the first one I'll think of.

Nick Lewis's blog

Comments

Mon, 2008-11-17 18:50 — Daryl James (not verified)

Thanks for the WYSIWYG

Thanks for the WYSIWYG editor. Didn't know there was such a thing for Drupal. It's a big help.

Thu, 2008-11-06 16:35 — prodosh (not verified)

It has one major bug:

It has one major bug: resizing the text area leads to the loss of all unsaved text - a very nasty bug.

There is also a resizing bug that lets one resize to outside the "column" of the text area. If you resize out to the right, after this you lose access to the resize element because it is outside the visible area and one is unable to resize back to the original size without reloading the page.

If these and a couple of other minor issues are fixed, YUI would be my first choice for WYSIWYG editor as well.

Mon, 2008-10-20 16:15 — Renee (not verified)

Hmm - I chose to go

Hmm - I chose to go all-jQuery-all-the-time since it's there in Drupal anyway. I like some of the cool stuff you can do with YUI, but I too am concerned about the performance hit of including yet another library.

Mon, 2008-10-20 19:54 — Nick Lewis

Yes, its really only good

Yes, its really only good backend wysiwyg for composing content -- if you're pasting word docs, for example, its not going to work.

Sat, 2008-10-18 17:40 — Morten Andersen (not verified)

Hi Very nice Drupal WYSIWYG

Hi
Very nice Drupal WYSIWYG editor - I use it on several websites and I know the users are happy
:)
Morten
www.lille-web.dk

Thu, 2008-10-16 18:20 — Alex Jarvis (not verified)

I like the way YUI looks, but

I like the way YUI looks, but without file uploading capabilities it's a no go for me.

Tue, 2008-10-14 07:37 — Bèr Kessels (not verified)

The thing I really dislike

The thing I really dislike here, is the completely off-Drupal image-uploading. I want *integration*, not Yet Another Potential Security Hole (or Yet Another Concept To Learn To Use).
* Re-use my CCK file attachements
* Re-user Core's attachement system
* Re-use image.module images
etc

This is the reason why we dropped all WYSIWYG image integrations ATM, and are -indeed- looking at YUI. YUI allows us to build this (and share it!). But I consider "image upload" to not work OOTB as the author states. In fact: my advice is to remove this alltogether.

Bèr

Tue, 2008-10-14 14:09 — Nick Lewis

Yeah, but my clients just

Yeah, but my clients just want to be upload an image into their posts without a lot of fuss.

Tue, 2008-10-14 06:32 — jeffcd (not verified)

2.6.1 was released to fix a

2.6.1 was released to fix a couple of the errors mentioned here. Namely, support for YUI 2.5.x and 2.6.x. Loading of JS files on admin pages. Fix with using drupal_add_js.

Mon, 2008-10-13 19:16 — John Fiala (not verified)

That sounds good, but how

That sounds good, but how extensible is it? If I need a specialized widget button, can one be added?

Tue, 2008-10-14 04:33 — a passing drifter (not verified)

Yeah, you can extend it. It's

Yeah, you can extend it. It's YUI. Learn the YUI way and you can add or remove buttons at will. You can even add much more advanced functionality such as adding a reference to a node. If you do that, please contribute it. :-)

Mon, 2008-10-13 18:43 — sun

Interesting. Mind to add YUI

Interesting. Mind to add YUI editor to Wysiwyg API? :) If users do not even need to download an external library, this sounds like a nice candidate.

Mon, 2008-10-13 23:48 — Nick Lewis

Was that a challenge? ;-)

Mon, 2008-10-13 13:21 — Sanjeev_Old (not verified)

If you set the YUI editor to

If you set the YUI editor to only show up on node/add/* and node/*/edit pages, it will not include all the JS and CSS files on rest of the pages.

Also, this reduces the need to have exclude tag ...

Mon, 2008-10-13 20:18 — Nick Lewis

Oye seems to break it.

Tue, 2008-10-14 06:29 — jeffcd (not verified)

I just fixed this. It is in

I just fixed this. It is in 2.6.1 release. Hopefully I didn't break anything else in the process. I just got a person who is going to help me with QA so my releases aren't so buggy (hopefully).

Mon, 2008-10-13 09:39 — Jens (not verified)

Hey, Thanks for taking the

Hey,
Thanks for taking the time to share your WYSIWYG with the rest of the world! I will definitely try the YUI Editor.

Also, there's a broken image in this blogpost under "Image Uploading/Insertion works out of the box!".

Greetings from Sweden,
Jens

Mon, 2008-10-13 09:00 — Victor Kane (not verified)

I was also impressed with

I was also impressed with this editor.

There is just one thing it could learn from certain other WYSIWYG editors: being able to configure textareas you DO NOT want it to be invoked on. The only alternatives right now are to include all textareas by leaving the configuration list blank, or by painfully having to list all paths (wild card regular expressions allowed) you wish it to be invoked upon. So, for example, you cannot exclude, say, admin/build/* or admin/build/block, to be able to include php code.

As an alternative, I would miss the possibility of enabling and disabling the editor on the fly.

Otherwise, very smooth, very nice editor, with a very "highly integrated" feel.

Victor Kane
http://awebfactory.com.ar

Mon, 2008-10-13 14:12 — Nick Lewis