How to use the WYSIWYG editor

When creating a new note (public or private) you will need to insert the desired information. After you indicate the Title, the language (Italian or English), you can start inserting the actual content in a graphical editor. The lower part of the screen allows you to indicate the keywords identifying the area for the information you are creating and you can upload attached files.

In order to indicate the keywords, type in at least the three letters of the keyword and the system will search and propose you the existing keywords containing that letter sequence (the existing keywords are shown on the left menu as well, helping in getting to the associated information). If the keyword you are interested is not in the list, just type in the provided space the full keyword and the system will create the new keyword automatically when you save the content. It is possible to have more than a keyword for a content, just separate them by comma (such as keyword1, keyword2, keyword3, keyword4).

The attached files allows you to insert documents (such as PDF, DOC, DOCx, PPT, PPTX, XLS, XLSX) at the end of the information. For each file you can provide a  description and choose wheter or not to show the link for it's download at the end of the page. The uploaded files selected to be visible will be shown at the end of the web page, with their desription (please provide a description for the file in order to simplify identifying it's content). The files uploaded this way will be placed in a separate directory for each public or private note. 

The graphical editor allows you to insert the desired content in a WYSIWYG manner. In the figure 1 you can see the typical aspect of the TinyMCE editor, used by the site:

TinyMCE graphical editor.

Figure 1: TinyMCE graphical editor

When you pass with the mouse over the different icons a small description is shown. Some are easy to understand: Bold, Italics, Underline, Strikethrough, Align left, center, right and justify, Bullet List, Numbered list, Decrease and Increase indent, Undo, Redo, Superscript, Subscript, Insert Horizontal line (simple), Copy, Paste, Paste as Plain Text, Paste from Word (maintains the formatting and automatically cleans the generated HTML code), Preview (open a new windows showing the inserted content), Find and Find/Replace (both pop-up a new window allowing to search for text and automatically replace it if necessary). For other icons a brief description is provided below.

Managing links in the content

If you need to insert a link to external content you can use the Insert/Edit Link button - Link button. You muse first select a text/picture and afterwards click on the icon. It will open a small window (see figure 2) where it it possible to fill in the desired link URL, where to open this URL when the user activates it (Target) and the link description (Title - it will show up when the mouse passes over the link). Other advanced properties of the link can be modified in the Popup, Events and Advanced sections, but it is better not to change them unless you have good HTML knowledge.

Link popup window

Figure 2: Link popup window

If you want to insert a link to a file already existing on the site or upload a new file, instead of filling in the link URL you have to click the Browse icon on its right - Browse icon. It will open a window for browsing between the file of the site (see below the part on the management of the files). You can select a file and its URL will be automatically compiled as the Link URL

