Editors

Content

1. Introduction
2. FCK editor
    2.1 Menu bar
    2.2 Find
    2.3 Replace
    2.4 Insert web link
    2.5 Insert anchor
    2.6 Insert S@S link
    2.7 Insert image
    2.8 Insert Flash
    2.9 Insert table
    2.10 Insert emoticon
    2.11 Insert special character
    2.12 Universal keyboard
3. HTMLarea editor
4. Plain text editor

1. Introduction

There are three editors in Site@School:
  1. FCK editor.
    This is the new default editor in 2.4. This is a full featured editor, and is compatible with most internet browsers which include: IE 5.5+ (Windows), Firefox 1.0+, Mozilla 1.3+ and Netscape 7+.
    See the projects website http://www.fckeditor.net/
  2. HTMLarea editor.
    NOTICE: The HTMLarea project has ended, so no more support is available. The editor is left in for backward compatibility.

    This is a full featured editor, usable under Linux with Mozilla 1.3.1 and higher, Firefox 1.0 and higher. Also under Windows with Firefox 1.0 and higher, Internet Explorer 5.5 and higher and Netscape 7.1 / Mozilla 1.3 and higher.

  3. Plain text editor
    This is an editor where you have to use plain HTML to markup a page. It's useful for complicated editing, for using tags that are not available in the other editors and, last but not least, for learning HTML.

The first and the second editors are both WYSIWYG (What You Will See Is What You Get) editors and operate more or less like a word processor.
Their main functions are:
- Adding text, images, links, etc. to pages on the site and to pupils' pages.
- Uploading material from your computer to directories on the S@S server.

We will now describe every editor in detail:

(top)

2. FCK editor

NOTICE: The FCK editor is used in several places in Site@School: Pagemanager, News module, Newsletter module and as Pupil/Teacher/Project editor. The functionality is the same all 4 places, the only exception is the Pupil/Teacher/Project editor which will work from their own user directory on the server. All other editors will get their files from the ../starnet/media directory.

Before you can use this editor, you must be sure it is enabled in Configuration > Personal settings.
Open the editor by going, for example: Pagemanager > Some section > Some page.
When the steps described above are unfamiliar to you, consult the Page Manager chapter.
You will see:

[ ]
guidtour_fck_editor.png

You can distinguish three sections:

  1. The menu bar with the editor's functions.
  2. The working area where you can put in texts, images, links, etc.
  3. The bottom section where the save and cancel button are located.

We will now cover each item in detail.

2.1 Menu bar

This is the upper part of the editor, the menu bar:


editor_fck_menu_bar.png

Explanation:

  1. Title: The title you previously gave to the page.
  2. Category: Categories are a subdivision of sections and can be used to optimize page management in case you have many pages under a section. Also useful when you use a (derived) template like the category template.
  3. Order: The number in the vertical row of pages in a section.
  4. Section: Here you can change the section where your page will be visible. This feature allows easy reorganizing your pages on the site. Use the drop down menu to choose a different section.

    NOTICE: This function is not available in the pupil's editor.

  5. Template: Here you can load pre-defined html templates, they must be stored in ../starnet/media/templates and the files should be named as *.html or *.htm. This can be a useful feature to have a pre-defined layout which you want to use on several pages on your site.

    NOTICE: When a template is loaded via this option then the complete current content is lost!
    NOTICE: When this directory does not exist or is empty this option will not be shown.

  6. Invisible: Check this box to make the page invisible.
    This function enables you to add pages to pages, i.e. link the pages in the left vertical row of pages to other pages on the site, which pages can also be links, etc.
    This is one of the most used features in Site@School. It enables you to have numerous pages on the site with only a small number of visible pages. See also: 2.6 Insert S@S link.
    You can also use this feature to 'turn off' pages that are only occasionally needed, or use it when a page has a long time of preparation.
  7. 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.
