2007-02-05

Xinha Open Source Online HTML Editor

I've searched for a good quality HTML editor that I can incorporate in my projects. I want something that is open source, being actively developed and easy for users to understand and use. The control that I found is called Xinha (pronounced similarly to Xena, the Warrior Princess). This control offers a handsome appearance controlled by CSS with an easy to understand and use interface. It overlays an HTML TEXTAREA form field. You can configure it to allow your users the editing features needed for a particular situation. For example, you can decide whether or not to let the user change fonts in the text being edited. Some Xinha features include:
  • Excellent configuration options
  • Plug-ins for additional features
  • Good interface design
  • Good API
Xinha Plugins include:
  • Spell checker
  • Context menu
  • Fullscreen toggling
  • CSS style integration in edited text.
  • Superclean HTML cleaning function
  • Table operations
  • Character map
  • List formatting
The download for Xinha includes demo HTML code. Documentation is currently scant, but hacking the demo code quickly leads to an understanding of how to incorporate and configure the control. The Xinha site includes a pretty fair Newbie Guide.

Reading from and Writing to the Xinha editor with Javascript

Some programming information is difficult to find. I had to do some digging in forums to discover how to read and write to the editor with Javascript. I suspect that a lot of other people have the same problem. In the following code,
  • txtDocument is the TEXTAREA.
  • The second line reads from the editor to my string variable sVariable1
  • The third line writes string variable sVariable2 to the editor.
var editor = xinha_editors.txtDocument; sVariable1= editor.outwardHtml(editor.getHTML()); editor.setHTML(sVariable2); I hope this bit of code will save others a bit of trouble looking for it.