Not long ago I came to the realization that my blog theme could easily be done in CSS3 as opposed to the background images and complex CSS I had hacked together previously. In an afternoon, I had things pretty much figured out. I has been live for a few days now and I doubt anyone noticed.

First, let’s get something out of the way. WYSIWYG stands for “What you see is what you get.” It’s surprising how often people don’t know what that means. Given that this is supposed to be a “technical” blog post I won’t go into detail about what a WYSIWYG editor is. Let’s assume you know what it is, you’ve tried TinyMCE, FCK-Editor, or others. Let’s also assume you’ve gone through considerable pain attempting to integrate these editors into your site, or styling these editors for your site. It never quite works out right. The editor doesn’t work right when used with AJAX, or the interface and buttons are completely foreign to your layout and design. Sometimes these things can be fixed, but it usually involves a lot of hacking. Leave it to the guys at 37Signals to make it all better.

Wysihat was introduced in October 2008 by Jason Fried on the 37Signals blog, Signal vs. Noise.

WysiHat is a WYSIWYG JavaScript framework that provides an extensible foundation to design your own rich text editor. WysiHat stays out of your way and leaves the UI design to you. Although WysiHat lets you get up and running with a few lines of code, the focus is on letting you customize it.

Normally, I would read that with a skeptical eye, but given that this is 37 Signals, there might actually be something to Wysihat. Wysihat is open source and, hosted on Github. It’s also small. Wysihat weighs in at 20k uncompressed, and a mere 4.8k when delivered gzipped through my Apache server. To be fair, this minuscule size is due to Wysihat’s dependence on Prototype. I’m a Rails developer and Rails defaults to Prototype, so I’m OK with that. It is worth noting that you will need to make sure wysihat.js loads after prototype.js or this won’t work.

Note: If you clone the repository on Github, you’ll quickly notice there is no wysihat.js file anywhere to be found. All you need to do is switch into the directory where you cloned the wysihat repository and run the ‘rake’ command without any arguments. It will build the Javascript in dist/. Of course this is also in the README, but you were so excited to get started you forgot to read that, right?

After all that praise you’d think that all you have to do is add Wysihat source to your page and your forms are suddenly improved with editor goodness. Not quite. Wysihat is intended to be used as unobtrusive Javascript that decorates the text fields of your choice. You have you write the part that initializes the editor and sets up the toolbar with the buttons you need.

Event.observe(window, 'load', function() {
  var editor = WysiHat.Editor.attach('content');
  new WysiHat.Toolbar(editor, {buttonSet: WysiHat.Toolbar.ButtonSets.Basic});
});

In the four lines of Javascript above, The first line simply makes sure the page DOM is set before we do anything like adding an editor to it. Then, we have to initialize the editor. All you have to do is pass in the ID of the text area you want to add the editor to. Here it is saved to a variable so we can then add the default toolbar (bold, italics, underline) to the editor. Without that line, we’d get an editor without buttons. That’s it! However, for your four lines of code, you only get a basic looking editor.

Event.observe(window, 'load', function() {
      var editor = WysiHat.Editor.attach('content');
      var toolbar = new WysiHat.Toolbar(editor);
 
      toolbar.addButton(
        { name: 'bold', label: "Bold" }, function(editor) {
        editor.boldSelection();
      });
 
      toolbar.addButton(
        { name: 'underline', label: "Underline" }, function(editor) {
        editor.underlineSelection();
      });
 
      toolbar.addButton(
        { name: 'italic', label: "Italic" }, function(editor) {
        editor.italicSelection();
      });
});

The above code looks more complex, but it really is not. Again we wait for the DOM to be set, and initialize our editor. Instead of using Wysihat’s basic toolbar, we want to customize our own. Only the editor is passed in to the toolbar init line, leaving us add the buttons.

We use addButton and passing a Hash with the name and label. The name will become a CSS class on the link that gets inserted and the label is the link text. The final argument for addButton is a function inside of which we call another editor method boldSelection(). This does what you would expect and bolds some selected text in the editor.

The underline and italics buttons can be done the same way and there are also existing methods making selected text underlined or italics too. If you take a peek at the Wysihat source around line 65 you’ll see WysiHat.Commands. Below that are all the functions the editor can call for doing other common tasks such as creating lists, links, images, etc.

With what I’ve covered so far, you should be able to add an editor to a page and add any number of buttons using the built-in Wysihat editor functions. All of the code I’ve shown is taken from the examples directory of the project (this is also stated in the README). In Part II of this post, I will show how to write your own custom button functions and how to make the editor not look so boring by adding some simple CSS. Finally, I’ll finish up with some of the problems and pitfalls I’ve found so far using Wysihat in one of my projects.

Update: Part II has been posted!

I’m divided. While I like writing these longer posts at times, often I find that it’s the very reason I don’t post to my blog more. I don’t feel like sitting down and writing a full blog post all the time. Not to mention that I tend to edit constantly and what starts as a 10 minute project easily turns into 20 or 30 minutes. Jaiku’s 140 character per post limit is useful at times because it forces you to say exactly what you want without any fluff.

For a couple of weeks now I’ve been debating on whether or not I want to continue hosting my blog. I bought hosting and a domain from GoDaddy back in February, but I haven’t bothered to transfer anything over yet. The main reason was because I planned to rewrite my own blog software in Ruby on Rails. The problem with that, however, is that I have to migrate all of my blog posts over to the new system. Also, Go Daddy’s Rails performance is poor. Not to mention that they don’t offer ssh access on my account (no Rails migrations).

The 3rd option is to move the blog over to a hosted blogging service. It’d probably be easy to import my posts, but I’m also sacrificing what I can do in terms of control. When I host it, I can customize things much more and I like that.

So I’m still undecided. One of these nights I just need to sit down and figure it all out or at least move my hosting over to Go Daddy.

Then today, I get to work and open my email to find our lead developer is leaving for another job in a little more than 2 weeks. I think everyone in the company was a little surprised. Granted, he wasn’t a true employee (only on a long term contract basis), but we still thought he enjoyed things enough to stick around. I kind of thought that we would be bringing him on as a full time employee as the company matured. Maybe he just got sick of waiting around.

Frankly, I’m scared. The only other dev (also on a contract) was brought to us by the guy who is leaving. It’s not that James and I don’t get along or work well together because I think we do. The problem is, I think I saw him coming to us as sort of a “favor” to Jeff. I know there was some dispute over wages prior to James’ contract signing, and I have a feeling Jeff sort of talked him into the job. Now that Jeff is abandoning ship, I don’t see James sticking around for long. His only reason for being loyal is now on it’s way out the door.

That leaves me; alone. Now, I’m sure Scott will be gearing up to hire a new developer soon and hopefully that person can be as good of a programmer and mentor as Jeff is. I just have this feeling that it’s not going to be an easy road the next couple of months. It’s kind of like that feeling you get when someone breaks up with you and you never knew there was a relationship problem (it’s happened to me twice).

And on a small side note, I’ve bought a domain name and hosting from GoDaddy. My hope is to get everything on Rails. I’ve yet to choose between Typo and Mephisto for a blogging engine, but if last night is any indicator, I’ll be going with Mephisto. I spent a good 3 hours trying to get Typo installed on my new host, and it didn’t go very smooth. In time, I also hope to rewrite the other portions of my site in Rails. And lastly, because I now own my own domain, the address will be changing. What I plan to do is point this domain at my new host or set up a redirect until my time runs out with my former host. Regardless, jrmehle.homelinux.net will become jrmehle.com.