HTML Box

Within the content browser you may encounter and input field that using our HTML editor. This editor allows you to format the text, insert images and link to files.

HTML Editor Toolbar

Inserting Text

You can insert text by copy and pasting from a another program. Simply copy the text in the other program and then click one of the icons below.

Paste as text

Paste text from word

This will bring up a window in which to paste the text.

You can paste directly into the HTML window however this will often bring over additional formatting code that is not supported be the html editor.

Inserting a table

You can insert a table by clicking . You will have the option to set the width of the table, the number of rows and columns and the padding.

Once you have a table you can edit it by right clicking and choosing the required option or by using the following options

  1. Insert Table
  2. Row Properties
  3. Cell Properties
  4. Insert Row Before
  5. Insert Row After
  6. Delete Row
  7. Insert Column Before
  8. Insert Column After
  9. Delete Column
  10. Split Merged Cells
  11. Merge Cells

Formatting Text

The first row of the toolbar allows you to format the text in the HTML Box.

In addition you can change the colour of the text and its background by highlighting some text and using these buttons .

To use these options just highlight the text to be formatted by left clicking to the left on the text and with the mouse button still pressed move the mouse until all the required text is highlighted. The choose the appropriate option from the toolbar.

Remove Formatting

To remove any formatting select the text, including some text before and after, then click .

Images

You should ideally upload all required images using the Image Manager before using the content browser.

Inserting an Image

  1. Locate the page in the Content Browser and edit the block.
  2. Go to the point at which you want to insert the image and click .
  3. In the window that appears, see below, choose .
  4. This will bring up our File Selector (Click here for instructions) for you to choose or upload an image.
  5. Click the folder containing the image then from the list on the right click the image and then choose select file.
  6. The file manger window will close, now click insert.
  7. The image will now be inserted. You can click on the image and then using the points and the four corners you can resize the image.
  8. To see more of the page click the Toggle Full Screen Mode icon to go to full screen mode. Click the icon again to return to the normal view.
  9. Once you have inserted and resized the image click write to save the changes.

Editing an Image

  1. Locate the page in the Content Browser and edit the block.
  2. Find the image to change and click it then click .
  3. In the window that appears, see below, choose .
  4. This will bring up our File Selector (Click here for instructions) for you to choose or upload an image.
  5. Click the folder containing the image then from the list on the right click the image and then choose select file.
  6. The file manger window will close, now click insert.
  7. The image will now be inserted. You can click on the image and then using the points and the four corners you can resize the image.
  8. To see more of the page click the Toggle Full Screen Mode icon to go to full screen mode. Click the icon again to return to the normal view.
  9. Once you have inserted and resized the image click write to save the changes.

Deleting an Image

  1. Simply click on the image and press delete.

Linking to a file or web page.

Linking to a file

  1. Locate the page in the Content Browser and edit the block.
  2. Go to the point at which you want to insert the link and highlight the text or select the image and click .
  3. In the window that appears, see below, choose .
  4. This will bring up our File Selector (Click here for instructions) for you to choose or upload an image/file.
  5. Click the folder containing the file then from the list on the right click the image and then choose select file.
  6. The file manger window will close, now click insert.
  7. Once you have inserted and resized the image click write to save the changes.

Linking to a web page

  1. Locate the page in the Content Browser and edit the block.
  2. Go to the point at which you want to insert the link and highlight the text or select the image and click .
  3. In the window that appears, see below. In the Link URL field enter the full URL for the web page including the http://
  4. Now click insert.
  5. Once you have inserted and resized the image click write to save the changes.

Buttons in the HTML editor

Bold, italic, underlined, strikethrough Font style - Make text bold, italic, underlined, or strike-through.
Align Alignment - Align text, images or other content left, right, centre, and full.
Image styles Text & Image Styles - Caption and System Page break styles can be set. Highlight the desired text and select the style. This will allow this text to be formatted based on CSS rules.
Font format Text Format - Select predefined formats for Paragraph, Address, Heading1, and so on.
Font family Font Family - Select the desired font.
ListsIndent Text List formatting - Unordered List, Ordered list, Out-dent (move left) and Indent (indent right).
Undo/redo Undo/redo - Undo (Ctrl+Z) and Re-do (Ctrl+Y) the formatting you just made to your article.
Insert link Insert/Edit Link - To insert or edit a link, select the linked text and press this button. A pop-up dialog displays that lets you enter details about the link.
Unlink Unlink - To remove a link, highlight the linked text and press this button.
Insert anchor Insert/edit anchor - Creates a named anchored which can be used as a target to jump to when using a link.
Insert image Insert/Edit Image - To insert an image, place the cursor in the desired location and press this button. A pop-up dialog displays that lets you enter in the Image URL and other information about how the image will display.
Clean messy code Cleanup Messy Code - This button allows you to clean up HTML code, perhaps from HTML text that you copied in from another source.
Edit HTML Source Edit HTML Source - A pop-up displays showing the HTML source code, allowing you to edit the HTML source code.
Text direction Text direction - Direction Left to Right and Direction Right to Left. These buttons allow you to enter or change the text direction, for example for languages that read right to left.
Color dropdown Select Text Colour - Select the colour of your text. This drops down to give you a choice of colours
Insert Horizontal Ruler Insert Horizontal Ruler - Adds a horizontal ruler to your page.
Remove Formatting Remove Formatting - Removes formatting from text copied from somewhere else.
Toggle Guidelines/Invisible elements Toggle Guidelines/Invisible elements - Toggles the invisible elements of your article.
Subscript and Superscript Subscript, Superscript - For adding scientific notation to your text. 
Table tools Tools for inserting and editing tables - Insert New Table, Table Row Properties, Table Cell Properties, Insert Row Before, Insert Row After, Delete Row, Insert Column Before, Insert Column After, Delete Column, Split Merged Table Cells, Merge Table Cells.
Toggle Full Screen Mode Toggle Full Screen Mode -  Toggles your article editing window to the full size of your screen