<
From version < 17.2 >
edited by Sorin Burjan
on 2010/06/14 09:24
To version < 16.1 >
edited by Sorin Burjan
on 2010/06/14 08:50
>
Change comment: There is no comment for this version

Summary

Details

Page properties
Content
... ... @@ -4,7 +4,7 @@
4 4  (((
5 5  **Contents**
6 6  
7 -{{toc depth="3"/}}
7 +{{toc depth="2"/}}
8 8  )))
9 9  
10 10  Welcome to the WYSIWYG editor user guide. This page will help you discover all the features from XWiki's GWT rich text editor.
... ... @@ -112,14 +112,11 @@
112 112  See also [[Inserting and Editing Macros>>#HInsertingandEditingMacros]] for a detailed description of how macros can be inserted and edited.
113 113  
114 114  ====Import ====
115 -Import office files.
116 -|(% rowspan="3" %)[[image:ImportOfficeDocument.png||style="border: 1px solid black;"]]|1. The user can import an entire Microsoft Office Word document.
117 -|2. The user can copy or paste the content of an office document from or in the clipboard.
118 -See [[Importing Office Content>>#HImportingOfficeContent]].
115 +Import office files. See [[Importing Office Content>>#HImportingOfficeContent]].
119 119  
120 120  === Tabs ===
121 -[[image:tabs.png||style="border: 1px solid black;"]]
122 122  
119 +image:tabs.png
123 123  
124 124  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.
125 125  
... ... @@ -145,15 +145,17 @@
145 145  
146 146  === Editing Area ===
147 147  
148 -[[image:rta.png||style="border: 1px solid black;"]]
145 +image:rta.png
146 +
149 149  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. 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 150  
151 151  === Toolbar ===
152 152  
153 -[[image:toolbar.png||style="border: 1px solid black;"]]
151 +image:toolbar.png
152 +
154 154  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.
155 155  
156 -[[image:toolbarstate.png||style="border: 1px solid black;"]]
155 +image:toolbarstate.png
157 157  
158 158  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.
159 159  
... ... @@ -161,15 +161,18 @@
161 161  
162 162  === Menus ===
163 163  
164 -[[image:menu.png||style="border: 1px solid black;"]]
163 +image:menu.png
164 +
165 165  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.
166 166  
167 -[[image:macroinsertmenu.png||style="border: 1px solid black;"]]
167 +image:macroinsertmenu.png
168 +
168 168  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).
169 169  
170 170  === Tabs ===
171 171  
172 -[[image:tabs.png||style="border: 1px solid black;"]]
173 +image:tabs.png
174 +
173 173  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.
174 174  
175 175  === Dialogs ===
... ... @@ -176,16 +176,20 @@
176 176  
177 177  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.
178 178  
179 -[[image:symbolpickerdragging.png||style="border: 1px solid black;"]]
181 +image:symbolpickerdragging.png
182 +
180 180  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.
181 181  
182 -[[image:colorpicker.png||style="border: 1px solid black;"]]
185 +image:colorpicker.png
186 +
183 183  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]].
184 184  
185 -[[image:symbolpicker.png||style="border: 1px solid black;"]]
189 +image:symbolpicker.png
190 +
186 186  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]].
187 187  
188 -[[image:link2wikistep2.png||style="border: 1px solid black;"]]
193 +image:link2wikistep2.png
194 +
189 189  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 and the next/previous buttons. The content of the dialog includes the input controls used to collect data from the user. The footer usually contains the buttons for canceling the wizard or finishing it at the current step.
190 190  
191 191  == Standard Features ==
... ... @@ -308,10 +308,12 @@
308 308  
309 309  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.
310 310  
311 -[[image:formatexample.png||style="border: 1px solid black;"]]
317 +image:formatexample.png
318 +
312 312  ==== Fonts ====
313 313  
314 -[[image:fontname.png||style="border: 1px solid black;"]]
321 +image:fontname.png
322 +
315 315  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.
316 316  
317 317  (% style="border: 1px solid rgb(221, 221, 221); width: 500px;" %)
... ... @@ -327,7 +327,8 @@
327 327  
328 328  ==== Text Size ====
329 329  
330 -[[image:fontsize.png||style="border: 1px solid black;"]]
338 +image:fontsize.png
339 +
331 331  To change your font size pick one from the font size list box found on the toolbar.
332 332  
333 333  (% style="border: 1px solid rgb(221, 221, 221); width: 500px;" %)
... ... @@ -345,7 +345,8 @@
345 345  
346 346  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.
347 347  
348 -[[image:colorpicker.png||style="border: 1px solid black;"]]
357 +image:colorpicker.png
358 +
349 349  The current color is displayed using a //bigger// square, as you can see in the previous image.
350 350  
351 351  (% style="border: 1px solid rgb(221, 221, 221); width: 500px;" %)
... ... @@ -376,35 +376,34 @@
376 376  
377 377  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.
378 378  
389 +image:listcreatestep1.png
379 379  
380 -[[image:listcreatestep1.png||style="border: 1px solid black;"]]
391 +image:listcreatestep2.png
381 381  
382 -[[image:listcreatestep2.png||style="border: 1px solid black;"]]
383 -
384 384  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.
385 385  
395 +image:listcreatestep3.png
386 386  
387 -[[image:listcreatestep3.png||style="border: 1px solid black;"]]
397 +image:listcreatestep4.png
388 388  
389 -[[image:listcreatestep4.png||style="border: 1px solid black;"]]
390 390  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.
391 391  
401 +image:listcreatestep5.png
392 392  
393 -[[image:listcreatestep5.png||style="border: 1px solid black;"]]
403 +image:listcreatestep6.png
394 394  
395 -[[image:listcreatestep6.png||style="border: 1px solid black;"]]
396 396  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.
397 397  
407 +image:listcreatestep7.png
398 398  
399 -[[image:listcreatestep7.png||style="border: 1px solid black;"]]
409 +image:listcreatestep8.png
400 400  
401 -[[image:listcreatestep8.png||style="border: 1px solid black;"]]
402 402  You can **mix** bulleted lists with numbered lists.
403 403  
413 +image:listcreatestep9.png
404 404  
405 -[[image:listcreatestep9.png||style="border: 1px solid black;"]]
415 +image:listcreatestep10.png
406 406  
407 -[[image:listcreatestep10.png||style="border: 1px solid black;"]]
408 408  After you created the list, press the toolbar button for the associated list type to go back to plain text.
409 409  
410 410  === Creating and Editing Links ===
... ... @@ -421,8 +421,8 @@
421 421  
422 422  To create a link to a wiki page choose "Wiki page" from the "Link" menu.
423 423  
433 +image:link2wikistep1.png
424 424  
425 -[[image:link2wikistep1.png||style="border: 1px solid black;"]]
426 426  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.
427 427  
428 428  Advanced users can use the text box below the tree to quickly search for wiki pages. You have use this syntax: **WikiName:SpaceName.PageName**. The wiki name and the space name can be omitted. The text box will offer you suggestions based on the wiki pages that match your input.
... ... @@ -429,7 +429,8 @@
429 429  
430 430  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.
431 431  
432 -[[image:link2wikistep2.png||style="border: 1px solid black;"]]
441 +image:link2wikistep2.png
442 +
433 433  Now you can edit the link parameters:
434 434  
435 435  * the link label
... ... @@ -438,20 +438,22 @@
438 438  
439 439  Click "Create link" when you're done. You will comeback to this dialog when editing a link.
440 440  
451 +image:link2wikistep3.png
441 441  
442 -[[image:link2wikistep3.png||style="border: 1px solid black;"]]
443 443  Your link should be visible inside the editing area at this point. Try to hover the mouse cursor over the link or to edit the link label in place.
444 444  
445 -[[image:link2wikistep4.png||style="border: 1px solid black;"]]
455 +image:link2wikistep4.png
456 +
446 446  ==== Link to attachment ====
447 447  
448 448  To create a link to an attachment choose "Attached file" from the "Link" menu.
449 449  
450 -[[image:link2attachmentstep1.png||style="border: 1px solid black;"]]
461 +image:link2attachmentstep1.png
462 +
451 451  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.
452 452  
465 +image:link2attachmentstep2.png
453 453  
454 -[[image:link2attachmentstep2.png||style="border: 1px solid black;"]]
455 455  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.
456 456  
457 457  Advanced users can use the text box below the tree to quickly search for attached files. You have use this syntax: **WikiName:[email protected]**. The wiki name, the space name and the page name can be omitted. The text box will offer you suggestions based on the attachment file names that match your input.
... ... @@ -458,9 +458,8 @@
458 458  
459 459  After you select the attachment (either by using the tree or the text box) click the "Select" button to proceed to the next step.
460 460  
461 -image:
473 +image:link2attachmentstep3.png
462 462  
463 -[[image:link2attachmentstep3.png||style="border: 1px solid black;"]]
464 464  Now you can edit the link parameters:
465 465  
466 466  * the link label
... ... @@ -469,10 +469,12 @@
469 469  
470 470  This are the same parameters as for a link to a wiki page. Click "Create link" when you're done. You will comeback to this dialog when editing a link.
471 471  
472 -[[image:link2attachmentstep4.png||style="border: 1px solid black;"]]
483 +image:link2attachmentstep4.png
484 +
473 473  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.
474 474  
475 -[[image:link2attachmentstep5.png||style="border: 1px solid black;"]]
487 +image:link2attachmentstep5.png
488 +
476 476  ==== Link to web page ====
477 477  
478 478  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:
... ... @@ -484,12 +484,14 @@
484 484  
485 485  Click "Create link" when you're done.
486 486  
487 -[[image:link2webpage.png||style="border: 1px solid black;"]]
500 +image:link2webpage.png
501 +
488 488  ==== Link to email ====
489 489  
490 490  Creating a link to an email address is much line 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.
491 491  
492 -[[image:link2email.png||style="border: 1px solid black;"]]
506 +image:link2email.png
507 +
493 493  ==== Image link ====
494 494  
495 495  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.
... ... @@ -502,7 +502,8 @@
502 502  1. press the [[image:charmap.gif||style="vertical-align: middle;"]] button on the toolbar
503 503  1. click on the symbol you wish to insert
504 504  
505 -[[image:symbolpicker.png||style="border: 1px solid black;"]]
520 +image:symbolpicker.png
521 +
506 506  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]].
507 507  
508 508  (% style="border: 1px solid rgb(221, 221, 221); width: 500px;" %)
... ... @@ -518,8 +518,8 @@
518 518  
519 519  To insert an image place the caret where you want the image to be inserted and choose "Insert 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 "Insert image" entry.
520 520  
537 +image:imagestep1.png
521 521  
522 -[[image:imagestep1.png||style="border: 1px solid black;"]]
523 523  You have three ways to specify which image to insert:
524 524  
525 525  * Choose from the images already attached to the edited page. In our example there are two images already attached to the edited page: the Ubuntu logo and the Firefox logo.
... ... @@ -528,12 +528,12 @@
528 528  
529 529  Whatever option you choose you have to click on the "Select" button to move to the next step.
530 530  
547 +image:imagestep2.png
531 531  
532 -[[image:imagestep2.png||style="border: 1px solid black;"]]
533 533  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 "Upload" button to attach the image to the edited page.
534 534  
551 +image:imagestep3.png
535 535  
536 -[[image:imagestep3.png||style="border: 1px solid black;"]]
537 537  In the final step, before the image is inserted, you can edit the image properties. Here's what you can specify:
538 538  
539 539  * the image **width** and **height** on the page (i.e. how much space does the image take on the page)
... ... @@ -545,13 +545,14 @@
545 545  
546 546  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.
547 547  
548 -[[image:imagestep4.png||style="border: 1px solid black;"]]
564 +image:imagestep4.png
565 +
549 549  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.
550 550  
568 +image:imagestep5.png
551 551  
552 -[[image:imagestep5.png||style="border: 1px solid black;"]]
570 +image:imagestep6.png
553 553  
554 -[[image:imagestep6.png||style="border: 1px solid black;"]]
555 555  To delete an image you can select it and press the **Delete** key or choose "Remove image" from the "Image" menu.
556 556  
557 557  === Creating and Editing Tables ===
... ... @@ -558,30 +558,32 @@
558 558  
559 559  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.
560 560  
578 +image:tablestep1.png
561 561  
562 -[[image:tablestep1.png||style="border: 1px solid black;"]]
563 563  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.
564 564  
582 +image:tablestep2.png
565 565  
566 -[[image:tablestep2.png||style="border: 1px solid black;"]]
567 567  You should see now 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.
568 568  
586 +image:tablestep3.png
569 569  
570 -[[image:tablestep3.png||style="border: 1px solid black;"]]
571 571  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.
572 572  
590 +image:tablestep4.png
573 573  
574 574  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.
575 575  
576 -[[image:tablestep5.png||style="border: 1px solid black;"]]
594 +image:tablestep5.png
595 +
577 577  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.
578 578  
598 +image:tablestep6.png
579 579  
580 -[[image:tablestep6.png||style="border: 1px solid black;"]]
581 581  As you can see the new table row is empty and ready to be filled.
582 582  
602 +image:tablestep7.png
583 583  
584 -[[image:tablestep7.png||style="border: 1px solid black;"]]
585 585  To delete a table place the caret in any of its cells and choose "Delete table" from the "Table" menu.
586 586  
587 587  === Inserting and Editing Macros ===
... ... @@ -590,50 +590,52 @@
590 590  
591 591  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.
592 592  
612 +image:macroinsertstep1.png
593 593  
594 -[[image:macroinsertstep1.png||style="border: 1px solid black;"]]
595 595  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 ToC 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 ToC macro highlighted.
596 596  
616 +image:macroinsertstep2.png
597 597  
598 -[[image:macroinsertstep2.png||style="border: 1px solid black;"]]
599 599  Parameters control the behavior and the output of a macro. Some parameters are mandatory. You can distinguish them from the rest by their color: green. The ToC macro has only optional parameters. One special macro parameter is the macro content. The ToC 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 ToC macro uses the entire page as its content, so you don't have to specify the content.
600 600  
601 601  Change the ToC parameters if you wish but note that you can come back to this step later by editing the inserted ToC macro. We kept the default values in our example. Click "Apply" when you're done.
602 602  
622 +image:macroinsertstep3.png
603 603  
604 -[[image:macroinsertstep3.png||style="border: 1px solid black;"]]
605 605  At this point you should see the ToC macro inserted in your document.
606 606  
626 +image:macroinsertstep4.png
607 607  
608 -[[image:macroinsertstep4.png||style="border: 1px solid black;"]]
609 609  Next, we add more sections to the document and choose "Refresh" from the "Macro" menu in order to update the table of contents.
610 610  
630 +image:macroinsertstep5.png
611 611  
612 -[[image:macroinsertstep5.png||style="border: 1px solid black;"]]
613 613  The table of contents should be updated now.
614 614  
634 +image:macroinsertstep6.png
615 615  
616 -[[image:macroinsertstep6.png||style="border: 1px solid black;"]]
617 617  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.
618 618  
619 -[[image:macroinsertstep7.png||style="border: 1px solid black;"]]
638 +image:macroinsertstep7.png
620 620  
621 621  === Importing Office Content ===
622 622  
623 623  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.
624 624  
625 -[[image:officeimporterstep1.png||style="border: 1px solid black;"]]
644 +image:officeimporterstep1.png
645 +
626 626  **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.
627 627  
628 -[[image:officeimporterstep2.png||style="border: 1px solid black;"]]
648 +image:officeimporterstep2.png
649 +
629 629  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.
630 630  
652 +image:officeimporterstep3.png
631 631  
632 -[[image:officeimporterstep3.png||style="border: 1px solid black;"]]
633 633  In case you need to **import** an office document and not just a fragment you can use the "//File//" tab on the Office Importer dialog. **NOTE**: this feature requires special setup in order to work. Ask your system administrator to enable it.
634 634  
656 +image:officeimporterstep4.png
635 635  
636 -[[image:officeimporterstep4.png||style="border: 1px solid black;"]]
637 637  See also the [[Office Importer Application>>http://code.xwiki.org/xwiki/bin/view/Applications/OfficeImporterApplication]].
638 638  
639 639  === Undo and Redo ===

Get Connected