WYSIWYG Editor

The CKEditor is the new XWiki Enterprise default Wysiwyg editor. The old Wysiwyg editor is still available and it can be enabled by wiki administrators from the "Edit Mode Settings" section of the preferences page.

DefaultWysiwygEditor.png

Quick Reference

Toolbar

toolbar.png

Not all the buttons appear in the default installation. See the configuration page if you want to enable or disable any of the features presented here.

Toolbar ItemFunction
bold.gifitalic.gifunderline.gifstrikethrough.giftt.gifApplies bold, italic, underline, strikethrough or teletype formatting to the selected text. See Text Styles.
subscript.gifsuperscript.gifSubscript (x2) or superscript (x2) the selected text. See Subscript and Superscript.
justifyleft.gifjustifycenter.gifjustifyright.gifjustifyfull.gifSets the text alignment: left, centered, right or justified. See Text Alignment.
ul.gifol.gifCreates bulleted or numbered lists. See Creating Lists.
indent.gifoutdent.gifIncreases or decreases the indentation of a list item. See Creating Lists.
undo.gifredo.gifUndo or redo the most recent action taken. See Undo and Redo.
format.pngFormats the text as heading (level 1 to 6). See Headings.
fontname.pngChanges the font used by the selected text. See Fonts.
fontsize.pngChanges the font size used by the selected text. See Text Size.
forecolor.gifbackcolor.gifChanges the text color or the background color of the selected text. See Colors.
hr.gifInserts a horizontal rule.
removeformat.gifRemoves the formatting from the selected text. See Remove Formatting.
charmap.gifInserts symbols or special characters (accented characters, trademark, currency symbol etc.). See Inserting Symbols.

Menus

menu.png

Insert link menu is active when the caret or selection is outside of a link.

linkinsertmenu.png1. The user can link to one of the exiting wiki pages or to a new wiki page.
2. The user can link to one of the existing attachments or upload a new attachment to the edited page.
3. The user can link to any web page by pasting its address.
4. The user can link to an email address.

Edit link menu is active when the caret or selection is inside a link.

linkeditmenu.png1. The user can edit an existing link (i.e. change its target). A specific dialog is opened depending on the link type.
2. The user can remove an existing link.

See also Creating and Editing Links for a detailed description of how links can be created and edited.

Image

Insert image menu is active when there is no image selected.

imageinsertmenu.png1. The user can insert one of the attached images.
2. The user can insert an external image, without uploading it.

Edit image menu is active when an image is selected.

imageeditmenu.png1. The user can edit the selected image (i.e. change its source, width, height etc.).
2. The user can remove the selected image.

See also Inserting and Editing Images for a detailed description of how images can be inserted and edited.

Table

Insert table menu is active when the caret is not inside a table cell.

tableinsertmenu.png1. The user can insert a table by specifying the number of rows and columns.

Edit table menu is active when the caret is inside a table cell.

tableeditmenu.png1. The user can insert an empty column before the column in which the caret or selection is.
2. The user can insert an empty column after the column in which the caret or selection is.
3. The user can delete the column in which the caret or selection is.
4. The user can insert an empty row before the row in which the caret or selection is.
5. The user can insert an empty row after the row in which the caret or selection is.
6. The user can delete the row in which the caret or selection is.
7. The user can delete the table in which the caret or selection is.

See also Inserting and Editing Tables for a detailed description of how tables can be created and edited.

Macro

Insert macro menu is active when there is no macro selected.

macroinsertmenu.png1. The user can insert a predefined macro.
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.
3. The user can collapse all the macros in the edited page.
4. The user can expand all the macros in the edited page.

Edit macro menu is active when a macro is selected.

macroeditmenu.png1. The user can change the parameters or the content of the selected macro.
2. The user can collapse the selected macro.
3. The user can expand the selected macro.

See also Inserting and Editing Macros for a detailed description of how macros can be inserted and edited.

Import

Import office files.

ImportOfficeDocument.png1. The user can import an entire Microsoft Office Word document.

Tabs

tabs.png

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.

