Wednesday, 4 January 2012

Whizzywing has landed

Whizzywing is a new WYSIWYG editor, descended from Whizzywig but written anew in the age of HTML5. It has rethought the interface, putting the most common formatting in two dropdowns so that almost every format change can be done with a single click. It is very small - just 7k gzipped - but you can activate it without installing a single thing on your server as the code can be served from Just add
<script src=""></script>
in the head section of your HTML and any element with a class="WYSIWYG" will be turned into a rich text editor. It's not limited to textareas. It's rich in features, too: correct me if I'm wrong but no other editor this small provides table editing. That's if there is another editor this small. With just 9 items on the toolbar you can do most of the formatting that you could do with CKEditor or TinyMCE but using a fraction of the bandwidth and without the installation headaches. It is easy to pick up and is more than powerful enough to use in a CMS.

Look carefully and you will see that network traffic is minimised by using no images on the toolbar - those little icons are all drawn using standard entities and CSS. It's faster even than using an image sprite. But everything is tailorable, so if you want to design your own icons, or use a a fancy set from elsewhere, you can add your own. Simple changes like excluding unwanted items from the toolbar can be done without using any javascript at all.

There has been a lot work under the bonnet to keep the generated HTML sane, no matter what browser you are using. There won't be a load of browser specific classes or deprecated font tags. Hit enter after a paragraph or a heading and you will get another paragraph - not a div, or orphaned text separated off with extra break tags. That means there won't be problems if you come back and edit the same text in a different browser.

The code is licenced under MIT and LGPL. You can download it, or create your own fork, at github. Try it at Whizzywing.

No comments:

Post a Comment