Changes for page User Guide
Last modified by Thomas Mortagne on 2023/10/10 16:20
Summary
-
Page properties (1 modified, 0 added, 0 removed)
-
Attachments (1 modified, 0 added, 0 removed)
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.8KB1 +5.4 KB - Content