Keyboard Shortcuts

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:

  • Ctrl+A selects all the content inside the editing area.
  • Ctrl+B or Meta+B formats the selected text as bold.
  • Ctrl+C or Ctrl+Insert copies the current selection to the clipboard.
  • Ctrl+Down creates an empty paragraph after the table containing the caret or the selection and places the caret in it. This is useful when you cannot move the caret after a table because the page ends with it.
  • Ctrl+I or Meta+I formats the selected text as italic.
  • Ctrl+U or Meta+U formats the selected text as underline.
  • Ctrl+Up creates an empty paragraph before the table containing the caret or the selection and places the caret in it. This is useful when you cannot move the caret before a table because the page starts with it.
  • Ctrl+V or Shift+Insert pastes the data from the clipboard.
  • Ctrl+X or Shift+Delete cuts the current selection.
  • Ctrl+Y or Meta+Y triggers the redo function.
  • Ctrl+Z or Meta+Z triggers the undo function.

See also Writing to find out how standard keys like Enter, Backspace, Delete or Tab behave.

Interface

Editing Area

rta.png

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 scroll bars, vertical or horizontal, will appear. The scroll bars allow you to go up and down, as well as left and right through your text.

Toolbar

toolbar.png

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.

toolbarstate.png

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 feature 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.

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, 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).

Menus

menu.png

The menu bar, placed right on top of the toolbar,  is the place where you can find the advanced editing features. By clicking on a top menu item, you can see the 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.

macroinsertmenu.png

Some of the menu items have an icon to help you 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).

Tabs

tabs.png

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.

Dialogs

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 cannot 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.

symbolpickerdragging.png

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.

colorpicker.png

The color picker is a special dialog that allows you 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.

symbolpicker.png

The symbol picker is a special dialog that allows you 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.

link2wikistep2.png

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.

Writing

The Enter key (also known as the Return key) produces a different effect depending on the context where it is pressed:

  • creates a new list item if the caret is inside a non empty list item
  • transforms an empty list item into plain text
  • inserts a line break if the caret is inside a table cell
  • inserts an empty line before the current heading or paragraph if the caret is at the beginning of a heading or paragraph
  • creates a new paragraph if the caret is inside a paragraph or a heading

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:

  • pressing Enter will create a new list item
  • pressing Shift+Enter will create a line break in the heading
  • pressing Ctrl+Enter or Meta+Enter will create a new paragraph after the heading, inside the list item

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.

The Tab key behaves also differently depending on the context where it is pressed:

  • indents a list item if the caret is at the beginning of that list item
  • moves the caret to the next table cell, creating a new table row if the caret is inside the last table cell
  • inserts 4 spaces if none of the previous cases apply

Shift+Tab has the opposite effect of the Tab key:

  • outdents a list item if the caret is a the beginning of that list item
  • moves the caret to the previous table cell

See Keyboard Shortcuts for a list of key combinations supported by the editor.

Text Formatting

Text formatting determines how your text will look in your document.

Text Styles

You can change the way your text looks like by choosing whether the font should be bold (bold.gif), italic (italic.gif), underlined (underline.gif), stroked through (strikethrough.gif) or teletype (tt.gif). 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.

This is a text with bold style

This is a text with italic style

This is a text with underline style

This is a text with strike through style

This is a text with teletype style

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.

You can mix bold and italic styles: Hello user!

You can mix italic and underline styles: Hello user!

You can mix bold, teletype and strike through styles: Hello user!

See Keyboard Shortcuts to find out how you can change the text style using only the keyboard.

Subscript and Superscript

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 subscript.gif 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 superscript.gif button from the toolbar to write simple mathematical expressions like the "x to the power 2".

PABC = LAB + LBC + LCA

E = mc2

P(x)= x1a + x2b

You can mix subscript with superscript, though the result doesn't look very nice. You can also apply Text Styles to subscript and superscript text.

Text Alignment

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).

To align your text to the left side of the editing area, press the justifyleft.gif button on the toolbar.

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.

If you want instead to have the text aligned in the center of the page, just press the justifycenter.gif button on the toolbar.

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.

In order to align your text to the right side of the editing area, click the justifyright.gif button from your toolbar.

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.

If you want all lines to have the same line width, click the justifyfull toolbar button.

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.

Headings

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 found on the toolbar. If you want to remove the heading style, just choose "Plain text" from the format list box.

formatexample.png

Fonts

fontname.png

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.

This is a Comic Sans MS font.

This is a Courier New font.

