Getting Dojo's dijit.Editor to work in a form

dijit.Editor is one of those so-close-yet-so-far things. It gives users a way to enter fancy formatted text without having to learn HTML, and is part of the Dojo Toolkit, which is supposed to make Javascript easier to work with. But it was a real PITA to get Editor working with what I think its most common use case: replacing a common <textarea> in a form. I ended up spending almost an entire day googling and paging through O'Reilly's excellent book on Dojo before I got it to work. Here's what I finally figured out. <!-- SUMMARY_END -->

The Problem:

dijit.Editor can be inserted into a <textarea> like you insert other dijit widgets, using dojoType="dijit.Editor". The editor displays fine and works perfectly, except that it doesn't actually save to your form for some reason.

The Solution:

You have to make your actual textarea a hidden field, use <div> tags for Editor instead of <textarea>, and include some code in the dojo.addOnLoad() function that copies the text of the dijit.Editor field into the hidden field when the form is submitted. There's a good writeup of this over at Dojo Campus.org.

Thoughts

This problem is not mentioned anywhere that I could find in the official Dojo docs. I can see Dojo partisans making the case that dijit.Editor is a Dijit Application rather than one of the Dijit forms widgets, and that this justifies the special handling required. However, I think replacing the plain ol` <textarea> is probably the most common use case for dijit.Editor, so there really should be better documentation of this.

This experience makes me wonder if Dojo is really the right tool for the job I'm doing. I think I might have another look at jQuery...

P.S. JavaScript: The Good Parts is another really helpful book if you're getting into the language.