Oops, you need to build the package before running this example. It's easy: just run rake in the project's directory.

This is a more advanced example that extends the built-in toolbar class. The code is a bit more verbose, however you have full control of the html.

  document.on("dom:loaded", function() {
    var editor = WysiHat.Editor.attach('content');

    var boldButton = $$('.toolbar .bold').first();
    boldButton.on('click', function(event) {
      editor.boldSelection();
      Event.stop(event);
    });
    editor.on('wysihat:cursormove', function(event) {
      if (editor.boldSelected())
        boldButton.addClassName('selected')
      else
        boldButton.removeClassName('selected');
    });

    var underlineButton = $$('.toolbar .underline').first();
    underlineButton.on('click', function(event) {
      editor.underlineSelection();
      Event.stop(event);
    });
    editor.on('wysihat:cursormove', function(event) {
      if (editor.underlineSelected())
        underlineButton.addClassName('selected')
      else
        underlineButton.removeClassName('selected');
    });

    var italicButton = $$('.toolbar .italic').first();
    italicButton.on('click', function(event) {
      editor.italicSelection();
      Event.stop(event);
    });
    editor.on('wysihat:cursormove', function(event) {
      if (editor.italicSelected())
        italicButton.addClassName('selected')
      else
        italicButton.removeClassName('selected');
    });
  });
Bold Underline Italic