Luckily 37signals released a WYSIWYG editor last year called WysiHat, the “eventually better open source WYSIWYG editor”, so we tried it out. It was simple, no fancy themes or color schemes, just the backend code.

After playing with it for a while, we found a lot of hidden and undocumented features like including images or adding unordered lists. We decided to fork the project to write some more examples.

WysiHat is a great project and has a lot of potential, but probably hasn’t got the attention it deserves for a while now. There are some missing features you’d expect from a WYSIWYG editor, but the general idea is very, very good.

Joshua Peek told us the project is on hold; “We’re planning to revisit the wysiwyg stuff in early 2010. So you can expect me to jump back in then.”, but we hope there will be more activity from the rest of the community before that.

The Engine

We built the standard stuff like image uploading and html editing using WysiHat for a project we’re working on and we thought others could use it so we built the “WysiHat Rails Engine” and released it to the world.

The goal for the engine was to quickly and easily be able to implement WysiHat editors in a project and doing so as pretty as possible. We extended the Rails Formbuilder to add the wysihat_editor form field. We added facebox and some other javascript goodness and worked out an easy to use uploader. This means you could do something like this, which would give you a fully functional WYSIWYG editor:

<% form_for(@page) do |f| %>
  <%= f.error_messages %>

  <p>
    <%= f.label :content %><br />
    <%= f.wysihat_editor :content %>
  </p>
  <p>
    <%= f.submit 'Create' %>
  </p>
% end %>

This will give you a full editor. The Engine also includes stylesheets and a bunch of icons so it looks good out of the box:

There’s a complete installation guide and an examples page in the github project wiki if you want to check it out.

Like WysiHat, this project is in a very early stage and like WysiHat, we would love you to help out and make this a great piece of software.

So if you have any issues, suggestions or ideas, don’t hesitate to create an issue on github, fork the project or contact us directly.

UPDATE – October 3

I got a lot of work done on the Engine yesterday. It’s a gem now and it’s hosted on gemcutter. The installation guide is updated, so that shouldn’t be a problem.

The ugly rake task is removed and I built a little generator, so all the stray folders in the root — like /public — are gone. I also removed the included plugins to add gem dependencies (paperclip and resource_controller) and added the responds_to_parent plugin installation to the generator, so you don’t have to worry about that. Installing the gem and running the generator is as simple as:

sudo gem install wysihat-engine

script/generate wysihat

While I was working on this, I realized the resource_controller gem is an unnecessary dependency. It will be removed as soon as possible to make place for a good ol’ controller. I think this will help users understand and use the gem better in their applications.

And let me say this one more time; have issues, ideas, suggestions or want to help out? Be sure to let us know!

#main
  :width 97%

  p, div
    :font-size 2em
    a
      :font-weight bold

  pre
    :font-size 3em

into

#main {
  width: 97%; }
  #main p, #main div {
    font-size: 2em; }
    #main p a, #main div a {
      font-weight: bold; }
  #main pre {
    font-size: 3em; }

Just save your Sass file as public/stylesheets/sass/application.sass (filename may vary), and Sass will generate a public/stylesheets/application.css. This file will be re-generated after making changes to your *.sass file. Don’t forget to set an ignore property on your *.css files, since you don’t want to have those under version control.

We decided to use it for all our new projects, which has boosted our CSS productivity. Because of the structured syntax, also the not-so-CSS-savvy programmers can easily find what they are looking for in the CSS file. Highly recommended! See the above mentioned website for detailed installation and usage instructions.

Tip: to convert your plain old CSS to Sass, use the “css2sass” command line tool (included with haml): css2sass oldfile.css newfile.sass.