From SMW+ A Semantic Web Enterprise Wiki

This article describes the WYSIWYG editor interface and gives details on how to easily format text with it. It also mentions how to use pre-defined formats and style and how to insert links, lists or already formatted text.

User manual information
Applies to version: Help:SMW+ 1.5.3,
Note: Use the tree-view on the right hand side to navigate in the documentation

Help out! You feel that the documentation needs a cleanup or misses information? Report a quality issue List of issues for this article: [open in bugzilla]

Text formatting determines how your text is presented to the reader. There are some sections that you would wish to highlight to the users to give specific attention. Formatting an article makes the reader get the information you wish to give easily using optical means such as putting keywords in bold others in italics, some underlined or even highlighted in the desired color.

The WYSIWYG editor has a wide range of formatting options which we mention and describe in this article.

Contents 1 Why use the WYSIWYG editor? 2 WYSIWYG editor interface 2.1 The Toolbar 2.2 The editing area 2.3 The context menu 2.4 The elements path 3 Formatting the font type, font size, alignment, indent and color 3.1 Changing font and font size 3.2 Formatting text in bold, italic, underlined or strike-through 3.3 Text alignment and indentation 3.4 Using colors 3.5 Using Subscript and superscript 4 Using predefined formats and styles 4.1 Formatting headings and text with predefined formats 4.2 Using predefined Styles 5 Working with links 5.1 Adding internal links 5.2 Adding external links 5.3 Editing and deleting links 6 Working with lists 6.1 Creating numbered lists 6.2 Creating bulleted lists 7 Pasting formatted text 7.1 Copying and Pasting from MS Word 7.2 Pasting a table from MS Excel 7.3 Pasting as plain text 7.4 Pasting source code

Why use the WYSIWYG editor?

If you have edited custom wikis, you know that formatting requires one to learn the syntax. The WYSIWYG editor makes editing and formatting easier since all what you need to do is mostly to select some text, then click a corresponding button - the editor actually then appends the syntax for you.

So if you wish to highlight a section of your work in green, you just can easily select the words and easily press the corresponding background color button button instead of entering this:

<span style="background-color: rgb(200, 0, 0);"><span style="color: rgb(0, 0, 0);">highlight a section of your work in green</span></span>

This is not only time saving, but convenient, in addition to giving newbie's a formatting tool which allows easy formatting of articles without necessarily having to learn the wiki- syntax.

WYSIWYG editor interface

The WYSIWYG editor interface is similar to word processing editors such as Microsoft Word or Open Office, and contains the following elements:

• The toolbar
• The editing area
• The context menu and
• The elements path

The Toolbar

Each icon of the toolbar lets you access a different function. If you hover your mouse over a icon, it is highlighted and some information about the function of the highlighted icon is displayed.

If you click the left mouse button inside the editing area, the toolbar will highlight the icons that the selected object has assumed. For example, if you do this on a word or section that is in bold and underlined, the respective bold and underline icons will be highlighted.

Notice that the "text alignment left" icon has been highlighted in the toolbar screenshot below.

For more detailed information about the toolbar, its icons and the functions of these buttons, please refer to this article: Description of the WYSIWYG editor

The editing area

The editing area is the space where you can freely type in your text and format your document as you wish. If your document is longer than the designated editing area, some text will be hidden and a scroll-bar will appear letting you scroll up and down to view your entire document.

You can modify the size of the editing area. To do this, move the mouse to editing area's lower right corner, and press and hold the left mouse button thereby adjusting the area to your desired size.

The context menu

The context menu appears whenever you click the right mouse button inside the editing area.

The context menu will always offer the cut, copy and paste options. In addition to this, it will offer you other options in line with the chosen object or section. For example if you choose a section that is in a table, the context menu will give you the options that are related to formatting a table such as cell, row and column options. The same way, if you for example click on a link, you will get the edit link and unlink options as seen in this screen-shot where a link has been selected.

