Introducing WysiHat: An eventually better open source WYSIWYG editor | Hacker News Reader

Introducing WysiHat: An eventually better open source WYSIWYG editor

37signals.com

61 pointsqhoxie37 comments

One of the examples: http://qhoxie.com/wysihat/

edit: updated to show button styling

Thanks for the preview. I love the idea of not being stuck with the typical Windows98-looking toolbar all the others seems to have.

Something I hope to see this implement: A function to strip any bad formatting/code that is generated when pasting text into a WYSIWYG editor. So much of my time is spent going through content and stripping bad code that was generated by Word/Outlook.

It does not seem to do this now, but the base seems flexible enough that it could in the future. Here's hoping.

Every time I hear something like that it sounds like a good idea, then I remember: internet explorer 6.

It would work on half the browsers and need a dirty hack for the rest.

37signals dropped IE6 support :)

The blog post says they're going to support it with WYSIHAT though.

I don't see anything suggesting that...

Agreed. What you see is what you get is a lie of omission.

What you don't see is the horrible HTML generated behind the scenes cough Sharepoint WYSIWYG editor cough.

At domestika.com we've been developing a javascript XHTML purifier, for this purpose. It's based on the algorithm for parsing html, specified in the HTML5 draft, so it's a lot more powerful than the typical regular expression based solutions.

For our use we're only interested in a very small subset of XHTML. We use a rich text editor to let clients edit the contents of their web sites, and we don't want any tags included that could disrupt the design of the page. So only the most basic markup is allowed.

Should be easy to extend the script to take into account more of the elements specified in the HTML 5 draft, if anybody wants a more permissive purification...

Best of all, we just open-sourced the script.

Grab it from Github: http://github.com/biilmann/javascript-xhtml-purifier

Original anouncement (in Spanish): http://domestika.org/foros/956-kode/hilos/73209-depuracion_d...

Is there any way to prevent pasting rich text? I can strip out the tag soup, but it would be great to have the option to only allow pasting plain text.

Nopes - you have to cleanup the result of the paste.

As soon as you enable designmode on a document, every paste coming from something like Word will be transformed into delicious tag soup for you to deal with. No way to just disable that 'feature'.

What you see is half assed texteditor?

I think your comment is a bit unfair, give him some time. It doesn't even have a version number on it yet.

I think what byrneseyeview means is:

What You See Is Half Assed Texteditor

Um, OK. Still doesn't change my opinion of the comment though. I can see I am however in the minority.

The point right now is not about being stylish or having lots of functions, it's about the direction. They are making an editor that can be properly marked-up and styled. The rest will come.

Can't wait for someone to port this to jQuery! :)

I don't understand why they (Josh Peek) didn't base it on jQuery in the first place. Prototype is like 128K vs 15K of jQuery.

The Rails crew has a chubby for Prototype.

Because the creator of Prototype works at 37 Signals.

Maybe and maybe not. Prototype has some features built-in that jQuery implements as plugins. Personally I prefer jQuery + plugins.

jQuery is 15k when zipped. The minified version before gzip is closer to 55 k.

Prototype, when zipped, is 22 k -- just checked on a server I'm running.

They're closer than you think :)

*edit - that's for version 1.51... 1.6 when minified and gzipped by web server is 23 kb. Not a huge difference, but you get the point.

"... WysiHat is around 1000 lines while TinyMCE is around 11000 (yikes) ..."

As @JoshPeek noted in the comments given the LOC is 1K making it easier to create a JQuery port.

Like: http://projects.bundleweb.com.ar/jWYSIWYG/ ?

Also, a WYM editor based on jQuery: http://www.wymeditor.org/

I remember reading about the troubles the 37signals guys were having with supporting textile in their products from this year-old thread: http://forum.37signals.com/highrise/forums/9/topics/802.

At the time I wondered if they might be considering developing a wysiwyg editor that integrated with their products better than what is out there.

I found the thread this summer while I burnt a fair amount of time looking at various lightweight markup languages and all the wysiwyg editors. I eventually just decided to put it to one side for now and maybe just code a few simple formatting helpers myself. I am very interested in seeing where this goes!

Isn't about time the damn web browsers give us a native rich edit control already, the way Tim Bernes-Lee first imagined the web content editing would be like? Then can we have a file upload control that can be styled and select multiple files?

> Isn't about time the damn web browsers give us a native rich edit control already,

Modern WYSIWYG editors use an IFRAME with the property designMode="On". The problem that the actual editor solves is manipulating that. So browsers do have native rich edit already, it just needs to be summoned.

> Then can we have a file upload control that can be styled and select multiple files?

Agreed. Trying to create a usable file uploading interface is annoying, but there are some hacks to add Drag and Drop support and things. (Safari [Mac] supports D&D, not sure though about other platforms/browsers.)

Nice. Appears to support utf-8 Unicode so I can write and edit in Runic ~ http://www.flickr.com/photos/bootload/2962721348/

The thing that caught my attention the most about this wasn't the size of the code or whatever, but the fact that they want to make it highly customizable. It's a pain.

I'm sure there's a good example of TinyMCE finely-customized to fit an interface beautifuly and I'm sure someone here will produce said example, but most of the places where I see a WYSIWYG editor, it looks kind of out of place, this is very important to some designers (I think)

Editor IDEa: disguise emacs as a WYSIWYG editor/game; once the user has entered a discrete amount of characters the editor will take away some WYSIWYG key-stroke function while substituting it for an emacs key-stroke.

Will this editor prevent I-maintain-my-own-cms users from entering text into their own websites? I hope it does.

Why the insistence on a WYSIWYG editor? The best method of producing documents that I have ever used is LaTeX and it has no decent WYSIWYG interface (LyX does not provide the full power of TeX).

Because their goal wasn't to lay out professional documents in a text area.

I don't think this particular editor, or any other WYSIWYG editors I'm aware of, are really targeted at the use case you're referring to.

Most of us deploying WYSIWYG editors are doing so in applications designed for non-technical users, where text markup is required but no technical knowledge on the users' part can be assumed.

From TFA:

Up until this point we’ve been using either plain text, manual HTML, or Textile formatting. Depending on who you are it’s either fine or annoying.

Regardless of how awesome LaTeX may be, a tiny fraction of people even know what it is. You shouldn't have to learn LaTeX to use 37signal's products...

And the most efficient way (so far) to interact with a computer is using a keyboard and yet most people seem to prefer the ease of use of the mouse.

Reply on news.ycombinator.com