This is a Times New Roman font.

The editor detects the font used around the insertion caret or by the selected text and updates the font list box accordingly.

Text Size

fontsize.png

To change your font size, pick one from the font size list box found on the toolbar.

This text's size is 8pt.

This text's size is 18pt.

This text's size is 24pt.

The editor detects the font size and updates the toolbar list box accordingly.

Colors

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 forecolor.gif toolbar button and pick a color from the palette by clicking on it.

colorpicker.png

The current color is displayed using a bigger square, as you can see in the previous image.

This text is written in red.

This text is written in green.

This text is written in blue.

You may also change the text background color using the backcolor.gif button. As with other text styles, you can mix text color with background color.

This text has yellow background.

This text is written in red and has a light gray background.

Remove Formatting

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 removeformat.gif button.

Creating Lists

You can create two kinds of lists:

  • numbered also called ordered because the order of the list items is important
  • 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 but 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 on the toolbar button for the type of list you wish to create: ul.gif for a bulleted list or ol.gif for a numbered list.

listcreatestep1.png

listcreatestep2.png

You can also quickly create a list from a couple of lines by selecting those lines and clicking on the toolbar button for the type of list you wish to create.

listcreatestep3.png

listcreatestep4.png

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. Typing Enter at the end of a list item creates a new empty list item.

listcreatestep5.png

listcreatestep6.png

You can create sublists by indenting list items. To do this click the indent.gif button from the toolbar. Note that you can indent just one level because a sub-list must always have a parent list. You can indent multiple list items at once though, by selecting them first. The outdent feature, outdent.gif, 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.

listcreatestep7.png

listcreatestep8.png

You can mix bulleted lists with numbered lists.

listcreatestep9.png

listcreatestep10.png

After you created the list, click on the toolbar button for the associated list type to go back to plain text.

Creating and Editing Links

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 by changing the label in the link creation process or by editing the link, the label loses its formatting (see Text Formatting). If you don't want to lose 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 will 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.

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.

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).

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.

Link to Wiki Page

To create a link to a wiki page choose "Wiki Page" from the "Link" menu.

link2wikistep1.png

First you have to select the wiki page you wish to link to. You can use the tree to browse the existing wiki pages. If you want to link to a page that doesn't exist yet, then select "Add new page (in current space)" from the tree. This doesn't create a new page, just a link to a missing wiki page.

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 matching your input. After you select the target wiki page (either by using the tree or the text box) click on the "Select" button to proceed to the next step.

link2wikistep2.png

Starting with version 6.3, the Wysiwyg editor tree uses the Document Tree Macro based on a JQuery plugin named jstree

You can edit the link parameters:

  • the link label
  • the tool tip: the text to display when the mouse cursor hovers over the link
  • if the link should be opened in a new window or not

Click on "Create Link" when you're done. You will come back to this dialog when editing a link.

link2wikistep3.png

Your link should be visible inside the editing area at this point. Try to hover the link or to edit the link label in place.

link2wikistep4.png

Link to Attachment

To create a link to an attachment choose "Attached File" from the "Link" menu.

link2attachmentstep1.png

First, you have to select the attachment you wish to link to. You can choose from the files attached to the current page or browse the wiki by clicking on the "All pages" tab. In case the current page doesn't have any attachments, click on "Upload new file"

link2attachmentstep2.png

then on "Select" in order to upload a file from your local computer. If you don't need to change the link parameters like for instance defining a tool-tip, click directly on "Create Link". Otherwise, click the "Link Settings" button.

Link2AttachmentUploadFile.png

You can also use the tree to browse wiki pages in search for the right attachment to link to. Each page has an "Attachments" child node that holds the attached files. Advanced users can use the text box below the tree to quickly search for attached files. You have use this syntax: WikiName:SpaceName.PageName@AttachmentFileName. 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.

After you select the attachment (either by using the tree or the text box) click the "Select" button to proceed to the next step.

link2attachmentstep3.png

Now you can edit the link parameters:

  • the link label
  • the tool tip: the text to display when the mouse cursor hovers over the link
  • if the link should be opened in a new window or not

Those 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.

link2attachmentstep4.png

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.

link2attachmentstep5.png

Link to Web Page

