Thursday, October 23rd, 2008

WysiHat: 37 Signals discuss new open source WYSIWYG editor

Category: RichTextWidget

We recently discussed the bane and choice of rich text editors and we have a new Hat in the ring. WysiHat is a new editor based on Prototype from 37signals:

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.

We are giving developers early access to the project while we continue to work out the remaining issues. Note: It’s extremely early. Contributors are welcome so please check out the project on GitHub and send us your feedback.

It is early days, but if you take a peak at the code, you see some examples:


  1. // Simple Example
  2.   Event.observe(window, 'load', function() {
  3.     var editor = WysiHat.Editor.attach('content');
  4.     new WysiHat.Toolbar(editor, {buttonSet: WysiHat.Toolbar.ButtonSets.Basic});
  5.   });
  7. // Using Toolbars
  8.   var editor = WysiHat.Editor.attach('content');
  9.   var toolbar = new WysiHat.Toolbar(editor);
  11.   toolbar.addButton(
  12.         { name: 'bold', label: "Bold" }, function(editor) {
  13.         editor.boldSelection();
  14.       });
  16.   toolbar.addButton(
  17.         { name: 'underline', label: "Underline" }, function(editor) {
  18.         editor.underlineSelection();
  19.   });
  21.   toolbar.addButton(
  22.         { name: 'italic', label: "Italic" }, function(editor) {
  23.         editor.italicSelection();
  24.   });

Posted by Dion Almaer at 6:06 am

3.4 rating from 27 votes


Comments feed TrackBack URI

There’s early, and then there’s build-it-with-prototype-and-ignore-conflicts early.

Comment by jtresidder — October 23, 2008

good point, but it’s nice to see this kind of thing in the works.

look forward to it ;-)

Comment by indiehead — October 23, 2008

I’ve taken a look a t the code, and it’s little more than turning on designMode and setting up events. If the designers at 37signals really wanted a great open source WYSIWYG editor, they could just contibute their expertise to one of the existing projects.

Comment by dmayle — October 23, 2008

The demand for this type of project must be huge.

Comment by ilazarte — October 23, 2008

I’m excited by it. I’d love to have a framework like this that I can lay on top of Prototype to gain text editor controls just like I lay Scriptaculous on top when I needed animations and effects. Using this setup it looks like you could easily create a new class that handled the initialization of your company’s standard editor format, and then just invoke it where needed.

Comment by jonhartmann — October 23, 2008

Leave a comment

You must be logged in to post a comment.