Monday, November 7th, 2005

Dojo Rich WYSIWYG Editor

Category: Component, Dojo, Toolkit

<>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.

Introduction

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:

<div class=”dojo-Editor”>
some content
</div>

and then script src the dojo library of course.

There are also many more advanced features explained in the article including:

Demo

There is also a demo of the editor widget for you to play with.

dojo-rich-editor

Related Content:

Posted by Dion Almaer at 3:21 pm
10 Comments

+++--
3.5 rating from 25 votes

10 Comments »

Comments feed

The image function leaves alot to be desired. Just how are users to get images up to their servers in order to use them with this??

Comment by Jakman — November 7, 2005

Jakman,

At the moment, Dojo is focused more on client-side work than on what happens when you reach the server. That said, we’d love to get some server-side collaboration for this and other pieces of Dojo.

Comment by David Schontzler — November 7, 2005

interesting, although i would suspect that wysiwyg editing is better handled at a standards-based markup implementation handled natively by the browser than through js, by this i mean the text equivalent of a canvas widget.

and also note that these days lots of text editing is within non-trivial cases such as long documents, code files etc. in these cases i am much more likely to employ emacs or another platform designed specifically to deal with text. on the web i am happy dealing with the same-ol same-ol text form.

Comment by grumpY — November 7, 2005

grumpY,

The web may not be perfect for all text editing needs. However, there are a lot of use cases where we can make life easy for users than a simple textarea :)

I have seen a couple of awesome CMS systems that use WYSIWYG that make updating your web pages trivial for non-technical users.

Dion

Comment by Dion Almaer — November 7, 2005

Yes exactly. Getting non-engineers to contribute anything to our internal wiki system has been like pulling teeth and resulted in little or no contributions from anyone in the company other than engineers.

Now, if we could find a wiki that gave us all the things tech people want, combined with usable wysiwyg for the lazy we’d be in heaven ;) (of course I am referring to jot.com )

Comment by Jesse Kuhnert — November 7, 2005

When I saw “cross browser (even Safari)” I thought “cool, some nice web app that will work with Opera”…

Well no actually, it does not work :o(

(Opera 8.5 & 9 Preview 1).

Comment by guillaume — November 8, 2005

tinymce is better.

Comment by moe — November 10, 2005

guillaume,

The RichText class does indeed work on Opera 9tp1, and we’re in the process of updating the toolbar to support it. Should be another day or two at worst.

Regards

Comment by Alex Russell — November 11, 2005

This looks wery good. Even in Safari. But, the image and link stuff does not seem to work in safari at this point. Has this been broken or is it not supposed to work?

Comment by Jacob — January 23, 2006

How can i save the result of the editting as well as the text format ? dojo.io.bind() can do all this ??

Comment by yucc — May 5, 2006

Leave a comment

You must be logged in to post a comment.