A new Whizzywig

There is an entirely new version of Whizzywig this year - watch this site for the announcement of its new name. It is completely re-engineered but does not preserve all the interfaces of the latest Whizzywig version(63). It

  • uses current techniques, best practice and technology
  • is smaller, lighter
  • minimizes the differences in output from different browsers
  • simplifies the toolbar whilst at the same time adding more features
  • provides a simple means of extending to add your own controls, or even replace the entire toolbar with your own

The old version will remain available for those of you who have it nailed in to websites and applications.

It looks like this:

Note:  you can try a more extensive demo with mutiple edit areas and customisations.

  • The new editor has its own namespace. It does not use global variables that may clash with other libraries or 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.
  • The editor is 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.
  • Advanced users can still style the editor using classes: edit areas have a class of "wz_rte", toolbars have a class of "wz_formatbar".
  • The editor has a very small and lightweight core: aiming for about 20k, or less than10k with gzip.  It doesn't rely on any other files - no external CSS  or  images . This makes it very fast and simple to deploy.
  • Font controls do not appear on the default toolbar: 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.
  • There are new dropdown menus to format Blocks (replacing the current [Choose style] pulldown)
  • and Text. The Text dropdown will introduce subscript, superscript, underline and remove format.
  • These dropdowns are  WYSIWYG: they use the page styles to format the menu. Try the ones above.
  • This helps preserve an uncluttered interface - there are only 9 controls on the default toolbar (some well known editors have 60-80 by default!) - much simpler for your users to get to grips with.
  • There is 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.
  • There are 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
    • There is a  =  button that will reset alignment back to normal
  • There is a button to add a simple table and context sensitive buttons appear to add or remove columns when inside a table. Following user feedback, this has been simplified from earlier versions and behaves more consistently across browsers.
  • The edit area resizes to include its text - try adding lines to the example above - until it fills the window,when it will start scrolling to keep its toolbar in view.
  • The editor can be made to fill the entire browser window by double clicking on the toolbar.
  • The new editor is much better at behaving consistently across browsers. For example pressing Enter will always start a new paragraph and text will alway be inside containing paragraphs or blocks. What You See Is What You Mean. 
  • Output from the editor will not only be valid but won't be littered with unwanted spans, classes or invented attributes.
  • The editor will always keep the textarea in sync after each change - no need to call syncTextarea.

The above items are complete as at November 2011 and this version is available here: whizzywig2011.js.

More information on the How to page.

The following items are planned for 2012.

  1. More control over the output, making it possible to exclude tags, or write your own output generator (e.g. for BBcode, Markdown or Textile).
  2. Extensions will be available for Font selection, Color selection, Special Characters.
  3. Independently there will be a new File/Image Manager, with upload.
  4. Paid licensing and support for those that need it.

Help me by testing, commenting below, or by clicking