Thursday, March 12, 2009

Adding a WYSIWYG editor to Drupal – the beginning:

First, the plain Drupal install creates a fillable form for adding content, just as you'd expect. Second, unlike you'd expect, if you've become used to blog / wiki software, there is a lack of WYSIWYG editor support for your content creators. Part of Drupal's strength is its lightweight core installation. But as a result, not everything you would think would be included is... instead you need to add modules. In this case, the all-powerful visual editing functionality that the content creators I'm working with need requires the addition of a WYSIWYG editing module, such as TinyMCE, FCKeditor, or YUI Rich Text Editor (there are a number out there besides these, of course).

First, I compared Drupal WYSIWYG editors:

Well, I can't give you too many details right now, because after a day and a half of struggling with FCKeditor's integration with IMCE for easy image file uploading, I found YUI Rich Text Editor (per the recommendation of one of the reviewers listed above). I'll go back into my FCKeditor struggles another time. For today, let me talk about YUI Rich Text Editor.

I'd initially ignored YUI because of its failed rating on its html output per the comparisons at (version 5 Drupal WYSIWYG editors). I'm hoping that it's better now. In fact, in its latest iteration (11/25/08, sounds recent enough to me!) – yui_editor 6.x-2.33 now offers IMCE support, so that's a plus (since I'd been thinking about using IMCE since John Blyberg mentioned it at DrupalCamp).

YUI Rich Text Editor has the dependency of Yahoo YUI module. Also, it requires a YUI library, which you can either run remotely off of Yahoo servers (this is the very easy default setting) or locally, by installing a local yui library. It's the latter part that doesn't work right, though. At least, not until you "get it".

The main bit of "it" being an understanding of how your Drupal implementation is structured. When the instructions/troubleshooting hints tell you to point the common settings to files/lib, don't believe them. When other instructions tell you to point the Yahoo Common Settings to files/yui or files/yui-2.6.0, don't necessarily assume that the instructors are writing about YOUR setup. In my case, I have a site hosted on a 3rd-party ISP. I have a public_html folder. I guess it's my document root, but it's not the root directory I get into via the ISP's remote access control panel. But for me, the correct setting for the yui local library was a pointer to sites/default/files/yui-2.6.0.

And yui-2.7.0b doesn't seem to integrate with the yui for drupal yet. At least I couldn't get it to work. The moment I repointed my settings from the yui-2.6.0 folder to the yui-2.7.0b folder, I got errors on my IE when trying to create content, something about "JSON" pointers not working or something like that. I just repointed. I've already wasted all day on this, so I have to get going. No time to get the exact info – sorry about that!

I'm wondering what, if anything, I would actually need IMCE for now, given that the YUI seems to take care of uploading images in the context of the editor.

I haven't hammered this editor yet, so I can't say for certain how it will perform under serious user testing. I also haven't checked to see if its output HTML validates or not. I'll let you know what happens.

And – if I get a chance, I'll write this process and more notes about FCKeditor & IMCE up in additional postings. I'll have to write up the step-by-step of installing and configuring the YUI & YUI Rich Text Editor modules for myself, anyway. Posting them hopefully would help someone else.


Anonymous said...

Thank you for your explanation on the correct library path, i got it to work locally now. (for me, my correct path is "sites/all/libs/yui")

Second, from the clue you gave me, I figured that Yui need yui-2.5.0 to work as the default remote lib it uses is version 2.5.0 but not the latest 2.7.0b.

Earlier version of Yui lib can be found here:

Should you have time, its a good idea to post your article in the relevant yui project page in since I found alot of peoples are having the same problem ;)

Denny Eapen said...

Yui-2.5.0 library did not work for me.

Instead Yui-2.5.2 worked perfectly fine.

Jaya said...

I tried YUI, but the HTML output was not correct for all options. CKeditor feels like a better option for correctness of code and performance.