Editing a Page

Basic Editing
Basic Formatting

Basic editing

All editing of page content is done within the browser - no third party software is required as Firefly.NET provides its own built-in web editor. In order to find the editor, you must be logged on and have editing privileges.

• Place your cursor over an area within the component you wish to edit.
• The following symbols now appear on the top left: .
• The symbol allows you to delete the contents of the component lying below the symbol. The symbol allows you to edit the component.
• If you click , a Firefly.NET editing window appears within the page, containing the component content to be edited.
• The  button allows the component to be dragged to a new position. The  button allows you to access the component's properties within the Tools menu.
• Make the required changes using the Formatting tools (also described below)
• Click the Save changes button
• Your changes should now appear within the page.
  
  

Note that the text editing box lengthens automatically as content is added. Where a page template forces a fixed width for page content, the editor adjusts accordingly such that content within will appear the same as on the page itself..

• Save changes: click this when editing is finished to save the changes made and return to the current page.
• Revert: click to return to the original version.
• Cancel: click to close the editor without saving your changes.
• Code Editor: click to access the component's source code (HTML) - to return to the graphical editor, click the button also located on the bottom right of the editor.

Basic formatting

Open the content to be edited in the Firefly.NET editor as above with its palette of editing buttons (as below).

The formatting tool buttons perform the functions shown in the diagram above and are very similar to familiar buttons in popular programs (e.g. Microsoft Word). Note that the standard keyboard shortcuts of Ctrl+B (Bold), Ctrl+I (Italics), Ctrl+U (Underline), Ctrl+X (Cut), Ctrl+C (Copy), Ctrl+V (Paste) and Ctrl+Z (Undo) work the same as in many other applications.

Most are self-explanatory, but you can remind yourself of their function by hovering your cursor over each one in turn, when a small message box will appear with a description.

Others need some further explanation...

Styles

The default selection of HTML styles range from Heading 1 (largest) to Heading 6 (smallest), however extra styles can be defined by power users in the section template, e.g.

Note that HTML styles can only be applied to whole paragraphs, e.g. you can't apply Heading 1 to one phrase in a sentence whilst leaving the rest of it in the Normal (default font) style. Styles are therefore best reserved for headings, as their names imply!

Fonts

The range of fonts available is customisable and determined by settings within the section template. The basic template restricts the choice of fonts to the following:

Sans-serif, e.g. Tahoma, the default font
Serif, e.g. Times New Roman
Symbol, e.g. Symbol
Monotype, e.g. Courier New

Insert Image

Allows you to insert an image from the Resources area.

Insert page break

On modern browsers this will not affect the appearance of pages on screen, but will insert page breaks where specified when the web page is printed.

Table Menu

Allows you to insert a new table, or if clicked whilst an existing table is selected, will allow you to edit the table.

Insert Link

Inserts a link to another Firefly.NET page, a resource, streaming media, an external website or an anchor on the current page.

Insert anchor

Inserts an anchor at the current position. You can then create links that jump directly to this anchor.

Insert Symbol

A selection of common special symbols (see below) is available from the Insert Symbol palette.

Simply click the symbol required on the palette and it will immediately be inserted into the Modify Component window, at the point selected.

Check Spelling

Firefly.NET has a built-in dictionary, so that contents in the Modify Component window may be checked for spelling. Words not recognised in the dictionary appear with a series of red dots underneath, for example:

Find and replace text

This tool operates on text within the Modify Component window, in a similar way to the equivalent tool in Word or Excel, etc.

One useful feature for those who want to edit the HTML source code is the option to Operate on component HTML, which performs the Find and Replace operations directly in the Code Editor and not in the default Graphical Editor

Pasting content

When pasting content into Firefly, you may be presented with a window asking you to select from several options. The Paste, but remove most formatting option is generally the most suitable option in most cases, and will use the Clean up Formatting function described below. To strip all formatting, including tables, you can select the Paste as plain text option. Obviously, if you didn't intend to paste at all, you can select Don't paste. 

Context sensitive menu

Right clicking within the editor window gives some other options (see screenshot below). As well as duplicating many common formatting buttons, an option called Clean up Formatting allows you to clean up code-heavy content generated elsewhere, such as in Microsoft Word, so that it integrates more neatly into your page.

Copy format/Paste format: This performs a similar function to that of Microsoft's Format Painter tool in that formatting of one section of text may be applied to another section by

• select the text whose formatting is to be copied, right click on it and choose Copy format
• select the text to which the formatting is to be applied, right click on it and choose Paste format

(Note that this tool works best on content where the underlying HTML code is clean - too much unnecessary hidden code may prevent its operation, in which case use of the Clean up Formatting tool may solve the problem.)

Clean up Formatting

Content which has been copied and pasted into a Firefly.NET page, such as that from Word or Excel, will often contain a large amount of unnecessary code. It is a good idea to strip out this hidden code in order to produce clean pages which are easy to edit and format. You can do this by right clicking anywhere in the edit window and selecting Clean up Formatting.

Permissions

Setting permissions is done by clicking the Component properties  button in the toolbar at the top of the component:

Selecting the Modify permissions option allows you to restrict who can edit or even read the component via the Component Permissions dialog box. This is useful if, for example, you wish to place a message on the page which is to be only visible by certain users (e.g. Staff).