Description

New Wysiwyg Editor Graphical User Interface Proposal

While building the new version of the WYSIWYG Editor, we need to decide which kind of interface we want to use. In order to do so, here is a list of criteria that we need to take into account :

• Ease of use : the new layout of the editor needs to be easy to use for newcomes and people lowly familiar with the concept of a wiki
  • Speed : how long it takes for an user to perform an action (from basic to complex ones)
  • Feeling of control : whether or not the user feels like he is in control of his environment and the software-model matches the user-model of how a rich text editor should behave
• Flexibility : XWiki is an extensible platform, therefore the editor look & feel needs to make sure that we can add new components easily when needed
  • Add new menu options when new features are created (say, new macros)
  • Allow for minimal customization of the menus as required for specific projects (say, a "my favorite buttons" toolbar)
  • Offers a light mode that includes needed features while in form textarea edition (comments, description fields, basically any textarea field in the wiki)
• Development Issues : we need to take into account the fact that we are or are not able to reuse existing components for the editor. That is, building a completely new user interface will imply a longer development time and higher maintenance costs in the long run.
  Appendix - Additional Considerations

Generic considerations

The WYSIWYG editor is going the primary interaction interface for most contributors to the wiki, specifically new ones and people least familiar with the software. Therefore, it needs to provide the basic features people will want to use upfront and use gradual display techniques for advanced features. Here is a tentative list of the features that most users will use on a daily basis :

• Bold / Italics / Underlined / Striked
• Titles
• Indent
• Bulleted / Numbered Lists
• Wiki & Web links
• Image insertion
• Attachment upload
• Add more here...

Features Mindmap

Below is the presentation of the selected editor. You can check the leftovers here.

Additional features ideas

• Real-time edition
• Find & Replace
• Annotations
• Autosave (background saving)

Final Design

Toolbars

2 models of toolbars will be available : one for classic textareas (wiki pages, blog articles, generally speaking all large textareas) and one for smaller textareas (comments, short descriptions).

The usual toolbar mixes drop-down menus that trigger modal dialog boxes (for links, images, files, tables and macros insertion & import) and action buttons (for actions on the text). The 2 remaining buttons at the top right are the switch to wiki edition mode and the switch to full-screen mode.

• Hovering on a menu item such as "Link" highlights the item in bold characters
• Clicking once on a menu item such as "Link" opens the drop-down box
• Clicking on a drop-down menu triggers the corresponding dialog box
• Hovering on a menu item such as "Bold" highlights the item with a transparent dark background with a border

Features User Interfaces

Link

Wiki page

Web page

Email

Image

From the wiki

From the web

Table

Macros

Import

Importing a file

• Do we need to somehow mark the imported content ?

Special characters

Full Screen

• While in full-screen mode, clicking on "Save & Continue" or "Preview" should send the user back to full-screen edition

Blank page - Black Skin

Page with contents - Green Skin

Page with contents - Black Skin

Macro settings edition through a tray - Black Skin

Link creation through a dialog box - Green Skin

Link creation through a dialog box - Black Skin

• When a dialog box is active, the "Save" and "Cancel" links should not be available

Wiki Editor - Green Skin