October 24, 2014
Hot Topics:
RSS RSS feed Download our iPhone app

Enhancing Web Forms with Rich Text Editors

  • March 19, 2007
  • By Vlad Kofman
  • Send Email »
  • More Articles »

Xinha Editor

Among the three RTEs that you can install, Xinha is the most stable and feature rich. Everything in Xinha is customizable. It comes with a spell-check interface, a powerful plug-in interface, customizable CSS based "skins," and even a context menu. It supports all the major browsers, and is available as Open Source. There is also a version of this RTE for the popular blogging package WordPress. The plug-in mechanism allows it to be extended even further.

Xinha is released under the original htmlarea license, a BSD-style license. This means you can freely use it and any code contributions are welcome. Xinha is used on many sites, such as WorldClient email software, DealOgre.com, and others.

Here is the screenshot of Xinha with most of its options turned on.



Click here for a larger image.



To install Xinha, extract the downloaded source someplace in the web server directory structure. Create a config file—for example, my-config.js—to contain your settings. If you want to customize the appearance of the RTE, also place it in the Xinha folder. Include the initialization code and attach the editor to existing <textarea>.

The default plug-ins are:

  • 'CharacterMap'
  • 'ContextMenu'
  • 'ListType'
  • 'SpellChecker'
  • 'Stylist'
  • 'SuperClean'
  • 'TableOperations'

Adding Xinha to the form is very straightforward. Here is the initialization logic for the form:

<script type="text/javascript">
        _editor_url  = "js/ext/xinha/"
// (preferably absolute) URL (including trailing slash) where Xinha
// is installed
        _editor_lang = "en";    // And the language we need to use
                                // in the editor.
</script>
<script type="text/javascript"
        src="js/ext/xinha/htmlarea.js"></script>
<script type="text/javascript"
        src="js/ext/xinha/my-config.js"></script>

Here is the example code text area

<textarea id="vlad"
          name="vlad"
          rows="10"
          cols="50"
          style="width: 80%"></textarea>

Please make sure that the textarea has an id and a name that match.

In the config file (my-config.js), point to the text area(s).

xinha_init = xinha_init ? xinha_init : function()
{
   xinha_editors = xinha_editors ? xinha_editors :  [ 'vlad'  ];
   ... And start the RTE ...
   Xinha.startEditors(xinha_editors);
}
Xinha._addEvent(window,'load', xinha_init);

If you want to change look-and-feel, you can specify one of the pre-packaged CSS skins or create your own.

HTMLArea.loadStyle("/js/ext/xinha/skins/blue-look/skin.css");

For more customization options and how to configure plug-in please see the Xinha Developers guide.

If you are looking for a free, customizable, and stable RTE, give Xinha a close look. The documentation is well written, and there is an active user forum where developers can submit questions. The plug-in mechanism is very powerful and makes this RTE a very strong contender in the web RTE area.

Conclusion

In this article I have looked at different Rich Text Editors implemented in JavaScript and DHTML. I have examined which editors are used on the major web sites, and have covered how to implement the RTE in your own web-based project. The diversity of the implementations, and the fact that each major site has its own version, clearly indicates that competition is high in the already fragmented area of the web Rich Text Editors. It will be interesting to see if one editor will emerge as de facto RTE or some sort of a common code base will be implemented in the future. For now, web users just have to get accustomed to different look-and-feel of the Rich Text Editors online.

References

About the Author

Vlad Kofman works on enterprise-scale projects for the major Wall Street firms. He has also worked on defense contracts for the U.S. government. His main interests are object-oriented programming methodologies, UI, and design patterns.





Page 3 of 3



Comment and Contribute

 


(Maximum characters: 1200). You have characters left.

 

 


Sitemap | Contact Us

Rocket Fuel