Wiki source code of User Guide

Last modified by Ecaterina Moraru (Valica) on 2017/09/07 17:08

Hide last authors
Ecaterina Moraru (Valica) 90.1 1 (% class="floatinginfobox box" %)
Sorin Burjan 14.2 2 (((
Guillaume Lerouge 7.2 3 **Contents**
4
Marius Dumitru Florea 89.1 5 {{toc depth="3" start="2"/}}
Guillaume Lerouge 7.1 6 )))
Marius Dumitru Florea 1.1 7
Marius Dumitru Florea 89.1 8 {{warning}}
9 The GWT WYSIWYG editor is no longer available starting with XWiki 9.7. It has been replaced by [[CKEditor>>extensions:Extension.CKEditor Integration.WebHome]].
10 {{/warning}}
11
Vincent Massol 28.1 12 Welcome to the WYSIWYG editor user guide. This page will help you discover all the features from XWiki's GWT rich text editor.
Guillaume Lerouge 7.2 13
Vincent Massol 28.1 14 Here's how the editor looks like at a glance:
15
16 {{image reference="wysiwygeditor.png"/}}
17
Vincent Massol 9.4 18 {{info}}
Marius Dumitru Florea 91.1 19 This page describes all the features supported by the WYSIWYG editor. Not all of them are enabled in the default XWiki Enterprise distribution. See the [[configuration page>>Extension.GWT WYSIWYG Editor.Configuration.WebHome]] if you want to enable or disable any of the features presented here.
Vincent Massol 9.4 20 {{/info}}
Marius Dumitru Florea 8.1 21
Vincent Massol 9.4 22 == Pre-requisites ==
Marius Dumitru Florea 8.1 23
Vincent Massol 26.1 24 * Browser support: Check the [[Release Notes>>xwiki:ReleaseNotes.WebHome]] for the version you're installing to see what Browsers are supported for it. You can also check our [[general Browser support strategy>>dev:Community.BrowserSupportStrategy]].
Vincent Massol 9.4 25
Marius Dumitru Florea 1.1 26 == Quick Reference ==
27
28 {{toc scope="local" start="3"/}}
29
30 === Toolbar ===
31
Sorin Burjan 14.2 32 [[image:toolbar.png||style="border: 1px solid black;"]]
33
Marius Dumitru Florea 91.1 34 Not all the buttons appear in the default instalation. See the [[configuration page>>Extension.GWT WYSIWYG Editor.Configuration.WebHome]] if you want to enable or disable any of the features presented here.
Sorin Burjan 14.2 35
Marius Dumitru Florea 1.1 36 |=Toolbar Item|=Function
Sorin Burjan 12.1 37 |[[image:bold.gif]][[image:italic.gif]][[image:underline.gif]][[image:strikethrough.gif]][[image:tt.gif]]|Applies **bold**, //italic//, __underline__, --strikethrough-- or ##teletype## formatting to the selected text. See [[Text Styles>>#HTextStyles]].
Marius Dumitru Florea 1.1 38 |[[image:subscript.gif]][[image:superscript.gif]]|Subscript (x,,2,,) or superscript (x^^2^^) the selected text. See [[Subscript and Superscript>>#HSubscriptandSuperscript]].
39 |[[image:justifyleft.gif]][[image:justifycenter.gif]][[image:justifyright.gif]][[image:justifyfull.gif]]|Sets the text alignment: left, centered, right or justified. See [[Text Alignment>>#HTextAlignment]].
40 |[[image:ul.gif]][[image:ol.gif]]|Creates bulleted or numbered lists. See [[Creating Lists>>#HCreatingLists]].
41 |[[image:indent.gif]][[image:outdent.gif]]|Increases or decreases the indentation of a list item. See [[Creating Lists>>#HCreatingLists]].
42 |[[image:undo.gif]][[image:redo.gif]]|Undo or redo the most recent action taken. See [[Undo and Redo>>#HUndoandRedo]].
Marius Dumitru Florea 10.1 43 |[[image:format.png]]|Formats the text as heading (level 1 to 6). See [[Headings>>#HHeadings]].
44 |[[image:fontname.png]]|Changes the font used by the selected text. See [[Fonts>>#HFonts]].
45 |[[image:fontsize.png]]|Changes the font size used by the selected text. See [[Text Size>>#HTextSize]].
Marius Dumitru Florea 1.1 46 |[[image:forecolor.gif]][[image:backcolor.gif]]|Changes the text color or the background color of the selected text. See [[Colors>>#HColors]].
Marius Dumitru Florea 10.1 47 |[[image:hr.gif]]|Inserts a horizontal rule.
48 |[[image:removeformat.gif]]|Removes the formatting from the selected text. See [[Remove Formatting>>#HRemoveFormatting]].
49 |[[image:charmap.gif]]|Inserts symbols or special characters (accented characters, trademark, currency symbol etc.). See [[Inserting Symbols>>#HInsertingSymbols]].
Marius Dumitru Florea 1.1 50
51 === Menus ===
52
Sorin Burjan 15.2 53 [[image:menu.png||style="border: 1px solid black;"]]
Marius Dumitru Florea 1.1 54
55 ==== Link ====
56
57 Insert link menu is active when the caret or selection is outside of a link.
58
Sorin Burjan 15.3 59 |(% rowspan="4" %)[[image:linkinsertmenu.png||style="border: 1px solid black;"]]|1. The user can link to one of the exiting wiki pages or to a new wiki page.
Marius Dumitru Florea 1.1 60 |2. The user can link to one of the existing attachments or upload a new attachment to the edited page.
61 |3. The user can link to any web page by pasting its address.
62 |4. The user can link to an email address.
63
64 Edit link menu is active when the caret or selection is inside a link.
65
Sorin Burjan 15.3 66 |(% rowspan="2" %)[[image:linkeditmenu.png||style="border: 1px solid black;"]]|1. The user can edit an existing link (i.e. change its target). A specific dialog is opened depending on the link type.
Marius Dumitru Florea 1.1 67 |2. The user can remove an existing link.
68
69 See also [[Creating and Editing Links>>#HCreatingandEditingLinks]] for a detailed description of how links can be created and edited.
70
71 ==== Image ====
72
73 Insert image menu is active when there's no image selected.
74
Sorin Burjan 17.4 75 |(% rowspan="2" %)[[image:imageinsertmenu.png||style="border: 1px solid black;"]]|1. The user can insert one of the attached images or upload a new image.
Manuel Smeria 79.1 76 |2. The user can insert an image by typing or pasting its address.
Marius Dumitru Florea 1.1 77
78 Edit image menu is active when there's an image selected.
Manuel Smeria 79.1 79
Sorin Burjan 15.3 80 |(% rowspan="2" %)[[image:imageeditmenu.png||style="border: 1px solid black;"]]|1. The user can edit the selected image (i.e. change its source, width, height etc.).
Marius Dumitru Florea 1.1 81 |2. The user can remove the selected image.
82
83 See also [[Inserting and Editing Images>>#HInsertingandEditingImages]] for a detailed description of how images can be inserted and edited.
84
85 ==== Table ====
86
87 Insert table menu is active when the caret is not inside a table cell.
88
Sorin Burjan 15.3 89 |[[image:tableinsertmenu.png||style="border: 1px solid black;"]]|1. The user can insert a table by specifying the number of rows and columns.
Marius Dumitru Florea 1.1 90
91 Edit table menu is active when the caret is inside a table cell.
92
Sorin Burjan 15.3 93 |(% rowspan="7" %)[[image:tableeditmenu.png||style="border: 1px solid black;"]]|1. The user can insert an empty column before the column in which the caret or selection is.
Marius Dumitru Florea 1.1 94 |2. The user can insert an empty column after the column in which the caret or selection is.
95 |3. The user can delete the column in which the caret or selection is.
96 |4. The user can insert an empty row before the row in which the caret or selection is.
97 |5. The user can insert an empty row after the row in which the caret or selection is.
98 |6. The user can delete the row in which the caret or selection is.
99 |7. The user can delete the table in which the caret or selection is.
100
101 See also [[Creating and Editing Tables>>#HCreatingandEditingTables]] for a detailed description of how tables can be created and edited.
102
103 ==== Macro ====
104
105 Insert macro menu is active when there's no macro selected.
106
Sorin Burjan 15.3 107 |(% rowspan="4" %)[[image:macroinsertmenu.png||style="border: 1px solid black;"]]|1. The user can insert a predefined macro.
Manuel Smeria 79.1 108 |2. The user can force a refresh of all the macros' output. This is useful when macro output depends on the page content like in the case of the "Table of Contents" macro.
Marius Dumitru Florea 1.1 109 |3. The user can collapse all the macros in the edited page.
110 |4. The user can expand all the macros in the edited page.
111
112 Edit macro menu is active when there's a macro selected.
113
Sorin Burjan 15.3 114 |(% rowspan="3" %)[[image:macroeditmenu.png||style="border: 1px solid black;"]]|1. The user can change the parameters or the content of the selected macro.
Marius Dumitru Florea 1.1 115 |2. The user can collapse the selected macro.
116 |3. The user can expand the selected macro.
117
118 See also [[Inserting and Editing Macros>>#HInsertingandEditingMacros]] for a detailed description of how macros can be inserted and edited.
119
Manuel Smeria 79.1 120 ==== Import ====
121
Sorin Burjan 16.2 122 Import office files.
Manuel Smeria 79.1 123
Sorin Burjan 16.2 124 |(% rowspan="3" %)[[image:ImportOfficeDocument.png||style="border: 1px solid black;"]]|1. The user can import an entire Microsoft Office Word document.
Manuel Smeria 79.1 125 |2. The user can copy and paste content from an office document in the clipboard.
Sorin Burjan 16.2 126 See [[Importing Office Content>>#HImportingOfficeContent]].
Sorin Burjan 15.2 127
Marius Dumitru Florea 1.1 128 === Tabs ===
Manuel Smeria 79.1 129
Sorin Burjan 16.3 130 [[image:tabs.png||style="border: 1px solid black;"]]
Marius Dumitru Florea 1.1 131
132 The user can view or edit the document source code by clicking on the Source tab (for advanced users). **The source code is not necessarily HTML**. It depends on the editor configuration. Usually the source code is in wiki syntax but the editor supports any syntax that can be converted to and from HTML.
133
134 == Keyboard Shortcuts ==
135
136 Some of the editing features have keyboard shortcuts, improving the editing speed. Below you will find an alphabetical list with all of the keyboard shortcuts:
137
Marius Dumitru Florea 88.1 138 {{include reference=".Keyboard Shortcuts"/}}
Marius Dumitru Florea 1.1 139
140 See also [[Writing>>#HWriting]] to find out how standard keys like Enter, Backspace, Delete or Tab behave.
141
142 == Interface ==
143
144 === Editing Area ===
145
Sorin Burjan 17.1 146 [[image:rta.png||style="border: 1px solid black;"]]
Manuel Smeria 83.2 147 The editing area is the place where you will type in your text and format your document. It is a rich text area because you can see, while editing, how the text will look like after it is saved. Before you start typing make sure the editing area is focused. One way to focus the text area is to click on it. This should make the blinking insertion caret appear. You can control the caret using the arrow keys.
Marius Dumitru Florea 1.1 148
Manuel Smeria 83.2 149 Besides typing, the editing area allows you to select a piece of text. This is useful when you want to format your text. If your content becomes larger than the available space in the editing area the scrollbars, vertical or horizontal, will appear. The scrollbars allow you to go up and down, as well as left and right through your text.
150
151 Whenever you paste some content into the rich text area of the WYSIWYG Editor that content is (by default) automatically cleaned before being inserted into the rest of the content.
152
153 You can disable the automatic cleaning from the "WYSIWYG Editor" administration section if you wish:
154
155 [[image:WYSIWYGEditor-AdminSection-cleanPasteAutomatically.png||style="border: 1px solid black;"]]
156
Marius Dumitru Florea 1.1 157 === Toolbar ===
158
Sorin Burjan 17.1 159 [[image:toolbar.png||style="border: 1px solid black;"]]
Marius Dumitru Florea 1.1 160 The toolbar is the place where you can find most of the editor features. It is placed right on top of the editing area. Each feature can be activated through a widget like a button or a list box. Features can be grouped and groups of features are separated from one another using a small vertical bar. The toolbar gets updated whenever you take an action on the editing area (like typing a character or clicking). As a consequence, some features could be disabled depending on where you place the insertion caret inside the rich text area.
161
Sorin Burjan 17.1 162 [[image:toolbarstate.png||style="border: 1px solid black;"]]
Marius Dumitru Florea 1.1 163
164 A toolbar button can be in one of the four states depicted in the previous image. From left to right we have: not clicked, hovering, clicked and disabled. When a button is in the not clicked state it means the associated feature hasn't been activated on the current context. By current context we mean the place where the insertion caret or the selected text is inside the editing area. When you place the mouse pointer over a toolbar button the later enters the hovering state. In this state you can see a tooltip explaining what the associated feature does. If a toolbar button is in the clicked state then it means the associated features has been activated on the current context. By clicking the button again you can usually toggle off the effect of the feature (remove the bold style, remove the right alignment etc,). A toolbar button is disabled when you are not allowed to activate its feature in the current context.
165
166 Toolbar list boxes are also updated when you take an action on the editing area. The proper value is selected depending on the current context. If no value is selected then it means that none of the list box options match the value of the associated feature for the current context (i.e. none of the predefined fonts match the font of the current text selection; the text around the insertion caret has a non standard text size).
167
168 === Menus ===
169
Sorin Burjan 17.1 170 [[image:menu.png||style="border: 1px solid black;"]]
Marius Dumitru Florea 1.1 171 The menu bar is the place where you can find the advanced editing features. It is placed right on top of the toolbar. By clicking on a top menu item you can see what entries it has. Most of the top menu items have two sets of sub entries: insert/creation related and edit related. For instance, there is an insert link menu and an edit link menu. When you place the caret inside a link the edit link menu is activated. When you move the caret outside the link the insert link menu becomes active.
172
Sorin Burjan 17.1 173 [[image:macroinsertmenu.png||style="border: 1px solid black;"]]
Marius Dumitru Florea 1.1 174 Some of the menu items have an icon to help us easily recognize them. When a menu item is disabled it means its feature cannot be activated on the current context (the currently selected text or the text around the insertion caret).
175
176 === Tabs ===
177
Sorin Burjan 16.3 178 [[image:tabs.png||style="border: 1px solid black;"]]
Marius Dumitru Florea 1.1 179 The editor provides tabs to switch to source editing for advanced users. This tabs are situated right on top of the menu bar if the editor was configured to display them.
180
Xavier Richard 81.1 181 === Full screen mode ===
182
183 [[image:FullScreenMode.png]]
184
185 The editor provides a full screen mode to increase the size of the Editing Area. The above green arrows icon is located at the top right corner of the editor. To restore default screen size: simply click again on similar green arrows icon also located at the top right corner when in full screen mode.
186
187
Marius Dumitru Florea 1.1 188 === Dialogs ===
189
190 Some of the editing features require additional information from the user. This information is taken using dialogs. Most of the dialogs are modal: the user can't edit while the dialog is opened. The editing is prevented using a glass panel so that the user can still see the text from the editing area while the dialog is opened. If the dialog covers a fragment of text the user wants to see then he can move the dialog by dragging it over the screen. In order to speed up the dragging and to allow the user to see as much as possible from the editing area, only the title bar is visible when the dialog is dragged.
191
Sorin Burjan 17.1 192 [[image:symbolpickerdragging.png||style="border: 1px solid black;"]]
Marius Dumitru Florea 1.1 193 Simple dialogs have a title bar and a body. The title bar has an icon on the left side followed by the dialog title. At the right end of the title bar there is the close button which acts like a cancel button.
194
Sorin Burjan 17.1 195 [[image:colorpicker.png||style="border: 1px solid black;"]]
Marius Dumitru Florea 1.1 196 The color picker is a special dialog that allows us to change the color of the selected text. Unlike the other dialogs, it auto hides when you click on the editing area. The current color is displayed using a bigger square, as it is depicted in the previous image (see the red square). See [[Colors>>#HColors]].
197
Sorin Burjan 17.1 198 [[image:symbolpicker.png||style="border: 1px solid black;"]]
Marius Dumitru Florea 1.1 199 The symbol picker is a special dialog that allows us to insert a special symbol (such as accented characters, trademark, currency symbol etc.) in place of the current text selection or at the caret position. Just click on the desired symbol to insert it. See [[Inserting Symbols>>#HInsertingSymbols]].
200
Sorin Burjan 17.1 201 [[image:link2wikistep2.png||style="border: 1px solid black;"]]
Manuel Smeria 79.1 202 Complex dialogs are used in wizards. Their body is made of three parts: the header, the content and the footer. The header usually contains the title of the wizard step. The content of the dialog includes the input controls used to collect data from the user. The footer usually contains the next/previous buttons and the button for canceling the wizard or finishing it at the current step.
Marius Dumitru Florea 1.1 203
204 == Standard Features ==
205
206 {{toc scope="local" start="3"/}}
207
208 === Writing ===
209
210 The **Enter** key (also known as the **Return** key) produces a different effect depending on the context where it is pressed:
211
212 * creates a new list item if the caret is inside a non empty list item
213 * transforms an empty list item into plain text
214 * inserts a line break if the caret is inside a table cell
215 * inserts an empty line before the current heading or paragraph if the caret is at the beginning of a heading or paragraph
216 * creates a new paragraph if the caret is inside a paragraph or a heading
217
218 You can use **Shift+Enter** to force a line break in a context where the Enter key would produce a different effect. For instance you can press Shift+Enter inside a list item to generate a line break instead of creating a new list item. Advanced users can also use the Ctrl and Meta modifiers when the caret is inside nested block-level containers (i.e. paragraph inside list item inside table cell) to force the Enter key to be handled by the nearest block-level container. For instance, if the caret is inside a level one heading ("Title 1" formatting) which is inside a list item then:
219
220 * pressing Enter will create a new list item
221 * pressing Shift+Enter will create a line break in the heading
222 * pressing **Ctrl+Enter** or **Meta+Enter** will create a new paragraph after the heading, inside the list item
223
224 The **Backspace** and **Delete** keys can be used for deleting characters, whole words or the selected text. If you press **Ctrl+Backspace** or **Ctrl+Delete** you erase the whole word that is before or after, respectively, the insertion caret. The Backspace key ca also be used to remove the empty lines before a paragraph or heading if it is pressed at the beginning of a paragraph or heading.
225
226 The **Tab** key behaves also differently depending on the context where it is pressed:
227
228 * indents a list item if the caret is at the beginning of that list item
229 * moves the caret to the next table cell, creating a new table row if the caret is inside the last table cell
230 * inserts 4 spaces if none of the previous cases apply
231
232 **Shift+Tab** has the opposite effect of the Tab key:
233
234 * outdents a list item if the caret is a the beginning of that list item
235 * moves the caret to the previous table cell
236
237 See [[Keyboard Shortcuts>>#HKeyboardShortcuts]] for a list of key combinations supported by the editor.
238
239 === Text Formatting ===
240
241 Text formatting determines how your text will look in your document.
242
243 ==== Text Styles ====
244
Guillaume Lerouge 6.1 245 You can change the way your text looks like by choosing whether the font should be bold ([[image:bold.gif||style="vertical-align: middle;"]]), italic ([[image:italic.gif||style="vertical-align: middle;"]]), underlined ([[image:underline.gif||style="vertical-align: middle;"]]), stroked through ([[image:strikethrough.gif||style="vertical-align: middle;"]]) or teletype ([[image:tt.gif||style="vertical-align: middle;"]]). To apply any of this styles you just have to click the associated toolbar button. The chosen style affects either the selected text or, if there is just the insertion caret, the next characters you'll be writing.
Marius Dumitru Florea 1.1 246
Guillaume Lerouge 6.1 247 (% style="border: 1px solid rgb(221, 221, 221); width: 500px;" %)
Sorin Burjan 14.2 248 (((
249 **This is a text with bold style**
Marius Dumitru Florea 1.1 250
251 //This is a text with italic style//
252
253 __This is a text with underline style__
254
255 --This is a text with strike through style--
256
Sorin Burjan 14.2 257 ##This is a text with teletype style##
258 )))
Marius Dumitru Florea 1.1 259
260 You can mix any of these styles. To toggle off a text style click again the associated toolbar button. If you want to remove all the styles at once see [[Remove Formatting>>#HRemoveFormatting]].
261
Guillaume Lerouge 6.1 262 (% style="border: 1px solid rgb(221, 221, 221); width: 500px;" %)
Sorin Burjan 14.2 263 (((
264 You can mix **bold** and //italic// styles: **//Hello user!//**
Marius Dumitru Florea 1.1 265
266 You can mix //italic// and __underline__ styles: //__Hello user!__//
267
Sorin Burjan 14.2 268 You can mix **bold**, ##teletype## and --strike through-- styles: **##--Hello user!--##**
269 )))
Marius Dumitru Florea 1.1 270
271 See [[Keyboard Shortcuts>>#HKeyboardShortcuts]] to find out how you can change the text style using only the keyboard.
272
273 ==== Subscript and Superscript ====
274
Guillaume Lerouge 6.1 275 Subscript and superscript are usually used for writing simple mathematical formulas. Subscript is a way to put an index to a character. The subscript has a smaller font size than the normal text. To activate subscript you must click the [[image:subscript.gif||style="vertical-align: middle;"]] button from the toolbar. The superscript works in the same way as the subscript, the only difference being that the index is placed at the top. You can use the [[image:superscript.gif||style="vertical-align: middle;"]] button from the toolbar to write simple mathematical expressions like the "x to the power 2".
Marius Dumitru Florea 1.1 276
Guillaume Lerouge 6.1 277 (% style="border: 1px solid rgb(221, 221, 221); width: 500px;" %)
Sorin Burjan 14.2 278 (((
279 ##P,,ABC,, = L,,AB,, + L,,BC,, + L,,CA,,##
Marius Dumitru Florea 1.1 280
281 ##E = mc^^2^^##
282
Sorin Burjan 14.2 283 ##P(x) = x,,1,,^^a^^ + x,,2,,^^b^^##
284 )))
Marius Dumitru Florea 1.1 285
286 You can mix subscript with superscript, though the result doesn't very nice. You can also apply [[Text Styles>>#HTextStyles]] to subscript and superscript text.
287
288 ==== Text Alignment ====
289
290 A paragraph of text or a heading can have its lines aligned to either of the sides of the page, as well as centering on it. You may also force the lines to take the entire space available in the document (like aligning to both sides at the same time).
291
Guillaume Lerouge 6.1 292 To align your text at the **left** side of the editing area, press the [[image:justifyleft.gif||style="vertical-align: middle;"]] button on the toolbar.
Marius Dumitru Florea 1.1 293
Guillaume Lerouge 6.1 294 (% style="border-style: solid; border-color: rgb(221, 221, 221) rgb(221, 221, 221) rgb(221, 221, 221) DarkRed; border-width: 1px 1px 1px 2px; width: 500px;" %)
Sorin Burjan 14.2 295 (((
296 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer venenatis egestas dignissim. Duis arcu libero, dictum at consectetur sed, varius non leo. Curabitur vitae condimentum dui. Curabitur quis tincidunt velit.
297 )))
Marius Dumitru Florea 1.1 298
Guillaume Lerouge 6.1 299 If you want instead to have the text aligned in the **center** of the page, just press the [[image:justifycenter.gif||style="vertical-align: middle;"]] button on the toolbar.
Marius Dumitru Florea 1.1 300
Guillaume Lerouge 6.1 301 (% style="border: 1px solid rgb(221, 221, 221); width: 500px; text-align: center;" %)
Sorin Burjan 14.2 302 (((
303 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer venenatis egestas dignissim. Duis arcu libero, dictum at consectetur sed, varius non leo. Curabitur vitae condimentum dui. Curabitur quis tincidunt velit.
304 )))
Marius Dumitru Florea 1.1 305
Guillaume Lerouge 6.1 306 In order to align your text to the **right** side of the editing area, click the [[image:justifyright.gif||style="vertical-align: middle;"]] button from your toolbar.
Marius Dumitru Florea 1.1 307
Guillaume Lerouge 6.1 308 (% style="border-style: solid; border-color: rgb(221, 221, 221) DarkRed rgb(221, 221, 221) rgb(221, 221, 221); border-width: 1px 2px 1px 1px; width: 500px; text-align: right;" %)
Sorin Burjan 14.2 309 (((
310 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer venenatis egestas dignissim. Duis arcu libero, dictum at consectetur sed, varius non leo. Curabitur vitae condimentum dui. Curabitur quis tincidunt velit.
311 )))
Marius Dumitru Florea 1.1 312
Guillaume Lerouge 6.1 313 If you want all lines to have the same line width then click the [[image:justifyfull||style="vertical-align: middle;"]] toolbar button.
Marius Dumitru Florea 1.1 314
Guillaume Lerouge 6.1 315 (% style="border-style: solid; border-color: rgb(221, 221, 221) DarkRed; border-width: 1px 2px; width: 500px; text-align: justify;" %)
Sorin Burjan 14.2 316 (((
317 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer venenatis egestas dignissim. Duis arcu libero, dictum at consectetur sed, varius non leo. Curabitur vitae condimentum dui. Curabitur quis tincidunt velit.
318 )))
Marius Dumitru Florea 1.1 319
320 ==== Headings ====
321
322 Headings can be used to organize your text. You can split the content in **sections** and **subsections** and then specify a title for each of them. You can choose the heading level to apply from the format list box which is found on the toolbar. If you want to remove the heading style just choose "Plain text" from the format list box.
323
Sorin Burjan 17.1 324 [[image:formatexample.png||style="border: 1px solid black;"]]
Manuel Smeria 79.1 325
Marius Dumitru Florea 1.1 326 ==== Fonts ====
327
Sorin Burjan 17.1 328 [[image:fontname.png||style="border: 1px solid black;"]]
Marius Dumitru Florea 1.1 329 Fonts determine how the letters of your text look like. "Times New Roman" and "Arial" are among the most used fonts. To use a different font you have to select one from the font list box found on the toolbar.
330
Guillaume Lerouge 6.1 331 (% style="border: 1px solid rgb(221, 221, 221); width: 500px;" %)
Sorin Burjan 14.2 332 (((
333 (% style="font-family: comic sans ms;" %)This is a Comic Sans MS font.
Marius Dumitru Florea 1.1 334
335 (% style="font-family: courier new;" %)This is a Courier New font.
336
Sorin Burjan 14.2 337 (% style="font-family: times new roman;" %)This is a Times New Roman font.
338 )))
Marius Dumitru Florea 1.1 339
340 The editor detects the font used around the insertion caret or by the selected text and updates the font list box accordingly.
341
342 ==== Text Size ====
343
Sorin Burjan 17.1 344 [[image:fontsize.png||style="border: 1px solid black;"]]
Marius Dumitru Florea 1.1 345 To change your font size pick one from the font size list box found on the toolbar.
346
Guillaume Lerouge 6.1 347 (% style="border: 1px solid rgb(221, 221, 221); width: 500px;" %)
Sorin Burjan 14.2 348 (((
349 (% style="font-size: 8pt;" %)This text's size is 8pt.
Marius Dumitru Florea 1.1 350
351 (% style="font-size: 18pt;" %)This text's size is 18pt.
352
Sorin Burjan 14.2 353 (% style="font-size: 24pt;" %)This text's size is 24pt.
354 )))
Marius Dumitru Florea 1.1 355
356 The editor detects the font size and updates the toolbar list box accordingly.
357
358 ==== Colors ====
359
Guillaume Lerouge 6.1 360 The other option to make your text look different is changing the text color or its background color. If you want to change your **text color** press the [[image:forecolor.gif||style="vertical-align: middle;"]] toolbar button and pick a color from the palette by clicking on it.
Marius Dumitru Florea 1.1 361
Sorin Burjan 17.1 362 [[image:colorpicker.png||style="border: 1px solid black;"]]
Marius Dumitru Florea 1.1 363 The current color is displayed using a //bigger// square, as you can see in the previous image.
364
Guillaume Lerouge 6.1 365 (% style="border: 1px solid rgb(221, 221, 221); width: 500px;" %)
Sorin Burjan 14.2 366 (((
367 (% style="color: red;" %)
Marius Dumitru Florea 1.1 368 This text is written in red.
369
Guillaume Lerouge 6.1 370 (% style="color: green;" %)
Marius Dumitru Florea 1.1 371 This text is written in green.
372
Sorin Burjan 14.2 373 (% style="color: blue;" %)This text is written in blue.
374 )))
Marius Dumitru Florea 1.1 375
Guillaume Lerouge 6.1 376 You may also change the **text background color** using the [[image:backcolor.gif||style="vertical-align: middle;"]] button. As with other text styles, you can mix text color with background color.
Marius Dumitru Florea 1.1 377
Guillaume Lerouge 6.1 378 (% style="border: 1px solid rgb(221, 221, 221); width: 500px;" %)
Sorin Burjan 14.2 379 (((
380 (% style="background-color: yellow;" %)This text has yellow background.
Marius Dumitru Florea 1.1 381
Sorin Burjan 14.2 382 (% style="color: red; background-color: lightGray;" %)This text is written in red and has a light gray background.
383 )))
Marius Dumitru Florea 1.1 384
385 ==== Remove Formatting ====
386
Guillaume Lerouge 6.1 387 If you wish to remove all the styles applied to a piece of text (i.e. font, color, bold, italic, etc.), select it and press the [[image:removeformat.gif||style="vertical-align: middle;"]] button.
Marius Dumitru Florea 1.1 388
389 === Creating Lists ===
390
Guillaume Lerouge 6.1 391 You can create two kinds of lists: **numbered** (also called **ordered** because the order of the list items is important) and **bulleted** (also called **unordered** because the order of the list items is not important). The only difference between these two types of lists is the symbol (a number or a bullet) preceding the list items; they behave the same. To start a list you have to place the caret on the line that you would like to become the first list item in your new list and click the toolbar button for the type of list you wish to create: [[image:ul.gif||style="vertical-align: middle;"]] for a bulleted list or [[image:ol.gif||style="vertical-align: middle;"]] for a numbered list.
Marius Dumitru Florea 1.1 392
Sorin Burjan 17.1 393 [[image:listcreatestep1.png||style="border: 1px solid black;"]]
Marius Dumitru Florea 1.1 394
Sorin Burjan 17.1 395 [[image:listcreatestep2.png||style="border: 1px solid black;"]]
396
Marius Dumitru Florea 1.1 397 You can also quickly create a list from a couple of lines by selecting those lines and pressing the toolbar button for the type of list you wish to create.
398
Sorin Burjan 17.1 399 [[image:listcreatestep3.png||style="border: 1px solid black;"]]
Marius Dumitru Florea 1.1 400
Sorin Burjan 17.1 401 [[image:listcreatestep4.png||style="border: 1px solid black;"]]
Marius Dumitru Florea 1.1 402 Once you have a list you can add more list items by using the **Enter** key. Pressing Enter in the middle of a list item splits that list item in two. Pressing Enter at the end of a list item creates a new empty list item.
403
Sorin Burjan 17.1 404 [[image:listcreatestep5.png||style="border: 1px solid black;"]]
Marius Dumitru Florea 1.1 405
Sorin Burjan 17.1 406 [[image:listcreatestep6.png||style="border: 1px solid black;"]]
Guillaume Lerouge 6.1 407 You can create **sublists** by **indenting** list items. To do this click the [[image:indent.gif||style="vertical-align: middle;"]] button from the toolbar. Note that you can indent just one level because a sublist must always have a parent list. You can indent multiple list items at once though, by selecting them first. The **outdent** feature, [[image:outdent.gif||style="vertical-align: middle;"]], is the opposite of indent. Unlike indent, you can outdent a list item multiple levels. Outdenting a top level list item transforms it in plain text.
Marius Dumitru Florea 1.1 408
Manuel Smeria 79.1 409 [[image:listcreatestep7.png||width="478" height="89" style="border: 1px solid black;"]]
Marius Dumitru Florea 1.1 410
Manuel Smeria 79.1 411 [[image:listcreatestep8.png||width="478" height="89" style="border: 1px solid black;"]]
Marius Dumitru Florea 1.1 412 You can **mix** bulleted lists with numbered lists.
413
Sorin Burjan 17.1 414 [[image:listcreatestep9.png||style="border: 1px solid black;"]]
Marius Dumitru Florea 1.1 415
Manuel Smeria 79.1 416 [[image:listcreatestep10.png||width="478" height="89" style="border: 1px solid black;"]]
Marius Dumitru Florea 1.1 417 After you created the list, press the toolbar button for the associated list type to go back to plain text.
418
419 === Creating and Editing Links ===
420
421 In order to **create** a link you usually select the text that you would like to become the label of the link and then choose the right option from the "Link" menu based on the type of link you wish to create. You can change the label of the link later: in the link creation process, by editing the link after it was created or directly in the editing area. Be careful though that when you change the label in the link creation process or by editing the link the label looses its formatting (see [[Text Formatting>>#HTextFormatting]]). If you don't want to loose the formatting then edit the link label directly inside the editing area. Selecting the label before choosing a type of link from the "Link" menu is not required: you'll be asked to provide a label during the link creation process and this label will be inserted at the caret position. Moreover, you can select an image as the link label.
422
423 To **edit** the link properties (not just the label) you have to use the "Edit link" menu which is active only when a link is selected. To select a link you can either place the caret inside the link label or select a piece of the link label. If the link label is an image then you have to select that image.
424
425 To **remove** a link (unlink) you have to select the link and choose "Remove link" from the "Link" menu. Note that the link label (text or image) is not deleted from the document. In case the caret is at the beginning or at the end of the link label, but inside of it (i.e. typing changes the link label), the "Remove link" menu places the caret before or after the link, respectively (i.e. typing adds characters before or after the link respectively).
426
427 **Note**: You cannot create links inside links and you cannot create a link if the selected label spans through multiple blocks of text (paragraphs, headings, lists etc.). This last constraint is due to the fact that a link has to be in-line.
428
429 ==== Link to wiki page ====
430
431 To create a link to a wiki page choose "Wiki page" from the "Link" menu.
432
Sorin Burjan 17.1 433 [[image:link2wikistep1.png||style="border: 1px solid black;"]]
Marius Dumitru Florea 85.2 434 First you have to select the wiki page you wish to link to. You can use the tree to browse the exiting wiki pages. If you want to link to a page that doesn't exist yet then select "New page..." from the tree. This doesn't create a new page but just a link to a missing wiki page that can be created later.
Marius Dumitru Florea 1.1 435
Marius Dumitru Florea 85.2 436 The text box above the tree can be used to quickly search for wiki pages. It will offer you suggestions based on the wiki pages that match your input. Advanced users can type directly the reference of the target wiki page, e.g. **document:xwiki:Sandbox.WebHome**.
Marius Dumitru Florea 1.1 437
438 After you select the target wiki page (either by using the tree or the text box) click the "Select" button to proceed to the next step.
439
Sorin Burjan 17.1 440 [[image:link2wikistep2.png||style="border: 1px solid black;"]]
Marius Dumitru Florea 1.1 441 Now you can edit the link parameters:
442
443 * the link label
444 * the tool tip: the text to display when the mouse cursor hovers over the link
445 * if the link should be opened in a new window or not
446
447 Click "Create link" when you're done. You will comeback to this dialog when editing a link.
448
Sorin Burjan 17.1 449 [[image:link2wikistep3.png||style="border: 1px solid black;"]]
Manuel Smeria 79.1 450 Your link should be visible inside the editing area at this point. Hover the mouse cursor over the link to see the link label in place.
Marius Dumitru Florea 1.1 451
Sorin Burjan 17.1 452 [[image:link2wikistep4.png||style="border: 1px solid black;"]]
Manuel Smeria 79.1 453
Marius Dumitru Florea 1.1 454 ==== Link to attachment ====
455
456 To create a link to an attachment choose "Attached file" from the "Link" menu.
457
Sorin Burjan 17.1 458 [[image:link2attachmentstep1.png||style="border: 1px solid black;"]]
Marius Dumitru Florea 1.1 459 First you have to select the attachment you wish to link to. You can choose from the files attached to the edited page. In our example we have three images attached to the current page. If you want to attach a new file then select "Upload new file" and click "Select". In our example we wanted to create a link to an attachment from a different wiki page than the one edited. For this we clicked on the "All pages" tab. If your attachment is on the current page then just click "Select" and skip the next step.
460
Sorin Burjan 17.1 461 [[image:link2attachmentstep2.png||style="border: 1px solid black;"]]
Marius Dumitru Florea 1.1 462 Use the tree to browse the wiki pages in search for the right attachment to link to. As you can see, each page has an "Attachments" child node that holds the attached files. Notice the "Upload file..." entry which you can use to attach a new file to the corresponding page.
463
Marius Dumitru Florea 85.2 464 The text box above the tree can be used to quickly search for attached files. It will offer you suggestions based on the attachments that match your input. Advanced users can type directly the reference of the target attachment, e.g. **attachment:xwiki:[email protected]**.
Marius Dumitru Florea 1.1 465
466 After you select the attachment (either by using the tree or the text box) click the "Select" button to proceed to the next step.
467
Sorin Burjan 17.1 468 [[image:link2attachmentstep3.png||style="border: 1px solid black;"]]
Marius Dumitru Florea 1.1 469 Now you can edit the link parameters:
470
471 * the link label
472 * the tool tip: the text to display when the mouse cursor hovers over the link
473 * if the link should be opened in a new window or not
474
Manuel Smeria 79.1 475 These are the same parameters as for a link to a wiki page. Click "Create link" when you're done. You will come back to this dialog when editing a link.
Marius Dumitru Florea 1.1 476
Sorin Burjan 17.1 477 [[image:link2attachmentstep4.png||style="border: 1px solid black;"]]
Marius Dumitru Florea 1.1 478 Your link should be visible inside the editing area at this point. You can view or download the attachment by following this link in view mode.
479
Sorin Burjan 17.1 480 [[image:link2attachmentstep5.png||style="border: 1px solid black;"]]
Manuel Smeria 79.1 481
Marius Dumitru Florea 1.1 482 ==== Link to web page ====
483
484 To create a link to a web page is very easy. You have to choose "Web page" from the "Link" menu and then fill in the link parameters:
485
Guillaume Lerouge 6.1 486 * the address of the web page you wish to link to (you can paste here an address copied from the web browser's address bar). If you don't specify a protocol (like we did in out example) then the default HTTP protocol is considered. So you can simply type __www.xwiki.org__ and the final address will be __http:~/~/www.xwiki.org__. Of course you can use other protocols if you want to.
Marius Dumitru Florea 1.1 487 * the link label
Manuel Smeria 79.1 488 * the tooltip: the text to display when the mouse cursor hovers over the link
Marius Dumitru Florea 1.1 489 * if the link should be opened in a new window or not
490
491 Click "Create link" when you're done.
492
Sorin Burjan 17.1 493 [[image:link2webpage.png||style="border: 1px solid black;"]]
Manuel Smeria 79.1 494
Marius Dumitru Florea 1.1 495 ==== Link to email ====
496
Manuel Smeria 79.1 497 Creating a link to an email address is much like creating a link to a web page. The only difference is that you have to specify an email address instead of a web page address.
Marius Dumitru Florea 1.1 498
Sorin Burjan 17.1 499 [[image:link2email.png||style="border: 1px solid black;"]]
Manuel Smeria 79.1 500
Marius Dumitru Florea 1.1 501 ==== Image link ====
502
503 You can use an image as the label of a link. To do this you have to select the image and then follow the steps for the type of link you wish to create. Note that you won't be able to edit the link label during the link creation process. If you want to change the label of an image link after it was created then edit the image.
504
505 === Inserting Symbols ===
506
507 In order to insert symbols or special characters (accented characters, trademark, currency symbol etc.) you have to follow this steps:
508
509 1. place the caret where you would like the symbol to be inserted //or// select the text that you would like to be replaced by the inserted symbol
Guillaume Lerouge 6.1 510 1. press the [[image:charmap.gif||style="vertical-align: middle;"]] button on the toolbar
Marius Dumitru Florea 1.1 511 1. click on the symbol you wish to insert
512
Sorin Burjan 17.1 513 [[image:symbolpicker.png||style="border: 1px solid black;"]]
Marius Dumitru Florea 1.1 514 The symbol picker automatically closes after you choose a symbol. The caret is placed after the inserted symbol so you can open the symbol picker again if you wish to insert more symbols. Inserted symbols are like any other characters you type so you can use the Delete or Backspace keys to remove them and of course you can apply [[Text Formatting>>#HTextFormatting]].
515
Guillaume Lerouge 6.1 516 (% style="border: 1px solid rgb(221, 221, 221); width: 500px;" %)
Sorin Burjan 14.2 517 (((
518 **10£**
Marius Dumitru Florea 1.1 519
520 iTunes(% style="color: rgb(255, 153, 0);" %)®
521
Sorin Burjan 14.2 522 (% style="background-color: rgb(255, 255, 0);" %)? ? ?r²
523 )))
Marius Dumitru Florea 1.1 524
525 === Inserting and Editing Images ===
526
Manuel Smeria 79.1 527 To insert an image place the caret where you want the image to be inserted and choose "Attached Image" from the "Image" menu. Make sure you don't have an image selected before opening the "Image" menu because otherwise you'll see the edit image menu entries and no "Attached Image" entry.
Marius Dumitru Florea 1.1 528
Sorin Burjan 17.1 529 [[image:imagestep1.png||style="border: 1px solid black;"]]
Manuel Smeria 79.1 530 You have three ways of choosing which image to insert:
Marius Dumitru Florea 1.1 531
Manuel Smeria 79.1 532 * Upload a new image to the page.
533 * Choose from the images already attached to the edited page. In our example there are three images already attached to the page: the XWiki logo, the Ubuntu logo and the Firefox logo.
Marius Dumitru Florea 1.1 534 * Choose from the images attached to the other pages. For this you have to click on the "All pages" tab and specify the page where the image you want is attached.
535
536 Whatever option you choose you have to click on the "Select" button to move to the next step.
537
Sorin Burjan 17.1 538 [[image:imagestep2.png||style="border: 1px solid black;"]]
Manuel Smeria 79.1 539 In our example we choose to upload a new image. Browse through your local files and pick the image you want then click on the "Insert Image" button to attach the image to the edited page.
Marius Dumitru Florea 1.1 540
Sorin Burjan 17.1 541 [[image:imagestep3.png||style="border: 1px solid black;"]]
Marius Dumitru Florea 1.1 542 In the final step, before the image is inserted, you can edit the image properties. Here's what you can specify:
543
544 * the image **width** and **height** on the page (i.e. how much space does the image take on the page)
Manuel Smeria 79.1 545 * an **alternative text** that is printed instead of displaying the image when the image can't be displayed
Marius Dumitru Florea 1.1 546 * if the text should flow around the image (**horizontal alignment**) or not; if you want the image to be on the left and the text to flow on its right side then choose //Left//; if you want the image to be on the right and the text to flow on its left side then choose //Right//; if you want the image to be centered horizontally on the page then choose //Center// but note that in this case the text can't flow on the left nor on the right side of the image.
547 * how is the image aligned relative to the height of the line where it is inserted (**vertical alignment**); if you want the image to be aligned to the top of the line then choose //Top//; if you want the image to be centered vertically on the line where it is inserted then choose //Middle//; if you want the image to be aligned to the bottom of the line then choose //Bottom//.
548
549 **NOTE**: You can't set both the horizontal and the vertical alignment for an image. If you align an image horizontally then it's not part of a line anymore (i.e. multiple lines of text can flow on its left or right side) and thus setting the position of that image inside //a line// has no sense.
550
551 Click on the "Insert image" button when you're done. Note that you don't have to set all the image properties now: you can edit the image later.
552
Sorin Burjan 17.1 553 [[image:imagestep4.png||style="border: 1px solid black;"]]
Marius Dumitru Florea 1.1 554 You should see the image in the editing area. To select it simply click on it. Notice the resize handlers that appear around the image when it is selected. You can resize the image inside the editing area by dragging them. If you open the "Image" menu when an image is selected you can see the "Edit image" menu entry.
555
Sorin Burjan 17.1 556 [[image:imagestep5.png||style="border: 1px solid black;"]]
Marius Dumitru Florea 1.1 557
Sorin Burjan 17.1 558 [[image:imagestep6.png||style="border: 1px solid black;"]]
Marius Dumitru Florea 1.1 559 To delete an image you can select it and press the **Delete** key or choose "Remove image" from the "Image" menu.
560
Manuel Smeria 79.1 561 To insert an external image place the caret where you want the image to be inserted and choose "External Image" from the "Image" menu. Then type or paste the address of the image.
562 The image will be linked to the source you mention instead of being attached to your document.
Sorin Burjan 24.2 563
Sorin Burjan 23.2 564 [[image:InsertExternalImage.png||style="border: 1px solid black;"]]
565
Marius Dumitru Florea 1.1 566 === Creating and Editing Tables ===
567
568 To create an empty table place the caret where you would like the new table to be inserted and choose "Insert table" from the "Table" menu. Currently you cannot insert a table inside another table so, before opening the "Table" menu, make sure you don't have the caret inside a table cell.
569
Sorin Burjan 17.1 570 [[image:tablestep1.png||style="border: 1px solid black;"]]
Marius Dumitru Florea 1.1 571 In the opened dialog you can specify the number of rows and columns the new table should have and if you want a table header or not. You can leave the default number of rows and columns if you don't know how many you'll need because you can add rows and columns later. You can't add a table header later though so you must decide now if you need one or not. When you're done, click the "Insert" button.
572
Sorin Burjan 17.1 573 [[image:tablestep2.png||style="border: 1px solid black;"]]
Manuel Smeria 79.1 574 You should now see the table in your editing area. Fill in the table cells. You can navigate from cell to cell using the **arrow keys**. See [[Writing>>#HWriting]] to find out how you can use the **Tab** key to navigate through table cells. See also [[Keyboard Shortcuts>>#HKeyboardShortcuts]] if you can't move the caret before or after the table.
Marius Dumitru Florea 1.1 575
Sorin Burjan 17.1 576 [[image:tablestep3.png||style="border: 1px solid black;"]]
Marius Dumitru Florea 1.1 577 If you need a new column you can insert one before or after an existing column. Just place the caret in one of the cells from the reference column and choose the appropriate option from the "Table" menu. In our example we choose to insert a new column after the "Index" column (i.e. the "Index" column was the reference column in our case). You can also delete columns in the same manner: place the caret in one of the cells from the column to be deleted and choose "Delete column" from the "Table" menu.
578
579 Notice how in the previous image the "Insert row before" option is disabled. This happened because we placed the caret in the table header and table rows are not allowed before the table header.
580
Sorin Burjan 17.1 581 [[image:tablestep5.png||style="border: 1px solid black;"]]
Marius Dumitru Florea 1.1 582 Inserting a new row is much like inserting a new column. First you choose a reference row by placing the caret in one of its cells and then you choose the appropriate option from the "Table" menu. In our example we opted for inserting a new row before the the first one (i.e. the first row was the reference row in our case). For this we picked "Insert row before" from the "Table" menu. You can delete table rows in the same manner: place the caret in one of the cells from the row to be deleted and choose "Delete row" from the "Table" menu.
583
Sorin Burjan 17.1 584 [[image:tablestep6.png||style="border: 1px solid black;"]]
Marius Dumitru Florea 1.1 585 As you can see the new table row is empty and ready to be filled.
586
Sorin Burjan 17.1 587 [[image:tablestep7.png||style="border: 1px solid black;"]]
Marius Dumitru Florea 1.1 588 To delete a table place the caret in any of its cells and choose "Delete table" from the "Table" menu.
589
590 === Inserting and Editing Macros ===
591
592 A macro is a piece of code that you can reuse in your pages. Macros are written by developers to do common things like displaying an information box, a table of contents or the avatar for a specific user. You don't need programming skills to use macros. Let's follow the steps to insert a table of contents to see how easy it is to work with macros.
593
594 Start by writing a few sections in the editing area then create an empty line where you want the table of contents to be inserted. In our example, we pressed Enter after "Space" in order to create the empty line. You can insert the table of contents in other places if you want. Leave the caret on the empty line and choose "Insert Macro..." from the "Macro" menu.
595
Sorin Burjan 17.1 596 [[image:macroinsertstep1.png||style="border: 1px solid black;"]]
Manuel Smeria 79.1 597 You should see a dialog with all the available macros. Each macro has a short description that will give you a hint about what the macro does. Look for the "Table Of Contents" macro. You can browse the list of macros using the keyboard: Up/Down selects the previous/next item in the list, Home/End selects the first/last item in the list. Click "Select" once you have the "Table Of Contents" macro highlighted.
Marius Dumitru Florea 1.1 598
Sorin Burjan 17.1 599 [[image:macroinsertstep2.png||style="border: 1px solid black;"]]
Manuel Smeria 79.1 600 Parameters control the behavior and the output of a macro. Some parameters are mandatory. They are different from the rest because they have the "(Required)" text written after the name of the parameter. The "Table Of Contents" macro has only optional parameters. One special macro parameter is the macro content. The "Table Of Contents" macro doesn't require any content but other macros like Info use the content as the main source for their output. You can say that the "Table Of Contents" macro uses the entire page as its content, so you don't have to specify the content.
Marius Dumitru Florea 1.1 601
Manuel Smeria 79.1 602 Change the "Table Of Contents" parameters if you wish but note that you can come back to this step later by editing the inserted "Table Of Contents" macro. We kept the default values in our example. Click "Apply" when you're done.
Marius Dumitru Florea 1.1 603
Sorin Burjan 17.1 604 [[image:macroinsertstep3.png||style="border: 1px solid black;"]]
Manuel Smeria 79.1 605 At this point you should see the "Table Of Contents" macro inserted in your document.
Marius Dumitru Florea 1.1 606
Sorin Burjan 17.1 607 [[image:macroinsertstep4.png||style="border: 1px solid black;"]]
Marius Dumitru Florea 1.1 608 Next, we add more sections to the document and choose "Refresh" from the "Macro" menu in order to update the table of contents.
609
Sorin Burjan 17.1 610 [[image:macroinsertstep5.png||style="border: 1px solid black;"]]
Marius Dumitru Florea 1.1 611 The table of contents should be updated now.
612
Sorin Burjan 17.1 613 [[image:macroinsertstep6.png||style="border: 1px solid black;"]]
Marius Dumitru Florea 1.1 614 If you think the table of contents takes a lot of space you can collapse it. In fact you can collapse any macro. First select the macro by clicking on it and then click again to toggle between collapsed and expanded states. You can also use the "Macro" menu to collapse or expand all the inserted macros. Collapsed macros display only their name and an icon.
615
Sorin Burjan 17.1 616 [[image:macroinsertstep7.png||style="border: 1px solid black;"]]
Marius Dumitru Florea 1.1 617
618 === Importing Office Content ===
619
Manuel Smeria 79.1 620 The editor allows you to import content from office applications like **OpenOffice Writer** or **Microsoft Word**. If you want to insert just a fragment from an office document you can copy it from the office application you use and then click the "Paste" button from the Menu toolbar.
Marius Dumitru Florea 1.1 621
Sorin Burjan 17.1 622 [[image:officeimporterstep1.png||style="border: 1px solid black;"]]
Marius Dumitru Florea 1.1 623 **Paste** what you've copied from the office application in the text area that you can see on the opened dialog. Notice the "//Filter styles//" check box in bottom left corner of the dialog. If you want the pasted text to look as much as possible as in your office application then leave the check box unchecked. Otherwise, if you care only about the content and not the text styles then check "Filter styles". This will result in a much cleaner document but the result may look different than in your office application. Click the "Import" button in the end.
624
Sorin Burjan 17.1 625 [[image:officeimporterstep2.png||style="border: 1px solid black;"]]
Marius Dumitru Florea 1.1 626 You should see the office content in the editing area. It was inserted at the caret position or in place of the selected text. You can edit the imported content if you want.
627
Sorin Burjan 17.1 628 [[image:officeimporterstep3.png||style="border: 1px solid black;"]]
Manuel Smeria 79.1 629 In case you need to **import** an office document and not just a fragment you can click on the "Import" link in the menu and then click on "Office Document". **NOTE**: this feature requires special setup in order to work. Ask your system administrator to enable it.
Marius Dumitru Florea 1.1 630
Sorin Burjan 17.1 631 [[image:officeimporterstep4.png||style="border: 1px solid black;"]]
Vincent Massol 24.4 632 See also the [[Office Importer Application>>extensions:Extension.Office Importer Application]].
Marius Dumitru Florea 1.1 633
634 === Undo and Redo ===
635
Guillaume Lerouge 6.1 636 The **undo** function is very useful in a situation where you've made a mistake and you want to correct it fast. By clicking the [[image:undo.gif||style="vertical-align: middle;"]] button on the toolbar or by using the **Ctrl+Z** shortcut key combination you can restore the state of the editing area before your last action. The editor manages to do this by keeping a history of the actions you take on the rich text area. Examples of actions that generate history entries are: typing a word, creating a new paragraph, applying a style, deleting a piece of text. The undo function allows you go back in this history. You may of course go many steps back, not just one step, and continue editing from that point.
Marius Dumitru Florea 1.1 637
Guillaume Lerouge 6.1 638 The **redo** function is the opposite of the undo function. If you used the undo function and then for any reason decided to go back to the state before the undo you must use the redo function. To activate it press [[image:redo.gif||style="vertical-align: middle;"]] on the toolbar or use the **Ctrl+Y** shortcut key combination. As you can see, the undo and redo functions allow you to go back and forth in the history of the editing area.
Ecaterina Moraru (Valica) 91.4 639
640 == Videos ==
641
642 {{videoCard}}
Ecaterina Moraru (Valica) 91.7 643 [{
Ecaterina Moraru (Valica) 91.4 644 "title": "Basic Editing with the GWT Wysiwyg Editor",
645 "topics": [
646 "by Silvia Macovei"
647 ],
648 "url": "https://www.youtube.com/embed/IK-n76406-A",
649 "duration": "0:37 min"
650 }, {
651 "title": "Insert Links in a Page Using the GWT Wysiwyg Editor",
652 "topics": [
653 "by Silvia Macovei"
654 ],
655 "url": "https://www.youtube.com/embed/wbyl0VxDzXQ",
656 "duration": "1:22 min"
657 }, {
658 "title": "Insert Images in a Page Using the GWT Wysiwyg Editor",
659 "topics": [
660 "by Silvia Macovei"
661 ],
662 "url": "https://www.youtube.com/embed/pxkM0Me6t8s",
663 "duration": "0:33 min"
664 }]
665 {{/videoCard}}

Get Connected