Search Find a word or phrase within the text of the HTML page. See 2.2 Find
Replace Find and replace a word or phrase within the text. See 2.2 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 2.4 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 2.5 Insert anchor link
Insert a S@S link Here you can make an internal link in S@S. See 2.6 Insert S@S link
Image Upload or insert your own or other's images into the HTML page. See 2.7 Insert image
Flash Upload or insert flash file into the HTML page. See 2.8 Insert Flash
Table Insert table. Number of columns or rows, and table width, height, borders, & alignment can also be set.
See for more information 2.9 Tables
Line Insert divider line (horizontal rule).
Emoticons Insert emoticons (e.g. smiley faces, email icon, light bulb). See 2.10 Insert emoticons
Symbols Insert symbols & special characters (trademarks, currency, etc.) See 2.11 Insert special character.
Page break Insert page break. Only impacts printed version.
Non-English Online keyboard for certain non-roman character languages. See 2.12 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 S@S 2.4 is FCK editor version 2.2

(top)

FCK editor dialogs

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

2.2 Find


editor_fck_find.png

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.

2.3 Replace


editor_fck_replace.png

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'

2.4 Insert web link


editor_fck_insert_link.png

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:
  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 2.7 Insert image

(top)

2.5 Insert anchor


editor_fck_insert_anchor.png

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 2.4 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:


editor_fck_anchor.png

2.6 Insert S@S link


editor_fck_insert_sas_link.png
Explanation:
Click on the section where your pages are located and then click on the page for which you want to have the link. Click "Cancel" when done.

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


editor_fck_editor_image_properties.png

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

2.7.1 Resource Browser


editor_fck_resource_browser.png

  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.

2.8 Insert Flash


editor_fck_insert_flash.png

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

2.9 Insert table


editor_fck_insert_table.png

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:


editor_fck_table_popup.png

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:


editor_fck_table_cell_properties.png

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)

2.10 Insert smiley


editor_fck_insert_smiley.png

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

2.11 Insert special character


editor_fck_special_character.png

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

2.12 Universal keyboard


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

(top)

3. HTMLarea editor

Before you can use this editor, you must be sure it is enabled in Configuration > Personal settings.
Open the editor by going to, for example: Page manager > Some section > Some page. When the steps are unfamiliar to you, consult the 'Page manager' chapter.

NOTICE: The HTMLarea editor is no longer supported or maintained in Site@School because this project has ended. Therefore the pupil editor is now using the FCK editor.

The text editor has a menu bar. When opening a page, you will see:

