<
From version < 5.1 >
edited by Guillaume Lerouge
on 2009/08/19 14:55
To version < 6.1 >
edited by Guillaume Lerouge
on 2009/08/19 14:55
>
Change comment: There is no comment for this version

Summary

Details

Page properties
Content
... ... @@ -1,8 +1,6 @@
1 1  = WYSIWYG Editor =
2 2  
3 -(% class="floatinginfobox" %)(((
4 -{{toc/}}
5 -)))
3 +((({{toc depth="2"/}})))
6 6  
7 7  == Quick Reference ==
8 8  
... ... @@ -217,9 +217,9 @@
217 217  
218 218  ==== Text Styles ====
219 219  
220 -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.
218 +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.
221 221  
222 -(% style="border:1px solid #DDD; width:500px" %)
220 +(% style="border: 1px solid rgb(221, 221, 221); width: 500px;" %)
223 223  (((**This is a text with bold style**
224 224  
225 225  //This is a text with italic style//
... ... @@ -232,7 +232,7 @@
232 232  
233 233  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]].
234 234  
235 -(% style="border:1px solid #DDD; width:500px" %)
233 +(% style="border: 1px solid rgb(221, 221, 221); width: 500px;" %)
236 236  (((You can mix **bold** and //italic// styles: **//Hello user!//**
237 237  
238 238  You can mix //italic// and __underline__ styles: //__Hello user!__//
... ... @@ -243,9 +243,9 @@
243 243  
244 244  ==== Subscript and Superscript ====
245 245  
246 -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".
244 +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".
247 247  
248 -(% style="border:1px solid #DDD; width:500px" %)
246 +(% style="border: 1px solid rgb(221, 221, 221); width: 500px;" %)
249 249  (((##P,,ABC,, = L,,AB,, + L,,BC,, + L,,CA,,##
250 250  
251 251  ##E = mc^^2^^##
... ... @@ -258,24 +258,24 @@
258 258  
259 259  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).
260 260  
261 -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.
259 +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.
262 262  
263 -(% style="border:1px solid #DDD; width:500px; border-left:2px solid DarkRed" %)
261 +(% 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;" %)
264 264  (((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.)))
265 265  
266 -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.
264 +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.
267 267  
268 -(% style="border:1px solid #DDD; width:500px; text-align:center" %)
266 +(% style="border: 1px solid rgb(221, 221, 221); width: 500px; text-align: center;" %)
269 269  (((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.)))
270 270  
271 -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.
269 +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.
272 272  
273 -(% style="border:1px solid #DDD; width:500px; text-align:right; border-right:2px solid DarkRed" %)
271 +(% 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;" %)
274 274  (((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.)))
275 275  
276 -If you want all lines to have the same line width then click the [[image:justifyfull||style="vertical-align:middle"]] toolbar button.
274 +If you want all lines to have the same line width then click the [[image:justifyfull||style="vertical-align: middle;"]] toolbar button.
277 277  
278 -(% style="border:1px solid #DDD; width:500px; text-align:justify; border-left:2px solid DarkRed; border-right:2px solid DarkRed" %)
276 +(% style="border-style: solid; border-color: rgb(221, 221, 221) DarkRed; border-width: 1px 2px; width: 500px; text-align: justify;" %)
279 279  (((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.)))
280 280  
281 281  ==== Headings ====
... ... @@ -290,7 +290,7 @@
290 290  
291 291  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.
292 292  
293 -(% style="border:1px solid #DDD; width:500px" %)
291 +(% style="border: 1px solid rgb(221, 221, 221); width: 500px;" %)
294 294  ((((% style="font-family: comic sans ms;" %)This is a Comic Sans MS font.
295 295  
296 296  (% style="font-family: courier new;" %)This is a Courier New font.
... ... @@ -305,7 +305,7 @@
305 305  
306 306  To change your font size pick one from the font size list box found on the toolbar.
307 307  
308 -(% style="border:1px solid #DDD; width:500px" %)
306 +(% style="border: 1px solid rgb(221, 221, 221); width: 500px;" %)
309 309  ((((% style="font-size: 8pt;" %)This text's size is 8pt.
310 310  
311 311  (% style="font-size: 18pt;" %)This text's size is 18pt.
... ... @@ -316,35 +316,35 @@
316 316  
317 317  ==== Colors ====
318 318  
319 -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.
317 +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.
320 320  
321 321  image:colorpicker.png
322 322  
323 323  The current color is displayed using a //bigger// square, as you can see in the previous image.
324 324  
325 -(% style="border:1px solid #DDD; width:500px" %)
326 -((((% style="color:red" %)
323 +(% style="border: 1px solid rgb(221, 221, 221); width: 500px;" %)
324 +((((% style="color: red;" %)
327 327  This text is written in red.
328 328  
329 -(% style="color:green" %)
327 +(% style="color: green;" %)
330 330  This text is written in green.
331 331  
332 -(% style="color:blue" %)This text is written in blue.)))
330 +(% style="color: blue;" %)This text is written in blue.)))
333 333  
334 -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.
332 +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.
335 335  
336 -(% style="border:1px solid #DDD; width:500px" %)
337 -((((% style="background-color:yellow" %)This text has yellow background.
334 +(% style="border: 1px solid rgb(221, 221, 221); width: 500px;" %)
335 +((((% style="background-color: yellow;" %)This text has yellow background.
338 338  
339 -(% style="color:red; background-color:lightGray" %)This text is written in red and has a light gray background.)))
337 +(% style="color: red; background-color: lightGray;" %)This text is written in red and has a light gray background.)))
340 340  
341 341  ==== Remove Formatting ====
342 342  
343 -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.
341 +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.
344 344  
345 345  === Creating Lists ===
346 346  
347 -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.
345 +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.
348 348  
349 349  image:listcreatestep1.png
350 350  
... ... @@ -362,7 +362,7 @@
362 362  
363 363  image:listcreatestep6.png
364 364  
365 -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.
363 +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.
366 366  
367 367  image:listcreatestep7.png
368 368  
... ... @@ -450,7 +450,7 @@
450 450  
451 451  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:
452 452  
453 -* 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.
451 +* 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.
454 454  * the link label
455 455  * the tool tip: the text to display when the mouse cursor hovers over the link
456 456  * if the link should be opened in a new window or not
... ... @@ -474,7 +474,7 @@
474 474  In order to insert symbols or special characters (accented characters, trademark, currency symbol etc.) you have to follow this steps:
475 475  
476 476  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
477 -1. press the [[image:charmap.gif||style="vertical-align:middle"]] button on the toolbar
475 +1. press the [[image:charmap.gif||style="vertical-align: middle;"]] button on the toolbar
478 478  1. click on the symbol you wish to insert
479 479  
480 480  image:symbolpicker.png
... ... @@ -481,7 +481,7 @@
481 481  
482 482  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]].
483 483  
484 -(% style="border:1px solid #DDD; width:500px" %)
482 +(% style="border: 1px solid rgb(221, 221, 221); width: 500px;" %)
485 485  (((**10£**
486 486  
487 487  iTunes(% style="color: rgb(255, 153, 0);" %)®
... ... @@ -597,7 +597,7 @@
597 597  
598 598  === Importing Office Content ===
599 599  
600 -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 [[image:importer.gif||style="vertical-align:middle"]] button from the editor toolbar.
598 +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 [[image:importer.gif||style="vertical-align: middle;"]] button from the editor toolbar.
601 601  
602 602  image:officeimporterstep1.png
603 603  
... ... @@ -617,6 +617,6 @@
617 617  
618 618  === Undo and Redo ===
619 619  
620 -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.
618 +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.
621 621  
622 -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.
620 +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.

Get Connected