Customize YUI Rich Text Editor for Drupal

My previous post (in Thai) about usability of Drupal content creation screen got some comments on the WYSIWYG editor, so I write this followup post.

Both TinyMCE and FCKeditor do not suit my need. After reading a post on Acquia wiki (registration needed), I learn with two alternative projects. The first one is Editor, an exclusive WYSIWYG for Drupal. It's very promising but still in very early alpha. The second is YUI Rich Text Editor from Yahoo! Developer Network. (Real demo is available from Yahoo! site)

There is already YUI Editor module for Drupal. Anyway the concept is slightly different from other Drupal WYSIWYG modules. No need to download twice, This module will pull the YUI editor JavaScript file from Yahoo! web site on the fly (local copy is also an option).

The installation process is not yet perfect. You need to install another YUI module and change the YUI version from 2.3.0 to 2.5.2.

Ok, it's time to discuss the good & bad of YUI Editor. What are the reasons for it?

  • Dialog will appear within page, not a new window.
  • Direct uploading image from Browse button. No need to use IMCE to upload & choose image from file list again.

The big downside is its look. See screenshot below:

The screen estate is wasted. Anyone need label above button groups? I've never seen this label in any word processor before. Why include it?

Fortunately, YUI Editor is fully customizable. Button configuration file is very straightforward and the skin is powered by CSS. So I can manage it to be like this:

Still not perfect (see the Normal drop down button) but far better from default. Let I polish it a bit more and then I will post the code. I will also try to live with it several days to evaluate further more.

Update: 19/07/08
After blogging with YUI editor, I found some more problems:

  • Ugly HTML output. Well-formed and well-structured tag but no line-break and indent
  • No <!--break--> button for Drupal input format

โอ้ว คารวะคนจริงอีก 1 จอก
คิดแล้วพูดแล้วทำ เป็นผมคงยังไม่ถึงไหน ได้แต่บอกว่า "ขอเคลียร์งานก่อนเน้อ"

Post new comment

The content of this field is kept private and will not be shown publicly.