Monday, November 7th, 2005>p>Paul Sowden and David Schontzler of the Dojo Toolkit have created a killer rich text WYSIWYG editor component that works cross browser (even Safari).
You will see that they didn’t whip together something on the quick, and spent time thinking about how to do WYSIWTG right.
Rich text (WYSIWYG) editing on the web is a difficult problem. Browser-based rich text editors to date have failed to meet users stability expectations or in other ways subtly break the seamlessness of the editing experience.
JotSpot has been a key sponsor of Dojo and as the first Wiki to provide usable WYSIWYG, Jot’s WYSIWYG editor is a critical part of the Wiki experience. While WYSIWYG is a clear advantage, it can be quickly undermined if niggling interaction problems or crashes make users distrustful or hesitant. Trust is earned slowly, but can be destroyed in the blink of an eye.
Testing showed almost every in-browser editor breaks user expectations or makes
editing unstable. Of course it’s not intentional. WYSIWYG on the web is a
hard problem, and providing features cross-browser is a difficult feat. We’ve
all struggled against unhelpful APIs, lousy documentation, and a never-ending
maze of bugs and feature requests. Amidst the frustration it’s easy to forget
that while it is possible to add a feature, endangering a solid experience is
never worth it. What use is an editor if “undo” doesn’t work? Do the semantics
of an editor’s output matter if it crashes?
A new editor that adhered to strict user-experience and reliability principles
was needed. The results are the Dojo Rich Text, Toolbar, and Editor controls.
JotSpot has generously made this work Open Source Software under the same
liberal license as Dojo.
Core Principles of the editor
- Do not break undo (Ctrl-Z works when possible)
- Provide WYSIWYG, not source editing
- Data Loss Is Unacceptable
Using the editor
The use of the editor follows the attribute markup philosphy.
To get the editor in your page, use the magic dojo class:
and then script src the dojo library of course.
There are also many more advanced features explained in the article including:
There is also a demo of the editor widget for you to play with.