[ ]
editor_ht_menu_bar.jpg
Explanation:
  1. Title: The title you previously gave to the page.
  2. Category: Categories are a subdivision of sections and can be used to optimize page management in case you have many pages under a section. Also useful when you use a (derived) template like the category template.
  3. Order: The number in the vertical row of pages in a section.
  4. Section: Here you can change the section where your page will be visible. This feature allows easy reorganizing your pages on the site. Use the drop down menu to change the section.
  5. Font: Open the menu and choose a font.
  6. Size: Open the menu and choose a font size. Remember: To enable font sizing by the client's browser, do not choose a font size under 3.
  7. Heading: Open the menu and choose the heading of your text.
  8. Bold: Press the 'Bold' icon to make a piece of text bold. This can be done when writing at the beginning and end of a bold text. Also the bold icon can be used by making a marked piece of text bold.
    Keystrokes: By simultaneously pressing the 'Control' key and another key you can without your mouse. Here is a list: - [Control-b]: bold
    - [Control-u]: underline
    - [Control-i]: italics
    -[Control-s]: strikethrough
    - [Control-a]: select all
    There must be more possibilities. They are not yet found. Please find them.
  9. Italic: Same as above to italicize text. See key combinations.
  10. Underline: Same as above to underline text. See key combinations.
  11. Remove formatting: Here you can select a piece of text and remove all HTML tags from it.
  12. Strikethrough: Same as above to strike through text. See key combinations.
  13. Subscript: Same as above to subscript text
  14. Superscript: Same as above to superscript text
  15. Insert special character: Clicking on the icon brings you to:

    [ ]
    editor_ht_insert_spec_char.png

    Here you can select special characters that you can put in your text.

  16. Undoes your last action: What it says.
  17. Redoes your last action: What it says.
  18. Justify left: To left justify text. This is the default setting.
  19. Justify centre: To centre a piece of text or image.
  20. Justify right: To right justify a piece of text or image.
  21. Justify full: To fully justify a piece of text.
  22. Ordered list: To make a numbered list.
  23. Unordered list: To make a bulleted list
  24. Decrease indent: What it says
  25. Increase indent: What it says
  26. Font color: The font color picker opens:

    [ ]
    editor_ht_color.jpg

    and you can choose a font color by pointing you mouse on the desired color and click.
  27. Background color: See font color
  28. Horizontal rule: To place a fixed width horizontal line in your text.
  29. Horizontal rule: Clicking on it brings you to:

    [ ]
    editor_ht_insert_hor_line.jpg

    Here you can choose the properties of the horizontal line.
  30. Insert Web Link: When you click on the icon, you can insert a web link:

    [ ]
    editor_ht_insert_hyperlink.png

    Link text: Here you can type the text that will appear as clickable link.
    Link URL: Here you enter the desired URL.
    Target: No need to put anything in this field. When you put in "_blank" (omit the " and ") the link opens in a new window.

  31. Insert Anchor Link: Making an anchor link in a text is a two step operation; making the anchor and making the link. As an example you will make a link at the bottom of the text that will bring you back to the top of the text.
    Step 1 Go to the top of the text where you want the anchor. Click on the anchor button in the editor menu bar. you will see:

    [ ]
    editor_ht_insert_anchor.png

    Fill in a name (for example 'top'; easy to remember when you have many anchors in a text) and click on 'OK'. You will not see anything in your text. However, clicking on source will show in the HTML code;

    <a name="top"> </a>
    

    Step 2 Go to 'Insert S@S Link' in the menu bar. You will see:

    [ ]
    editor_ht_insert_saslink.png

    Find the page you were working on by clicking on the sections and pages in the upper site of the window. When you have clicked on the right page you will see its location in the field 'HTML code'. In the field 'Link text' you will see the name of the page.
    Replace the name of the page with (example): "to the top of this document" (omit the quotes).
    In the bottom field 'Anchor name' you put in the name of the anchor you made in Step 1, i.e. 'top' (omit the quotes).
    Click on 'Insert'.
    You are taken back to the editor. Save your work, go to the document on your website. When you have put the 'anchor' on the top of the page and the link 'To the top of this document' at the bottom, clicking on the link will bring you to the top of the document.

  32. Insert S@S link: Clicking on the icon reveals:

    [ ]
    editor_ht_insert_saslink.png

    Here you can make an internal link in S@S. For example, you have an entry in vertical column, called 'Festivals'. When clicking on the 'Festivals' button, you can have a page with links to 10 pages of information on school festivals. These pages are internal links. They are made as normal pages, but are made invisible (see no. 54: 'Invisible').
    By clicking on a section you will see:

    [ ]
    editor_ht_insert_saslink_open.png

    When clicking on the (invisible) page, its link appears at 'HTML code:'. You can change the link text in something appropriate "fireworks on festivals" (omit the quotes). Do not use the anchor text field. For explanation of this field see the previous item.

  33. Insert image: When you click on 'Image' the image upload window opens:

    [ ]
    editor_ht_image_insert.png

    Click on the image to insert it in the page. Click on 'Browse' to open a window on your computer to choose a picture. Click on 'Save' to upload the picture to the S@S server. When it's uploaded you can see the picture in window where pictures are displayed.

  34. Insert table: To insert a table in your text:

    [ ]
    editor_ht_table_insert.png

    Fill in the number of horizontal rows and vertical columns. Leave 'Border thickness' to '1', even if you do not want a border, otherwise you cannot see your table when editing.
    When you don't want a border: make sure the table is selected (you will see the small black squares around it) and click on the first button third row (table properties) Change the border style to "none" and press OK

    When you look at the bottom icons, they are grey (i.e. not functioning). When you have made a table and put your cursor in one of the table fields, you will see the bottom icons become visible and therefore accessible. The row of bottom icons is treated below.

  35. Toggle HTML source: You can see your HTML code and change it. This option is for experienced HTML users.
  36. About this editor: The homepage of the 'HTMLArea 3.0 editor we are using in S@S

    Table operations

    When you have created a table with the 'Insert Table' button (number 32), and you have put your cursor in the table, you will see:

    [ ]
    editor_ht_table_icons.jpg
    Explanation:
  37. Table outline: The thin grey line indicates the borders of the table.
  38. Cursor: When putting the cursor in one of the cells of the table, the bottom row of icons will become visible and are accessible.

    NOTICE: The Icons summed up below ( 37 - 54) are not explained further. Their meaning is obvious to users who use tables in HTML pages. When the terms below are unfamiliar to you, consult a HTML book on how to use tables.

  39. Table properties:
  40. Row properties:
  41. Insert row before:
  42. Insert row after:
  43. Delete row:
  44. Split row:
  45. Insert column before:
  46. Insert column after:
  47. Delete column:
  48. Split column:
  49. Cell properties:
  50. Insert cell before:
  51. Insert cell after:
  52. Delete cell:
  53. Merge cells:
  54. Split cell:

    Bottom section

    [ ]
    editor_ht_bottom.jpg
    Explanation:
  55. Text entry field: Here goes your text, your images, links, etc.

    NOTICE: In Firefox 1.5, after creating a new page, the cursor might not be visible. However, you just can start typing, thereafter the cursor will appear.

    NOTICE: A new paragraph is made by pressing the 'Enter' key on your keyboard. A new line is made by pressing the 'Shift' and 'Enter' keys simultaneously.

  56. Invisible: Check this box to make the page invisible.
    This function enables you to add pages to pages, i.e. link the pages in the left vertical row of pages to other pages on the site, which pages can also be links, etc.
    This is one of the most used features in Site@School. It enables you to have numerous pages on the site with only a small number of visible pages. See also no. 32: 'Insert S@S link'.
    You can also use this feature to 'turn off' pages that are only occasionally needed, or use it when a page has a long time of preparation.
    This function is not available in the pupil's editor.
  57. Cancel: To cancel your work and return to the previous page.
  58. Save: To save your work and return to the previous page.

