Friday, 17 December 2010

Whizzywig 2011

I am working on new version of Whizzywig for (early) 2011. It will certainly be re-engineered but will probably not preserve all the interfaces of the current Whizzywig version(61). It will
  • use current techniques, best practice and technology
  • be smaller ,lighter
  • minimize the differences in output from different browsers
  • simplify the toolbar whilst at the same time adding more features
  • provide a simple means of extending to add your own controls, or even replace the entire toolbar with your own
The current version will remain available for those of you who have it nailed in to websites and applications.
Here's what I'm planning:
Note: the above buttons don't do anything! They just illustrate what the new toolbar may look like!
  1. Whizzywig will have it's own namespace. It won't have global variables that may clash with other javascript that may co-exist on the same page.
    That in turn means that if you have customised your Whizzywig and used the existing global variables (e.g. sels, cssFile) then you'll have change your code to use the new version.
  2. The editor will be a contenteditable div, not an iframe. The contenteditable attribute has been in Internet Explorer since Adam was a boy and is in the W3C HTML 5 spec. It is deployed in all modern Class A browsers but won't work in older versions like Firefox 2.
    Using contenteditable has 2 major advantages: it allows the code to be simpler and means that the editor will inherit all the CSS styles of the surrounding page. It will be much more likely that What You See IS What You Get. In most cases, you won't need the cssFile setting any more.
  3. The editor will have a very small and lightweight core: aiming for about half the size of the current Whizzywig version.  It won't rely on any other files, not even an image sprite for the toolbar. This will make it very fast and simple to deploy.
  4. The font controls won't be on the toolbar by default: in the most common use case of creating HTML fragments to embed in a website, the output will conform to the websites styles as per the CSS rules. Font controls (Font size, Font family, color)  will be available as an extension.
  5. There will be new controls to format Paragraphs (replacing the current [Choose style] pulldown) and Characters. The Character pulldown will introduce big, small, subscript, superscript, underline and remove format.
  6. There will be a new default control to embed HTML or text. This means you can add that YouTube video or widget code without having to resort to Source code view. You can take the Source button off the toolbar for most implementations which will be a lot safer. If you paste in text from Word, it will strip the HTML formatting but preserve the paragraphs. If you paste in a chunk of plain text, it will add paragraph tags appropriately.
  7. There will be context sensitive buttons for Left [⇐] and Right[⇒].
    - If you select an image and click [⇒] it will float the image to the right of the text.
    - If you are in a list or blockquote it will indent the current item.
    - If you are in a text block it will align it to the right.
  8. It will provide more control over the output, making it possible to exclude tags, or write your own output generator (e.g. for BBcode or Textile). The default output will be efficient, valid xhtml. "Efficient" means no nested span tags to provide multiple formatting like color, font and italic.
  9. Extensions will be available for Font selection, Color selection, Tables, Special Characters.
  10. The editor will keep the textarea in sync after each change - no need to call syncTextarea.
  11. Independently there will be a new File/Image Manager, with upload.
Help me by commenting below, or by clicking