Changes for page User Guide

Last modified by Thomas Mortagne on 2023/10/10 16:20
From version 13.2
edited by Sorin Burjan
on 2010/06/11 13:14
Change comment: minor typos
To version 14.2
edited by Sorin Burjan
on 2010/06/11 13:31
Change comment: Small typo improvements

Summary

Details

Page properties
Content
... ... @@ -1,6 +1,7 @@
1 1  = WYSIWYG Editor =
2 2  
3 -(% class="floatinginfobox" %)(((
3 +(% class="floatinginfobox" %)
4 +(((
4 4  **Contents**
5 5  
6 6  {{toc depth="2"/}}
... ... @@ -22,7 +22,10 @@
22 22  
23 23  === Toolbar ===
24 24  
25 -[[image:toolbar.png||style="border:1px solid black;]]
26 +[[image:toolbar.png||style="border: 1px solid black;"]]
27 +
28 +Not all the buttons appear in the default instalation. See the [[configuration page>>AdminGuide.WysiwygEditor]] if you want to enable or disable any of the features presented here.
29 +
26 26  |=Toolbar Item|=Function
27 27  |[[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]].
28 28  |[[image:subscript.gif]][[image:superscript.gif]]|Subscript (x,,2,,) or superscript (x^^2^^) the selected text. See [[Subscript and Superscript>>#HSubscriptandSuperscript]].
... ... @@ -231,7 +231,8 @@
231 231  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.
232 232  
233 233  (% style="border: 1px solid rgb(221, 221, 221); width: 500px;" %)
234 -(((**This is a text with bold style**
238 +(((
239 +**This is a text with bold style**
235 235  
236 236  //This is a text with italic style//
237 237  
... ... @@ -239,16 +239,19 @@
239 239  
240 240  --This is a text with strike through style--
241 241  
242 -##This is a text with teletype style##)))
247 +##This is a text with teletype style##
248 +)))
243 243  
244 244  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]].
245 245  
246 246  (% style="border: 1px solid rgb(221, 221, 221); width: 500px;" %)
247 -(((You can mix **bold** and //italic// styles: **//Hello user!//**
253 +(((
254 +You can mix **bold** and //italic// styles: **//Hello user!//**
248 248  
249 249  You can mix //italic// and __underline__ styles: //__Hello user!__//
250 250  
251 -You can mix **bold**, ##teletype## and --strike through-- styles: **##--Hello user!--##**)))
258 +You can mix **bold**, ##teletype## and --strike through-- styles: **##--Hello user!--##**
259 +)))
252 252  
253 253  See [[Keyboard Shortcuts>>#HKeyboardShortcuts]] to find out how you can change the text style using only the keyboard.
254 254  
... ... @@ -257,11 +257,13 @@
257 257  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".
258 258  
259 259  (% style="border: 1px solid rgb(221, 221, 221); width: 500px;" %)
260 -(((##P,,ABC,, = L,,AB,, + L,,BC,, + L,,CA,,##
268 +(((
269 +##P,,ABC,, = L,,AB,, + L,,BC,, + L,,CA,,##
261 261  
262 262  ##E = mc^^2^^##
263 263  
264 -##P(x) = x,,1,,^^a^^ + x,,2,,^^b^^##)))
273 +##P(x) = x,,1,,^^a^^ + x,,2,,^^b^^##
274 +)))
265 265  
266 266  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.
267 267  
... ... @@ -272,22 +272,30 @@
272 272  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.
273 273  
274 274  (% 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;" %)
275 -(((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.)))
285 +(((
286 +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.
287 +)))
276 276  
277 277  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.
278 278  
279 279  (% style="border: 1px solid rgb(221, 221, 221); width: 500px; text-align: center;" %)
280 -(((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.)))
292 +(((
293 +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.
294 +)))
281 281  
282 282  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.
283 283  
284 284  (% 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;" %)
285 -(((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.)))
299 +(((
300 +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.
301 +)))
286 286  
287 287  If you want all lines to have the same line width then click the [[image:justifyfull||style="vertical-align: middle;"]] toolbar button.
288 288  
289 289  (% style="border-style: solid; border-color: rgb(221, 221, 221) DarkRed; border-width: 1px 2px; width: 500px; text-align: justify;" %)
290 -(((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.)))
306 +(((
307 +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.
308 +)))
291 291  
292 292  ==== Headings ====
293 293  
... ... @@ -302,11 +302,13 @@
302 302  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.
303 303  
304 304  (% style="border: 1px solid rgb(221, 221, 221); width: 500px;" %)
305 -((((% style="font-family: comic sans ms;" %)This is a Comic Sans MS font.
323 +(((
324 +(% style="font-family: comic sans ms;" %)This is a Comic Sans MS font.
306 306  
307 307  (% style="font-family: courier new;" %)This is a Courier New font.
308 308  
309 -(% style="font-family: times new roman;" %)This is a Times New Roman font.)))
328 +(% style="font-family: times new roman;" %)This is a Times New Roman font.
329 +)))
310 310  
311 311  The editor detects the font used around the insertion caret or by the selected text and updates the font list box accordingly.
312 312  
... ... @@ -317,11 +317,13 @@
317 317  To change your font size pick one from the font size list box found on the toolbar.
318 318  
319 319  (% style="border: 1px solid rgb(221, 221, 221); width: 500px;" %)
320 -((((% style="font-size: 8pt;" %)This text's size is 8pt.
340 +(((
341 +(% style="font-size: 8pt;" %)This text's size is 8pt.
321 321  
322 322  (% style="font-size: 18pt;" %)This text's size is 18pt.
323 323  
324 -(% style="font-size: 24pt;" %)This text's size is 24pt.)))
345 +(% style="font-size: 24pt;" %)This text's size is 24pt.
346 +)))
325 325  
326 326  The editor detects the font size and updates the toolbar list box accordingly.
327 327  
... ... @@ -334,20 +334,24 @@
334 334  The current color is displayed using a //bigger// square, as you can see in the previous image.
335 335  
336 336  (% style="border: 1px solid rgb(221, 221, 221); width: 500px;" %)
337 -((((% style="color: red;" %)
359 +(((
360 +(% style="color: red;" %)
338 338  This text is written in red.
339 339  
340 340  (% style="color: green;" %)
341 341  This text is written in green.
342 342  
343 -(% style="color: blue;" %)This text is written in blue.)))
366 +(% style="color: blue;" %)This text is written in blue.
367 +)))
344 344  
345 345  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.
346 346  
347 347  (% style="border: 1px solid rgb(221, 221, 221); width: 500px;" %)
348 -((((% style="background-color: yellow;" %)This text has yellow background.
372 +(((
373 +(% style="background-color: yellow;" %)This text has yellow background.
349 349  
350 -(% style="color: red; background-color: lightGray;" %)This text is written in red and has a light gray background.)))
375 +(% style="color: red; background-color: lightGray;" %)This text is written in red and has a light gray background.
376 +)))
351 351  
352 352  ==== Remove Formatting ====
353 353  
... ... @@ -493,11 +493,13 @@
493 493  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]].
494 494  
495 495  (% style="border: 1px solid rgb(221, 221, 221); width: 500px;" %)
496 -(((**10£**
522 +(((
523 +**10£**
497 497  
498 498  iTunes(% style="color: rgb(255, 153, 0);" %)®
499 499  
500 -(% style="background-color: rgb(255, 255, 0);" %)? ? ?r²)))
527 +(% style="background-color: rgb(255, 255, 0);" %)? ? ?r²
528 +)))
501 501  
502 502  === Inserting and Editing Images ===
503 503  
toolbar.png
Size
... ... @@ -1,1 +1,1 @@
1 -4.8 KB
1 +5.4 KB
Content

About

About

Support

Platform

User Guide

Admin Guide

Developer Guide

Projects

XWiki

Extensions

Other

Contribute

Status

Practices

Under the Hood

Get Involved

Get Connected