Editor Manual

Table of Contents

Icon toolbar
Find
Replace
Insert web link
Insert anchor
Insert link
Insert image
Insert Flash
Insert table
Insert emoticon
Insert special character
Universal keyboard

 

Icon toolbar

This is the upper part of the editor, the toolbar:

 


Icon toolbar: Icons which can perform specific editor functions, they will be discussed below:

HTML code View or edit document HTML source code (for advanced users). (In Firefox a separate window is opened with the HTML source code)
Save Will save the page, same as the save button at the bottom of the page.
Preview Preview what the HTML page will look like for users.
Template Select a layout template. The editor has three default templates delivered. A popup window appears, click on the template of your choice. Careful: current content will be lost!
Cut Remove the highlighted text.
Copy Copy the highlighted text.
Paste Paste the text you copied (with or without formatting)
Paste Paste plain text you copied
Paste Word Copy content from Microsoft Word, and paste it into the HTML editor using the pop-up accessed from this icon.
Print Print the HTML page.
Undo/Redo Undo or redo the most recent action taken.
Find / Search Find a word or phrase within the text of the HTML page. See Find
Replace Find and replace a word or phrase within the text. See Replace
Select all Select all of the text in the HTML page (usually used before copy or cut or to apply a style or format to the whole page).
Un-format Remove the formatting from highlighted text.
Bold, etc. Bold, italic, underscore (u) or strikethrough (wrong) highlighted text.
Superscript Superscript (X2) or subscript (X2) the highlighted text.
Lists Add numbering or bullets to highlighted text lines.
Indent Increase or decrease the highlighted text's indentation.
Alignment Alignment of highlighted text (left, centred, right, justified).
Hyperlink Add or remove hyperlink from highlighted text. See Insert web link
Bookmark in HTML page Make the highlighted text a bookmark within the HTML page (you can then hyperlink to it in order to help users quickly navigate to specific parts of long pages). See Insert anchor link
Insert a S@S link Here you can make an internal link in S@S. See Insert S@S link
Image Upload or insert your own or other's images into the HTML page. See Insert image
Flash Upload or insert flash file into the HTML page. See Insert Flash
Table Insert table. Number of columns or rows, and table width, height, borders, & alignment can also be set.
See for more information Tables
Line Insert divider line (horizontal rule).
Emoticons Insert emoticons (e.g. smiley faces, email icon, light bulb). See Insert emoticons
Symbols Insert symbols & special characters (trademarks, currency, etc.) See Insert special character.
Page break Insert page break. Only impacts printed version.
Non-English Online keyboard for certain non-roman character languages. See Universal keyboard
Styles & Formatting Styles & formatting determine the appearance of HTML text. You may also use the drop down boxes to style specific elements (such as headings), or set overrides for font face, font size, etc.
Text color Change the color of the highlighted text.
Background Change the background color behind the highlighted text.
About the editor Gives information about the editor version. The current version in 2.4 is Psyclonic Editor version 2.2

 

    (top)

Psyclonic Editor dialogs

Here you find all editor functions which have a popup window displayed:

Find



Type something you want to find in the 'Find what:' box and press the "Find" button, "Match case" and "Match whole word" can be checked.

Replace



Type something you want to find in the 'Find what:' box and type the replacement string in the 'Replace with:' box and press the "Replace" button, "Match case" and "Match whole word" can be checked. Clicking the "Replace All" button will replace all the occurrences of the replacement string throughout the page'

Insert web link


Here you can make a link to a document, anchor link, email. Before you can make a link, you must select a piece of text.

  1. Link type: There are three types:
    • URL: this one will be used mostly
    • Anchor in this page: use in combination with Insert anchor a list of anchors will be shown where you can choose from.
    • Email :, use for referring to an email address.
  2. Protocol: The protocol which is mostly used is http: for URL links. <other> will be used for linking to documents.
  3. URL: The URL can be typed in by hand or automatically filled in when "Browse Server" is clicked and a file is selected.
  4. Browse Server: See the resource browser picture in topic Insert image

(top)

Insert anchor


Fill in a name (for example 'top'; easy to remember when you have more than one anchor in a text) and click on 'OK'. You can use the Insert web link to refer to this anchor in a different place on your page. An "anchor" icon will be placed in the page as follows:

 


 

Insert image

When a picture is selected on your page and you press "Insert image" you will see the following popup window:
(The fields of the popup window will be empty when a new picture is being inserted)

 