Some of the functions may be disabled. For example, the cut and copy options will be disabled if there is no text highlighted.

The elements path

The elements path section is located at the lower left corner of the editor as seen on the screenshot. The elements path always shows the hierarchy of HTML elements for the element that is currently selected in the document. You have the option of selecting the entire content of each HTML element by clicking the element in the elements path.

Example: A click on “li” would select the whole content of the actual list entry: "Unordered list: second entry"

Formatting the font type, font size, alignment, indent and color

Text formatting determines how your text is presented to the reader and how your text will display in your document. The WYSIWYG editor lets you make your text look better, much more presentable and catchy to the eye easily and fast.

It has a wide range of valuable formatting functions such that you can select your desired font from a wide range of choices, choose the font size, highlight keywords or paragraphs or even activate sub- or superscript, just to name but a few.

Changing font and font size

You can change the font and the font size for every single character or word of an already written paragraph or you can change the font before you start typing your text.

• To change the font or the font size of an already existing text, select the word(s) or paragraph(s) you want to change and choose your desired font or font size from the respective drop-down list.

• To select the font or the font size before writing, place the cursor to the position you want to write and choose the font or the font size like explained above. The text that you type will have the desired formatting.

You can see a preview of the possible fonts or sizes in the two drop-down lists before selecting them so that you exactly see how they would look like in the article.

The WYSIWYG editor has the following fonts: Arial, Comic Sans MS, Courier New, Georgia, Lucida Sans Unicode, Tahoma, Times New Roman, Trebuchet MS and Verdana. The font size range is from 8 to 72.

The default font is Arial.

Formatting text in bold, italic, underlined or strike-through

You may highlight some words or paragraphs of your text by using the bold, italic and underlined or strike through options.

To do this, select the word(s) or paragraph(s) you want to highlight and:

• click the bold button , to have your selection in bold,
• click the italic button, to have your selection in italic,
• click the underline text button, to underline your font or
• click the strike through button , to strike a line through the selected text .

Text alignment and indentation

You can align each paragraph of your text in various ways. This is also known as justifying and the editor has the following justify options:

• click left justify button , to align your text to the left
• click center justify button , to align your text such that it occupies the central display area
• click right justify button , to align your text to the right
• click block justify button , to align and adjust your text length such that all the lines have the same length and consequently start and finish at the same level in the display area.

Indentation defines the space between the beginning of a block-level element and the left margin.

• to increase the indent of the paragraph in which the cursor is located, click the increase indent button or
• to decrease the indent, click the decrease indent button .

Note that you can only decrease the indent if it was increased at least one time before. This button will otherwise be greyed-out and deactivated.

Using colors

Colors are generally desired, recognized and interpreted by the human eye differently. Green for example is interpreted as something that may be done, while red is often associated with danger. You can use these aspects to portray your ideas using color accordingly.

Adding color to your article not only highlights your ideas, but also makes your article more appealing to the reader. The editor lets you use colors either by changing the text color or by changing the background color.

1. Edit your article in the WYSIWYG Edit mode.
   • To modify the text color , click the text color button
   • To modify the background color, click on the background color button
       Note:

     In both cases a color selection menu will open-up
2. Choose your desired color from the color selection menu which has 40 different colors. If you move over a color with the mouse, its name will be displayed.
   

   

   The color selection menu
3. If you do not find your desired color amongst the 40 colors above, click on the "More Colors..." pane which in-turn opens a dialog box similar to the one below with more diverse colors.
   

   

   Select color dialog box
4. Choose your desired color from over 200 different color tones and even compare a color with the last selected color from the "highlight box". Every color has its RGB color code. If you know the color code of the color you wish to apply, enter it in the designated "Selected color" box for example as #99ff00 or rgb(255,153,0).
5. Select the desired color,
6. Press "OK" - this will close the dialog box and apply your choice.
7. To exit the select color dialog box without making any choice, press the "Cancel" button or the "X" button - This again closes the dialog box, this time without making any change.
8. To clear a chosen color, press the "Clear" button - the highlight box and the selected color box will now not have any color.

