Wiki source code of WYSIWYG Interface

Last modified by Vincent Massol on 2024/02/26 17:54

Show last authors
1 {{toc start="2"/}}
2
3 {{velocity filter="none"}}
4 {{html clean="false" wiki="true"}}
5 <p/>
6 #macro(img $src)
7 {{html clean="false" wiki="true"}}
8 <img style='border: 1px solid #000;' src='$doc.getAttachmentURL("${src}")' ></img><br/>
9
10 {{/html}}#end
11 <p/>
12 #macro(zimg $src)
13 {{html clean="false" wiki="true"}}
14 <img style='border: 1px solid #000;' src='$doc.getAttachmentURL("WYSIWYG.zip")/${src}' ></img><br/>
15
16 {{/html}}#end
17 <p/>
18 #macro(mockup $name)
19 {{html clean="false" wiki="true"}}
20 <img src="http:~//incubator.myxwiki.org/xwiki/bin/download/Mockups/NewWysiwygMockups/${name}.png" style="border:solid 1px black;" />
21
22 {{/html}}#end
23
24 = New Wysiwyg Editor Graphical User Interface Proposal =
25
26 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 :
27
28 * 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
29 ** Speed : how long it takes for an user to perform an action (from basic to complex ones)
30 ** 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
31 * Flexibility : XWiki is an extensible platform, therefore the editor look & feel needs to make sure that we can add new components easily when needed
32 ** Add new menu options when new features are created (say, new macros)
33 ** Allow for minimal customization of the menus as required for specific projects (say, a "my favorite buttons" toolbar)
34 ** Offers a light mode that includes needed features while in form textarea edition (comments, description fields, basically any textarea field in the wiki)
35 * 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.
36 <p/>
37 **[[Appendix - Additional Considerations>>Design.NewWysiwygEditorInterfaceAppendix]]**
38
39 == Generic considerations ==
40
41 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 :
42
43 * Bold / Italics / Underlined / Striked
44 * Titles
45 * Indent
46 * Bulleted / Numbered Lists
47 * Wiki & Web links
48 * Image insertion
49 * Attachment upload
50 * Add more here...
51
52 === Features Mindmap ===
53
54 #img("WYSIWYGv-1.1.png")
55 <p/>
56 {{info}}Below is the presentation of the selected editor. [[You can check the leftovers here.>>Design.OtherWYSIWYGInterfaceProposals]]{{/info}}
57
58 === Additional features ideas ===
59
60 * Real-time edition
61 * Find & Replace
62 * Annotations
63 * Autosave (background saving)
64
65 == Final Design ==
66
67 === Toolbars ===
68
69 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).
70 <p/>
71 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.
72 <p/>
73 #img("WysiwygLayout.png")
74
75 * Hovering on a menu item such as "Link" highlights the item in bold characters
76 * Clicking once on a menu item such as "Link" opens the drop-down box
77 * Clicking on a drop-down menu triggers the corresponding dialog box
78 * Hovering on a menu item such as "Bold" highlights the item with a transparent dark background with a border
79
80 === Features User Interfaces ===
81
82 ==== Link ====
83
84 ===== Wiki page =====
85
86 #mockup("LinkDialogsInternal")
87
88 ===== Web page =====
89
90 #mockup("LinkDialogsExternal")
91
92 ===== Email =====
93
94 #mockup("LinkDialogsEmail")
95
96 ==== Image ====
97
98 ===== From the wiki =====
99
100 #mockup("ImageDialogsInternal")
101
102 ===== From the web =====
103
104 #mockup("ImageDialogsExternal")
105
106 ==== Table ====
107
108 #mockup("TableDialog")
109
110 ==== Macros ====
111
112 #mockup("MacroDialogs")
113
114 ==== Import ====
115
116 ===== Importing a file =====
117
118 #zimg("WYSIWYG.023.png")
119
120 * Do we need to somehow mark the imported content ?
121
122 ==== Special characters ====
123
124 #zimg("WYSIWYG.017.png")
125
126 === Full Screen ===
127
128 * While in full-screen mode, clicking on "Save & Continue" or "Preview" should send the user back to full-screen edition
129
130 ==== Blank page - Black Skin ====
131
132 #zimg("WYSIWYG.024.png")
133
134 ==== Page with contents - Green Skin ====
135
136 #zimg("WYSIWYG.025.png")
137
138 ==== Page with contents - Black Skin ====
139
140 #zimg("WYSIWYG.026.png")
141
142 ==== Macro settings edition through a tray - Black Skin ====
143
144 #zimg("WYSIWYG.027.png")
145
146 ==== Link creation through a dialog box - Green Skin ====
147
148 #zimg("WYSIWYG.028.png")
149
150 ==== Link creation through a dialog box - Black Skin ====
151
152 #zimg("WYSIWYG.029.png")
153
154 * When a dialog box is active, the "Save" and "Cancel" links should not be available
155
156 ==== Wiki Editor - Green Skin ====
157
158 #zimg("WYSIWYG.030.png")
159
160 {{/html}}
161 {{/velocity}}

Get Connected