Explanation:

  1. URL: The URL will be filled in automatically when an image is selected via "Browse server" button.
  2. Alternative Text: Here you can type in a text which will be shown when you go with your mouse over the image.
  3. Browse Server: For an explanation see below Resource Browser
  4. Width: When a picture is selected the width is filled in automatically, you can override it by hand.
  5. Height: Same for the height.
  6. Border: By default pictures are shown without a border, type the number of pixels you want for the border thickness.
  7. HSpace: Horizontal Space, for advanced users only.
  8. VSpace: Vertical Space, for advanced users only.
  9. Align: Here the alignment of the image can be set: e.g. Left, Right, Middle, Top etc.
  10. Preview: Small preview window with the selected image in it.
  11. OK: Press "OK" to insert the new image or to change an existing image.
  12. Cancel: To cancel your work and to go back to the editor window.

 

(top)

Resource Browser


 

  1. Resource Type: There are three resource types: Image (Insert image), Flash (Insert Flash) and File (Insert Link).
  2. Directory area: Here directories will be shown where you have access to, if any. Click on a directory to see the contents of that directory
  3. Current directory name Displays "/" for the root directory or the path to the directory where the user is now.
  4. Directory and files area: Here all directories and files are shown, click on a directory to enter that directory or click on a file to select it.
  5. Trash can icon: Delete the file of your choice. A confirmation popup windows is presented.
  6. Create New Folder A popup window to specify the new directory name is presented, click on "OK" when done.
  7. Browse: To select a file from your local computer, the complete file name will be in the input field. After this press "Upload" [8]
  8. Upload: Click on "Upload" to upload the selected file via the "Browse" button.

Insert Flash


Explanation:

  1. URL: The URL will be filled in automatically when a Flash animation is selected via "Browse server" button.
  2. Browse Server: For an explanation see Resource Browser
  3. Width / Height: Will alter the default width and height of the Flash animation.
  4. Preview: Small preview where the Flash animation is shown (When one is selected).
  5. OK: Press "OK" to insert the new Flash animation on your page.
  6. Cancel: To cancel your work and to go back to the editor window.

Insert table


Explanation:

  1. Rows: Enter the number of rows you want to have.
  2. Columns: Enter the number of columns you want to have.
  3. Width: Width can be given in pixels or in percentage.
  4. Height: Same for the height.
  5. Border size: Give the border size in pixels, 0 for no border.
  6. Alignment: For positioning your table on the page, can be Left, Centre and Right.
  7. Cell spacing: Cell spacing puts some space between the cells themselves in the table. Specify in pixels.
  8. Cell padding: Cell padding puts some space between the border of the cell and the text. Specify in pixels.
  9. Caption / Summary: for advanced users only.
  10. OK: To insert the table on the page.
  11. Cancel: To cancel your work and to go back to the editor window.

When a table is present on your page you can right click in the table and a popup menu is presented with possible table operations:

 



With this popup you can: "Insert Row", "Delete Row", "Insert Column", "Delete Column", "Insert Cell", "Delete Cells", "Merge Cells", "Split Cell", "Delete Table", Change the "Cell Properties" and change the "Table Properties".
"Table properties" is basically the same as "Insert table" window and "Cell properties" will bring up a new popup window:

 


Explanation:

  1. Width: Width of the cell can be given in pixels.
  2. Height: Same for the height.
  3. Rows Span: Here you can span rows, give the number of rows.
  4. Columns Span: Here you can span columns, give the number of columns.
  5. Word Wrap: Word wrap is the default, wich means that words will be wrapped to the next line if the cell is to small to hold the text.
  6. Horizontal Alignment: For horizontal positioning the cell contents, can be Left, Centre and Right.
  7. Vertical Alignment: For vertical positioning the cell contents, can be Top, Middle, Baseline and Bottom.
  8. Background Color: To set the background color of the cell, press select and a color picker window is presented.
  9. Border Color: Same for the border color.
  10. OK: To save the cell properties click "OK".
  11. Cancel: To cancel your work and to go back to the editor window.

(top)

Insert smiley



Just click on the smiley and it is inserted into your page where your cursor is.

Insert special character



If you go with your cursor over the characters an example is showed on the right hand corner. If you click on the character, it is inserted into your page where your cursor is. .

Universal keyboard


Explanation:
Can be used to insert Arabic, Belarusian, Bulgarian and Croatian characters.

(top)