Using Subscript and superscript

Subscript and superscript are usually used for formulating mathematical or even chemical formula and equations.

• Subscript puts an index below a letter or a number. The subscript has a smaller font than the normal text and it is aligned slightly below the previous character.
  To use subscript, click the subscript button .

  Example

  S = A₁ +A₂ +A₃

• The superscript puts an index above a letter or a number. The superscript has a smaller font than the normal text and it is aligned slightly above the previous character. It is usually used in mathematical equations to write the "to the power of" function or even in chemical equations to add the oxidation number or charge.
  To use superscript, click the superscript button .

  Example

  S = X² +Y³ +C⁴

• To combine Subscript and superscript use the respective buttons accordingly as described above.

  Example

  2 Fe²⁺ + H₂O₂ + 2 H⁺ → 2 Fe³⁺ + 2 H₂O

Using predefined formats and styles

The WYSIWYG editor includes some predefined styles and formats which are automatically highlighted or justified. You can commit styles to single characters, words or whole paragraphs. Formats can only be applied to entire paragraphs or HTML elements. The predefined formats and styles help you to keep the presentation of the text uniform. You can use them by clicking the respective format or style from the drop-down menu (Styles or Format).

Formatting headings and text with predefined formats

This formatting menu lets you structure your articles by letting you format sections and subsections of your article in line to the context of the various sections.

A typical application of this feature is this article. Notice that there are sections and subsections which have been formatted uniformly.

Formatting with the heading levels creates a table of contents which you might display if you so wish.

To format the headings click on the Paragraph Format menu and select the desired heading level or format from the Paragraph Format dropdown menu similar to the one below:

In addition to the "Normal" format which is applied to the unformatted text, there are six headline formats "Heading 1" to "Heading 6" and two special formats: "Formatted" and "Normal (DIV)".

• Using the "Formatted" function results to some text which is separated from the rest and it looks like a software code. This function is actually mostly used to quote parts of software code and similar text.

Example:

Some text in Formatted format - this is usually used for documenting software code and such.

• The "Normal (DIV)" function results in some text that also has a smaller space between lines.This may be especially of use if you want to format an physical address.

The different formatting names are displayed in a format that they represent, giving you a preview of what the text will look like. This helps you make your choice easily.

In some cases you might not wish to use the style that is in a certain heading level - maybe you found it to be too big or too small.

You may go around this in two ways:

• You may leave out some headings in hierarchy - if you for example only wish to use "Heading 2", "Heading 4" and "Heading 5"," Heading 2" will automatically gets the first position in the hierarchy. The undesired "Heading 1" one will be omitted.

• You may also commit the headings to paragraphs and then format them manually using different font size and format as described in the formatting the text font subsection. Be careful to keep your headings uniform.

Using predefined Styles

If you click on the "Formatting Styles" menu , a drop-down menu appears showing you all available styles.

Three different styles are available:

• Object Styles are related to the selected object (available for lists, tables or images)
• Block Styles concern the whole paragraph
• Inline Styles concern only the selected content inside a paragraph

Some Inline Styles are related to the previous formatting of the selected content. For example Big does not always give the same result. The selected content gets bigger in relation to how big it was before. So a word in a heading stays bigger than a word in a normal paragraph if both get the style Big. You can also mix up some Inline Styles which are not regulated by each other. For example you can style words with Marker:Green and Big.

Working with links

Adding internal links

An internal link allows you to link to another section on the same web page or article. If you wish to add an external link -a link to another website, go to the adding external links subsection of this article.

You can add internal links with the article name as the link name or with some alternative test as the link name. Let's say you want to link to an article that has the name "Berlin".