To create a link to a web page, you have to choose "Web Page" from the "Link" menu, then fill in the link parameters:

  • 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.
  • the link label
  • the tool tip: the text to display when the mouse cursor hovers over the link
  • if the link should be opened in a new window or not

Click on "Create Link" when you're done.

link2webpage.png

Link to Email

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.

link2email.png

You can use an image as the label of a link. To do this, you have to select the image and 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.

Inserting Symbols

In order to insert symbols or special characters (accented characters, trademark, currency symbol etc.) you have to follow these steps:

  1. place the caret where you would like the symbol to be inserted on or select the text that you would like to be replaced by the inserted symbol
  2. click on the charmap.gif button on the toolbar
  3. click on the symbol you wish to insert

symbolpicker.png

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.

10£

iTunes®

? ? ?r²

Inserting and Editing Images

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.

imagestep1.png

You have three ways to specify which image to insert:

  • Choose from the images already attached to the edited page. In our example, there is one image already attached to the edited page.
  • 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.
  • Upload a new image to the edited page.

Whatever option you choose, you have to click on the "Select" button to move to the next step.

imagestep2.png

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.

imagestep3.png

Before the image is inserted, you can edit the image properties by clicking on the "Image Settings" button. Here is what you can specify:

  • the image width and height on the page (i.e. how much space does the image take on the page)
  • an alternative text that is printed instead of the image when the image cannot be displayed
  • 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.
  • how is the image aligned relatively 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.

You cannot 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.

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.

imagestep4.png

You should see the image in the editing area. To select it simply click on it. Notice the resizing 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.

imagestep5.png

imagestep6.png

To delete an image, you can select it and press the Delete key or choose "Remove Image" from the "Image" menu.

To insert an external image, go to the "Image menu", choose the option "External Image" and give the path to the file. The image will be linked to the source you mention instead of being uploaded to your XWiki.

InsertExternalImage.png

Creating and Editing Tables

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.

tablestep1.png

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 will need because you can add rows and columns later. You cannot add a table header later though, so you must decide now if you need one or not. When you're done, click the "Insert Table" button.

tablestep2.png

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 to find out how you can use the Tab key to navigate through table cells. See also Keyboard Shortcuts if you cannot move the caret before or after the table.

tablestep3.png

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.

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.

tablestep5.png

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, 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.

tablestep6.png

As you can see, the new table row is empty and ready to be filled.

tablestep7.png

To delete a table place the caret in any of its cells and choose "Delete Table" from the "Table" menu.

Inserting and Editing Macros

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.

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 the Space key 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.

macroinsertstep1.png

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 ToC macro highlighted.

macroinsertstep2.png

Parameters control the behavior and the output of a macro. Some of them 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 does not 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.

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 on "Insert Macro" when you're done.

macroinsertstep3.png

In order for the table of contents to actually appear on the page, you need to start adding headings.

macroinsertstep4.png

Next, add more sections to the document and choose "Refresh" from the "Macro" menu in order to update the table of contents.

macroinsertstep5.png

The table of contents should be updated now.

macroinsertstep6.png

If you consider that the table of contents takes too much 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.

macroinsertstep7.png

Importing Office Content

The editor allows you to import content from office applications like Open Office Writer or Microsoft Word by choosing "Office Document" from the "Import" menu. 

officeimporterstep1.png

The "Filter styles" check box means that if you want the pasted text to look as much as possible as in your office application, then you should leave it unchecked. Otherwise, if you care only about the content and not the text styles then check "Filter Styles" which will result in a much cleaner document but the result may look different than in your office application. Also, we added the "Use the Office Document Viewer" option in order to allow you to import an Office file using the {{office /}} macro. This is useful if you don't plan to edit the content of the Office file after the import or in case you don't want to mix the content of the Office file with the one from the wiki page.

officeimporterstep2.png

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 on the "Paste" button from the menu toolbar. Next, paste what you have copied from the office application in the text area that you can see on the opened dialog and click the "Import" button.

officeimporterstep3.png

You should see the Office content in the editing area, inserted at the caret position or in place of the selected text. You can edit the imported content if you want.

officeimporterstep4.png

Undo and Redo

The undo function is very useful in a situation where you have made a mistake and you want to correct it fast. By clicking the undo.gif 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.

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 redo.gif 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.

          

Search this space