Enhancing Web Forms with Rich Text Editors
Cross-Browser Rich Text Editor by Kevin Roth
So far, I have described custom RTEs on popular sites, but if you want to install one in your own project, you do not have to write it from scratch. One of the popular RTEs has been around since 2003* and was written by Kevin Roth. It is licensed under Creative Commons License, which means you can freely use it on your site, but there is also an option to buy the "uncompressed" source from the author. This RTE supports all major browsers and, if it is loaded on an unsupported version, it will just show a text area. The amount of supported formatting and editing commands varies per browser, but is very impressive for one man's work. Please see the references section for a link to the feature matrix.
* In 2003, this RTE won a Planet Source Code superior coding contest.
Click here for a larger image.
To initialize the RTE, call an API function:
//Usage: initRTE(imagesPath, includesPath, cssFile) initRTE("images/", "", "");
Inside the form, exactly in the spot where rich text editor is to appear, add something like this:
myRTE is the name of the editor, and it should be unique on the form. The next parameter is pre-populated text (with HTML markup), which is useful if there was a problem and the form needs to be re-displayed back to the user. The other parameters are self explanatory.
The install of this RTE is straightforward; under the hood, it includes a lot of features. If you are looking for a quick way to add an RTE to your form, you may want to consider this implementation.
The DOJO Editor (and Editor2)
Here is Dojo's RTE (limited):
After you install Dojo, to use the Dojo's RTE it needs to be loaded. For example:
The editor is highly configurable, and has a lot or features; however, be prepared to look through a lot of badly placed documentation. It also seems that most of the documentation is pointing to the version 1 of the editor, which has been upgraded to version 2 somewhere between Dojo 0.4.1 and 0.4.3.
To insert the Dojo RTE, a custom type can be added to the <textarea>, among other ways. For example:
<textarea dojoType="Editor" items="bold;italic;underline;strikethrough;|;createLink;"> </textarea>
For more information on this RTE, please see the reference guide by Paul Sowden and David Schontzler.
Page 2 of 3