You are adding a link with the articles name as the link name if you for example want the link to appear in the text as: Maria is going to Berlin

You are adding a link with alternative text as the link name if you for example want the link to appear in the text as: Maria is going to the capital city of Germany.

To add an internal link to with the articles name as the link name

1. Place the mouse on the position where you want to add the link
2. Click on the link button - this opens the Mediawiki dialogue box.
   

   

   Mediawiki dialogue box
3. Type in the name of the article you want to link as it is stored in the wiki in the "Define the wikipage for the link target:" entry box - as you do this the content of the "Choose an existing wikipage for the link target" box will change and you should see the name of your desired article.
4. Select the page and click "OK" - the chosen page will be linked and its name will be used as the link.

To add an internal link to with alternative text as the link name

1. Select the word(s) that are relevant to the link you want to add.
2. Click on the link button - this opens the Mediawiki dialogue box.
   

   

   Mediawiki dialogue box
3. Type in the name of the article you want to link as it is stored in the wiki in the "Define the wikipage for the link target:" entry box - as you do this the content of the "Choose an existing wikipage for the link target" box will change and you should see the name of your desired article.
4. Select the page and click "OK" - the chosen page will be linked with the alternative text chosen in step 1.

Adding external links

An external link allows you to link to web pages that are outside your wiki.

To create an external link

1. Select the word(s) that are relevant to the link you want to add or place the cursor to the position where you want the external link to appear.
2. Click on the link button - this opens the Mediawiki dialogue box.
3. Type in the web address of the page you want to link as: http://... in the "Define the wikipage for the link target:" entry box - this time no pages will be searched.
   

   

   External link
4. Click "OK" - page will be linked with the alternative text or with its web address depending on the choice made in step 1.

Editing and deleting links

To edit a or delete a link from your text:

1. Position the cursor inside the link
2. Click on the "Link" button - the Mediawiki dialogue box appears again and you modify your link make your changes.
3. Press "OK" save your changes.

To delete a link:

1. Place the mouse cursor inside the link
2. Click on the "Unlink" button - the link is removed.
   
     Note:

   You can also edit or delete a link using the context menu.

Working with lists

Creating numbered lists

Numbered lists come in handy if you let's say want to group items which need to appear in a particular consecutive order, for example when you are writing step-by-step instructions.

To create a numbered list:

1. Position the mouse to the place where you want to add the numbered list or select consecutive lines that you want to form a list.
2. Click the "Insert/Remove Numbered List" button on the toolbar. The numbered list marker will appear at the beginning of the line and the text will be indented.
3. If you want to add further list items, press Enter on your keyboard. The cursor will move to the next line with a list marker placed at its beginning.
4. To end the numbered list press the now activated "Insert/Remove Numbered List" button again and go back to normal text (notice that this time it was marked as active prior to this step).

Modifying the Numbered List Properties

You can alter the properties of a numbered list with the context menu to fit to your needs.

To do this:

1. Place the mouse inside a numbered list (the numbered list should now be activated )
2. Click the right mouse button - this should open a context menu with "Numbered List Properties" as one of the options.
   

   

   Numbered List Properties
3. Click on "Numbered List Properties" this opens up the following dialog box
   

   

   Numbered List Properties
4. Define the value of the starting number(sometimes you may wish to start at other levels other than 1)
5. Select the "Type" - this determines whether your list is displayed in Lower Roman, Upper Roman, Lower Alpha, Upper Alpha or Decimal types as seen below (notice that the Upper Roman list starts at level 4).
   

   

   Numbered List Properties
6. Click "OK" to exit "Numbered List Properties" - your list will now be formatted as desired

Creating bulleted lists

Bulleted lists are useful when you want to group items which do not need to appear in a particular order, for example equal participants of a meeting.

To create a bulleted list:

