WYSIWYG editing tool

WYSIWYG editing tool

To enrich your text or presentation, you can use the advanced functions of the WYSIWYG (What You See Is What You Get) Editor tool in many text description fields on the platform (in forums, in projects, in TCAs…).

This editor tool is available when you see a series of icons at the top of a text input area, as below:

A - List of specific WYSIWYG icons

You are probably familiar with several of these icons that you may find in various office tools (bold, italics …).
The specific icons are:


Link icon

To add a hyperlink to a selected text.

Select your text and click on the button to add a URL/hyperlink to your text.

For details see “hyperlink formatting” below.


Unlink icon

To remove an existing hyperlink from your text. Click on the link you want to remove and then click on the unlink button.


Anchor icon

To insert an anchor into your text. It is useful when you have a long description or when you want to provide a direct link into your text to a precise paragraph or section.

Click on the point you want to reach directly, then click on the Anchor button and provide a short name for that anchor (without space and only latin alphabet without accents or numbers, if possible in small letters).


Text color icon

To apply colour to a selected text. (Don’t abuse this format, as it can be tiring or difficult to read in different colours for some people.)


Background color icon

To apply a background colour to your selected text/area. (rarely used).


Quote icon

To highlight the selected text within your description, for instance to indicate a quoted text, a reference or a testimony.


HTML source icon

This button toggles your wysiwyg text into the corresponding HTML-coded version and vice versa. If you are familiar with HTML coding, you may use this facility to tune the layout of your text, but not all HTML code you would insert may be kept as, for security reason, some HTML codes are filtered out.


Paste plain text icon

This is very useful to copy and paste some text into your description without bringing in “parasite” html code or format (for instance if you copy-paste from Office tools or from another website).
1° Copy the text you want to import.
2° Click on that button “Paste as plain text”.
3° Paste (Ctrl V) your text into the pop-up window and click “OK”.


Paste Word text icon

If you want to import text and preserve some formatting from a Word document, you must use that function to avoid bringing in “parasite” html code.
1° Copy the text you want to import.
2° Click on that button “Paste from Word”.
3° Paste (Ctrl V) your text into the pop-up window and click “OK”.
4° You may re-edit some formatting afterwards, especially any links, to make sure they open in a new tab or new window (see “hyperlink formatting” below).

If you import tables into your text, please make sure the size of the table and of the columns are formatted in % - percentages - and not in centimetres or inches in your original Word document (i.e. before importing). This will avoid tables being too big for the display area.


Insert table icon

To insert a table into your description.
Avoid having too long or too complex tables.
Tables do not always display well when the webpage is displayed in a responsive mode (automatic resizing) on tablets or smartphones.


Insert Internal link icon

This function is not currently available to you. We are looking to add it in a near future if relevant.
It enables you to search for an existing webpage on the platform and then to insert it into the description directly.


Insert media icon

This a very useful function to upload pictures or attachments into your text.
See “uploading media and documents” below.



B - Hyperlink formatting
1°) to make your link open in a new tab:
After creating a hyperlink, if this link goes outside the ESF Transnational Platform, please make sure you configure your hyperlink to open in a new tab. This means the user will not lose his/her current page on the platform and can come back to it easily later.
To configure it, when you define a hyperlink, click on the tab “Target” and then select the option “Open in a new tab” in the dropdown list. Then click “OK”.


Link target for uploaded document


2° To use ananchor:
An anchor is useful when you have a long description or when you want to provide a direct link into your text to a precise paragraph or section. (see the icon “Insert an anchor” in the table above).
Once you have defined an anchor, you can use it into an hyperlink instead of using an URL.


Then choose the anchor name you defined in the list of anchors (here "linkformat" in our example) and click on “OK”.

As it is an internal link to the website, there is no need to open in a new tab.


C - Uploading media and documents
In every WYSIWYG text area, you can add pictures (media) or attach documents as well. In some cases, you have some input forms which already have a place to attach documents. In that case, it is preferable to use this already existing facility instead of using the Media button.
In the same spirit for projects, organisations, TCAs… there are already input places for the frontend picture or logo. Please use these functions instead of adding a picture into your text.

Keep in mind that:

  • Pictures are to be used for web display and have to be light enough in terms of size (kilobytes) so that they don’t block people from looking at your description if they have a slow internet access.
  • The dimensions of the pictures should not be too big so that the pictures do not display beyond the width of the page/screen; and so that they display well on smaller screens like tablets or smartphones.

Please make sure that the filenames of your pictures or documents respect the following guidelines:

  • no space
  • only numbers, hyphen, underscore or simple Latin alphabet (no accents or diacritical letters)
  • no special characters like: @ # “ ‘ ( ! § ) $ € £ % = + , : ; ? / ˜
  • if possible only small letters.

To insert a picture or a document in a description:

  • Click in your text at the place you want to insert the media
  • Click on the “Media button” and follow the steps:

1° - select the file to insert.

You can select it from your computer by uploading a new file and click on “upload”. Or, you can as well browse the existing files on the webserver using the tabs “Library” or “My files”.

2° - After selecting or uploading the file

Check it is the right file and then click “Next”

3° - Private or Public ?

In most cases your file should be public, if not, it may be not visible to most users.
The “Private” option may be used in private forums if members of that forum want to make sure that the link to that file can only be accessed by users who are member of that forum. This case should be rare in our case.
Keep the “Public” option which is proposed by default and click “Next”.

4° - Possibility to add meta information to the media

The Alt text and the Title text can be useful for impaired vision users. It may also be used to display the corresponding text before the picture is fully loaded.
Fill in the fields as relevant. Then click “Next”.

5° - Checking the info

Display mode as WYSIWYG

This final screen displays the picture and the corresponding supplementary texts. If you want to display text around your picture later on (mainly by side, left or right), please make sure to choose the display mode as "WYSIWYG" (if not, the image may be truncated or not displaying correctly). When everything is fine, then click “Submit”.
Then the media is inserted into your description.


6° -  Some formatting may still be needed!
When you insert a picture, this picture may be too big or you may also want to have your text displayed at the side of the picture.
You can tune the display format of the picture by double-clicking on the picture. A pop-up window on the properties of the picture is displayed:

a) Resize dimensions
Under “Width” and “Height” you can resize the dimensions of your picture to display better with your text or depending on the size of the screen. (it will not modify its weight or effective size).

b) Alignment
The most usual way is to choose “Left” (the picture appears to the left of the paragraph) or “Right” (the picture is displayed to the right of the paragraph). Please make sure to choose "Display as WYSIWYG" when you insert the image in your text (see point 5 above).
You also may leave it to “Not set” and skip lines if you want your picture to appear with text only above and below.
The Preview window with “Lorem ipsum” text gives you an idea on how the picture and the text will be aligned.

c) HSpace and VSpace
you may indicate a value in pixels to provide an blank space around the picture, for instance 3 px or 5 px. This may be useful is your picture has dark surroundings or if you have text immediately to the right or to the left of the picture.

d) You can also add a hyperlink to your picture by using the tab “Link”.

Click on “OK” when you have formatted your picture as desired.

Don’t forget to save / publish your work!!