• Xinha Improvements

last modified July 25, 2008 by ejucovy


[I've used [trim]...[/trim] to indicate sentences that I think could be combined for more powerful writing.]

Examples from other tools:

WYSIWYG Examples


Xinha Details

Old News:

Set of ideas started last year


Xinha Round 1

Trac Ticket on Tools that were chosen

Evaluation of WYSIWYG Editors - blog post

Xinha is a compelling Open Source WYSIWYG editor component. It is one of the most powerful as its configuration and extensibility make it easy to customize. Its liberal licence makes it an ideal candidate for integration into any kind of project.(Xinha-Trac) [Small note: when writing on the web, it's my personal style preference try to embed ALL links in the text of the sentence.  Otherwise they're just wasted words that water down your writing.]

[Bigger note: what is the purpose of this as an introductory paragraph?  What are you trying to tell your audience here?]

[trim]OpenPlans committed to using Xinha for its wiki, blogs and possibly comments early in 2007. Ian Bicking blogged about his findings and the advantages it had over the Plone equivalent of Kupu.[/trim] It’s been integral to our work ever since and, well, we love it. [trim]After a year of intense use, we’ve garnered extensive user feedback. This shapes a lot of suggestions on improvements we would like to contribute to the community.[/trim] Design and functionality changes would really help push Xinha over the edge into becoming the greatest open source WISYWIG editor out there. This wiki houses some of the reasons why and how we would like to see development in the tool.

Desktop vs. Web Editing

Desktop word processors moved from being light weight text editing tools to user interface(UI) driven applications. Applications like Microsoft Word were some of the first to give a considerable amount of importance to WYSIWYG. They stressed on simplification of functions to a click of a button! Users were now used to fine formatting their documents without really having to worry about the code used to carry this function.

As the web becomes more and more the platform for writing and collaborating, we see the beginnings of rich text editing being implemented. Starting with email clients and followed by blogging software, collaborative wiki platforms and ocassionally commenting and mapping tools, there is an expectation for toolbars that allows for basic formatting.

Google has started a suite of tools parallel to Microsoft for their online documentation products that is a robust WYSIWYG editor these are not available for integration with other online editing tools.

The space for open source, web-based editing is broad and we should be in a place to provide users with intuitive and elegant tools that do the job!

[I like the way you've set this off now!  I wish you could set it off even more with, say, a background color and a smaller right margin, but unfortunately the OpenPlans wiki doesn't give you that degree of control.  How would you feel about moving the pages of this "wiki presentatio" you're writing about Xinha to somewhere else, like Google Pages for example?]

Defining the User for WYSIWYG Tools

There are three types of users who employ online editing tools.

  1. Writers who are comfortable writing directly online a la bloggers and commenters. They are comfortable using text editors, but may not be able to fine tune using the HTML editor.
  2. Power users who edit often and are comfortable with keyboard shortcuts. These users work with editors that easily allow them to toggle between tools like Bold and Underline.
  3. Users who would like to control the look of a page to a finer degree using HTML. They use tools like color, tables, insertion of links and images on a regular basis as it plays a key role in information presentation.
So embarking on the challenge of creating a comprehensive WYSIWYG editor I have collected a set of examples that have cropped up on the internet over the last year in the WYSIWYG Examples page. [How does this sentence relate to your list of "user types"?  You need to make that connection more explicit.]


  1. Make Xinha the most sought after open source WYSIWYG Editor out there!
  2. Providing an INTUITIVE tool set to the users who would find editing a seamless process.
  3. Customizing the tool set so they provide maximum advantage to the community that is targeted. (math, music, writing, design etc.)

Examples from other tools:

WYSIWYG Examples

What we are currently working with:

What is current default set on Xinha-Nightly Demo. Some of the trouble here is area lies in the fact that there are
just too many tools. By keeping the default set concise the user is presented with less of an overwhelming and
more cohesive experience.


List of tools from left to right:

  1. Maximize
  2. Pre-formats
  3. Font
  4. Size
  5. Bold
  6. Italic
  7. Underline
  8. Strike through
  9. Font Color
  10. Fill Color
  11. Current Style
  12. Subscrpit
  13. Superscript
  14. Left Align
  15. Center Align
  16. Right Align
  17. Justified
  18. Numbered List
  19. Bulleted List
  20. Indent out
  21. Indent in
  22. Horizontal Rule
  23. Link
  24. Image
  25. Table
  26. Undo last Action
  27. Redo last action
  28. Select all
  29. Print
  30. Clear MS Office Tags
  31. Clear Font specifications
  32. Remove formatting
  33. Toggle Borders
  34. Split Block
  35. Direction Left to right
  36. Direction Right to Left
  37. Toggle HTML view
  38. Help using the editor
  39. About this Editor

The Entire XINHA set

When all the plugins are turned on this is what you see in Xinha-nightly. This is not accounting for some of the plugins that gave errors on load.


List of tools from left to right:

  1. Page Cleaner
  2. Layout
  3. Language
  4. Emoticos
  5. Page Break
  6. Insert scroling marquee
  7. Save
  8. Maximize/Minimize Editor
  9. HTML Tidy
  10. Document Properties
  11. Syntax
  12. Info
  13. CSS
  14. Find and Replace
  15. Pre-formats
  16. Font
  17. Size
  18. Bold
  19. Italics
  20. Underline
  21. Strike through
  22. Text color
  23. Fill color
  24. Super Script
  25. Sub Script
  26. Insert Keyword
  27. Drop down label
  28. Left Align
  29. Center
  30. Right Align
  31. Justify
  32. Numbered List
  33. Decimal Numbers
  34. Bullet list
  35. Left indent
  36. Right indent
  37. Formula Editor
  38. Horizontal Rule
  39. Set page background image
  40. Abbreviation
  41. Insert Special Character
  42. Insert web link
  43. Set web ID
  44. Insert Anchor
  45. Insert File link
  46. Insert Snippet
  47. Insert Image
  48. Insert Guido music notation
  49. Undo your last action
  50. Redo your last action
  51. Select All
  52. Print
  53. Clean up HTML
  54. Paste as Plain text
  55. Clear inline font specifications
  56. Remove formatting
  57. Filter
  58. Split block
  59. Direction Left to Right
  60. Direction Right to Left
  61. Toggle HTML Source
  62. Spell Check
  63. Smart replace
  64. Quick Tag editor
  65. Edit HTML for selected text
  66. Help using Editor
  67. About this Editor
  68. Definition list
  69. Definition term
  70. Definition description
  71. Insert Form
  72. Insert a text password or hidden field
  73. Insert a multiline text field
  74. Insert a select field
  75. Insert a check box
  76. Insert a radio button
  77. Insert a submit or ok button
  78. Form
  79. Text Area
  80. Selection Field
  81. Check box
  82. Radio button
  83. Text field
  84. Password field
  85. File field
  86. Button
  87. Submit Button
  88. Reset Button
  89. Image Button
  90. Hidden Field
  91. Label
  92. Field Set
  93. Insert Table
  94. Toggle Borders
  95. Table Properties
  96. Row Properties
  97. Insert Row Before
  98. Insert Row After
  99. Delete Row
  100. Split Row
  101. Insert Col Before
  102. Insert Col After
  103. Delete Col
  104. Split Col

Clearly this is an overwhelming experience! Where does one start? The need to simplify and customize are apparent here. There are ways to simplify without really loosing functionality. Here are some attempts to do so:

xinha details


[This isn't a great way to convey the overwhelming experience!  Make the audience FEEL it, don't just TELL them about it.  Seriously, I'd recommend presenting this whole thing in a more visual way where you can really take advantage of the format to convey just how scary it really is.  The goal is to call the reader's attention to what's really going on in his head when he SEES xinha.  Maybe think about jumbling the words together in a five-column layout .. or putting them in a "legend" on the screenshot itself, complete with (overwhelming, impossible to digest) color keys for each, or (cluttering, difficult to trace) red arrows linking the explanatory text to each button.]