1. Position the mouse to the place where you want to add the bulleted list or select consecutive lines that you want to form a list.
2. Click the "Insert/Remove Bulleted List" button on the toolbar. The bullet list marker will appear at the beginning of the line and the text will be indented.
3. If you want to add further list items, press Enter on your keyboard. The cursor will move to the next line with a list marker placed at its beginning.
4. To end the bulleted list press the now activated "Insert/Remove Bulleted List" button again and go back to normal text (notice that this time it was marked as active prior to this step).

Modifying the Bulleted List Properties

You can alter the properties of a bulleted list with the context menu to fit to your needs.

To do this:

1. Place the mouse inside a bulleted list (the bulleted list should button should now be activated )
2. Click the right mouse button - this should open a context menu with "Bulleted List Properties" as one of the options.
   

   

   Bulleted List Properties
3. Click on "Bulleted List Properties" this opens up the following dialog box
   

   

   Bulleted List Properties
4. Select the "Type" - this determines whether your list is displayed with Circle, Disk or Square bullet types
   

   

   Types of bulleted list markers
5. Click "OK" to exit "Bulleted List Properties" - your list will now be formatted as desired

Pasting formatted text

One may sometimes find it convenient to copy some pre-formatted text from a website or a document.

The WYSIWYG editor offers you the options of copying and pasting text while preserving the basic formatting or pasting the text without preserving its format.

Copying and Pasting from MS Word

To paste a text fragment with formatting:

1. Copy and paste the text into a Word document.
2. Copy section you wish to paste to your clipboard
3. Go back to the WYSIWYG editor
4. Place the cursor on the position where you want to paste the formatted text
5. Now click on the "Paste from Word" button on the toolbar. At this level, two scenarios might occur:
• Scenario 1 - Based on your browsers security settings, you may be allowed to access your clipboard and paste directly using the  Ctrl +  V key combination. In this case Paste the text.
• Scenario 2 - Based on your browsers security settings, you may NOT be given access your clipboard. In this case a "Paste" dialog box will open up informing you about this.
  

  

  Paste dialog box
  • Paste your text to the entry field using the  Ctrl +  V or  Cmd +  V key combination as prescribed.
  • Press "OK".

Your text and its format is now applied to your article.

This function preserves formatting in the form of bold text, text on italics, indentation, paragraph alignment, lists or heading levels. You can also adopt formatted tables or a text with images. The WYSIWYG editor will insert placeholders for every image preserving their position and their captions in this case. If you want to insert the images, you first have to upload them.

Pasting a table from MS Excel

You can also use the "Paste from Word" button on the toolbar to paste a table from MS Excel. Therefore, just copy the cells you want to paste within your Excel file. Then repeat the steps from the pasting from MS Word section.

You may not adopt the formattings from your Excel file, but the WYSIWYG editor automatically creates a new table and every cell you have copied (also the blank ones) will be inserted on the right position. Afterwards you can edit the style of the table with the WYSIWYG editor.

Pasting as plain text

If you wish to paste some pre-formatted text without preserving the formatting you can paste it as as plain text. To achieve this:

1. Copy the formatted text to the clipboard
2. Click on the "Paste as plain text button".The text will be inserted to your article losing all its previous formatting.
   
     Note:

   Again, if direct access to clipboard is blocked, you will be asked to paste the text into the Paste dialog window using the  CTRL+ V keyboard shortcut as mentioned above.

Pasting source code

To paste some HTML or wiki code:

1. Click on the "Source" button - this switches the to the wiki code view mode.
2. Paste the code using the context menu "paste" option or the  CTRL+ V key combination.
3. Click "Source" button again to get back to the WYSIWYG view (notice that it is activated at this level).

Copyright © 2012 (see terms of use for ownership)

Permission is granted to copy, distribute and/or modify this document under the terms of the GNU Free Documentation License, Version 1.2 or any later version published by the Free Software Foundation; with no Invariant Sections, no Front-Cover Texts, and no Back-Cover Texts. A copy of the license is included in the article "GNU Free Documentation License".