If you want to insert a link to a content of the site (such as a note), you can use the Linkit icon - Linkit icon. It will open a popup windows, similar tofigure 3, allowing you to search for a content and insert its URL. Just type inside the search field a few letters and the system will show you all content containing the specific letter sequence (as shown in figure 4). Select one of the results and its link will be compiled in the Target Path and close the popup by clicking on the Insert link button. This is the only supported way for inserting links to generated content, links inserted in this way will remain valid even if there will be in the future various site changes (change of path to generated content, move of site to another server and other similar operations). It reccomended not to manually insert a link to a desired page (such as https://intradet.polito.it/category/wifi ) since such links might not work in the future.

Linkit window

Figure 3: Linkit window

Linkit window with results

Figure 4: Linkit window with results

For changing an existing link you have to use the Insert/Edit link icon - Link button (this is true even for links created with the Linkit icon, it might be simpler to remove the link and reinsert it by using the Linkit icon instead of modifying it). 

To remove an existing link you have to use the Unlink icon - Unlink icon

Inserting media (pictures, video)

In order to insert a picture you have to use the Insert/Edit Image icon - Insert/Edit Picture. A window similar figure 5 will open, allowing you to specify the URL for the image, the image description (it is recomended to insert one, in case you leave it blank a warning will remind you this) and the title (show up when  the mouse is over the image). Other properties of the picture can be modified in the other Other advanced properties of the picture can be modified in the Appearance and Advanced sections, but it is better not to change them unless you have good HTML knowledge.

 

Insert image window

Figure 5: Insert image window

Linkit window with results

Figure 6: Linkit window with results

If you need to insert a video or animation you have to use the Insert/Edit Embedded Media icon - Insert/Edit Embedded Media icon. It will open a window as the one in figure 6 and you will be able to indicate the Type of the media (you can choose from: HTML5 video, HTML5 audio, Flash, QuickTime, Shockwave, Windows Media, Real Media and IFrame), the URL of the media and the dimensions of the content. Here too it is possible to change advanced properties from the Advanced and Source sections, but it is recomended to not change them.

Both in case of pictures and for embedded media it it possible to select a file already on the server or upload a new one by using the Browse icon on the right of the URL - Browse icon. It will open a window for browsing between the file of the site (see below the part on the management of the files). You can select a file and its URL will be automatically compiled as the Link URL

Management of files

Each user automatically gets a private directory (with the own mail address as the name of the directory) for uploading various files to the server (there are quotas for the maximum size of a single file and of all files uploaded by a user, as well as on the number of directoryies a user can create). For managing those files you have to use the Browse icon (found on the Insert/Edit link, Insert/Edit Image and Insert/Edit Embedded Media windows) - Browse icon. It will open a separate window shown in figure 7 which will allow you to navigate through the existing directories on the server (on the left), view files in the directory (on the right), preview files (selecting a file on the right it's preview will be shown in the bottom part) and select an existing file (Insert file button - Insert file) in order to insert automatically it's URL as the link, image or embedded media URL. Inside your own directory you will have more buttons showing up, allowing you to upload a new file (Upload button - Upload file), create thumbnails (Thumbnails button - Thumbnails button), delete an existing file (Delete button - Delete button), resize an existing image (Resize button - Resize button) and create a new directory (Directory button - Directory button). The thumbnails, delete and resize buttons are acting on the currently selected file on the right. The thumbails and the resize use a high compression procedure leading to a quality of the generated pictures which is not very high, so it is recomended to directly upload the content directly in the desired size wheneve possible. There are some indications on the use of the own directory (number of files in current directory, their total size on disk and quota).

File browser

Figure 7: File management window

The use of the file management is recomended for the content inserted inside the public or private notes created. For content that the users should download (such as modules for examples) it is recomended to upload them using the file upload facility when creating the public or private note. This will allow insertind a description and will automatically generate a list with the attached files at the end of the content. You can howerver select on of the attached files and insert it's URL as a link. For that you have first to creare the note (public or private), upload the attached content and save the note. Open it for editing again and use the file management browser to navigate to <root>\public\notes\Title of public note or <root>\private\notes\Title of private note and directory select the desired file.

The file management window remembers the directory you last worked into and automatically show its content on next use. You personal directory path is <root>\users\Your email address in case you need to find it. 

Tables

You can insert and manage tables by using the Insert/Edit table icon - Insert/Edit table icon. It will open a window like the one in figure 8, allowing you to insert the desired number of Columns and Rows for the table and configure some others properties (cell padding and spacing, alignment, border, width and height of the table, eventually the Table Caption). Other advanced properties are available in the Advanced section, but it is better not to change them.

Table window

Figure 8: Table window

After the table is inserted you can click inside the various cells to insert content inside. In an existing table it is possible to change its properties (using again the Insert/Edit Table icon) ot the properties of a row or column (with the Table Row Properties - Row propertiesand respectively Table Cell Properties - Cell propeties). It is possible to insert a new row before (Insert Row Before - Insert row before) or after the current one (Insert Row After - Insert row after) and to delete the current row (Delete row - Delete row). Similar operations are possible on the columns: Insert Column Before - Insert column before, Insert Column After - Insert column afterand Delete Column - Delete column. You can merge (Merge Table Cells - Merce cells) and split (Split Merged Table Cells - Split merged cells) them if necessary.

Other considerations

The system automatically allows you to create new public and private notes, modify and delete the ones you created. You cannot change or modify public or private notes created by another user, unless you were specifically authorized to do that. You can leave comments on the notes of other persons (and other persons can leave comments on your content). When there is a new comment for one of the public or private notes you created you will receive an automatic email.

 

For any problems please fell free to contact Florin Bota.