• Just listened to: Bartok  
• Currently learning: Little Sweep, Belshazzar  
• Watching: Bluestone 42, Broadchurch, Foyle  
• Just recorded: Lead me not  

I have been using the Xinha wysiwyg  software on a particular site, but was getting fed up with it. The latest project required just a small number of wysiwyg options (bold, italic, underline, maybe lists) to create simple, text-only emails. The site, like most of mine, runs with jquery, so I did about 30 seconds research and came up with HtmlBox. It’s free, doesn’t even need you to acknowledge where it comes from, and it’s small (14k).

That said, the documentation is a little lightweight, too. So while it was very easy to set it up so that an existing textarea could use it, I had to spend a bit of time finding out how to refine it.

So, to speed it up for others, here are some of the things I found:

1. Icon set didn’t show. I am intending to use htmlbox multiple times on the site, so I stored it in the /js folder, which I linked to relatively. That’s fine, but it couldn’t then find the icons. It was only when I realised that there was a list of options at the end of the manual that I discovered the ‘idir’ option. Give that option a string which is the path to the icons, and you’re done. There are two icon sets. I use the default.
2. Couldn’t see the text on a confirmation screen. Before sending the email I have a popup dialog so that I can confirm the text I want to send. This didn’t work at first. Not until I discovered (again, look at the end of the manual) get_text() and get_html(). To get it to work properly, you’ll need to assign your htmlbox call a variable name. So you don’t just go $(“#content”).HtmlBox({options}), you go html_box = $(“#content”).HtmlBox({options}). Now html_box.get_html() will get you the text you’ve typed, with the html codes intact (get_text()) will strip the html. Xhtml is available.
3. Saving the text. I save the email text to the database so that I can come back and edit it before sending. The non-htmlbox version of the form was just $.post-ed using serialize(), but that didn’t work after htmlbox came along (htmlbox creates its own iframe to replace the textarea). Again get_html() came to the rescue – assign the result of html_box.get_html() to textarea.val() and you’re sorted. In my case it was $(“#main_content”).val(html_box.get_html()), and form.serialize() will happily submit the whole lot.
4. Getting the text back. Not surprisingly, there’s a set_text() method, too, so that when you pull the text back from the database and want to put it into the htmlbox-ed textarea, all you need do is (in my case) - html_box.set_text(data.email_body).