(top)

3. Plain text editor

This editor is for those who like total control over their pages. With the WYSIWYG editors some HTML tags are unavailable. And sometimes the WYSIWYG editors interpret commands incorrect.
Before you can use this editor, you must be sure it is enabled in Configuration > Personal settings.
Open the editor by going, for example: Pagemanager > Some section > Some page.
When the steps below are unfamiliar to you, consult the Page Manager chapter.
As said before, this editor is for plain HTML text editing. You have to do everything yourself.

[ ]
editor_pt.png
Explanation:
  1. Title: The title you previously gave to the page.
  2. Category: Categories are a subdivision of sections and can be used to optimize page management in case you have many pages under a section. Also useful when you use a (derived) template like the category template.
  3. Order: The number in the vertical row of pages in a section.
  4. Section: Here you can change the section where your page will be visible. This feature allows easy reorganizing your pages on the site. Use the drop down menu to change the section.

    NOTICE: This function is not available in the pupil's editor.

  5. Text entry field: Here goes your text, your images, links, etc.

    NOTICE: A new paragraph is made by pressing the 'Enter' key on your keyboard. A new line is made by pressing the 'Shift' and 'Enter' keys simultaneously.

  6. Invisible: Check this box to make the page invisible.
    This function enables you to add pages to pages, i.e. link the pages in the left vertical row of pages to other pages on the site, which pages can also be links, etc.
    This is one of the most used features in Site@School. It enables you to have numerous pages on the site with only a small amount of visible pages. See also no. 30: 'Insert S@S link'.
    You can also use this feature to 'turn off' pages that are only occasionally needed, or use it when a page has a long time of preparation.
    This function is not available in the pupil's editor.
  7. Cancel: To cancel your work and return to the previous page.
  8. Save: To save your work and return to the previous page.

(top)

Author: Dirk Schouten <schoutdi (at) knoware (dot) nl>
Last updated: 2006-04-24