Using CKEditor

Sometimes referred to as a WYSIWYG ("What You See Is What You Get"), the editor attempts to show the end result of a page as it is being edited. However, due to some of the complex content that can be created using the editor, it is not always possible to give an accurate view of a page within the editor itself. Use the 'Preview' button to get a more accurate view of the resulting page instead.

The editor comprises four sections:

1. a toolbar
2. the editing area
3. the context menu
4. help notes

CKEditor Toolbar

Clipboard

• Cut
• Copy
• Paste
• Paste as plain text
• Paste from word
• Spell check as you type

Edit

Undo/redo

• The undo button is useful where you want to correct a mistake by undo-ing the last change you made, for example pasting text into the editing area and clicking undo will remove the pasted text.
• The redo button will reverse an undo action. Using the example above, clicking the redo button would re-paste the text into the editing area.
• The undo and redo buttons provide the same functionality as the keyboard shortcuts CTRL-Z and CTRL-Y respectively.

Find

• Use the find button to open a dialog for quickly finding a phrase or word in the editing area. The dialog also provides a tab for accessing the replace function described below under the Replace button.

Replace

• The replace button opens a dialog for quickly replacing some or all of the entered phrases/words found in the editing area. 

Select all

• As the name implies, the select all button will select all of the entered data in the editing area. This is a quick method for formatting or removing all of the content in the editing area.

Remove format

• The remove format button removes the formatting from highlighted text in the editing area. For example, the following text before removing the format.
• Example:
  • before - Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  • after - Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Insert...

Add/remove link

• Converts or removes a link on highlighted text. When creating a link, the following dialog opens:
  
  Add link
• Select the type of link to create using the link type drop down.
• URL - contains the following required fields:
  • Protocol - select either 'http://', 'https://', 'ftp://', 'news://' or <other>.
  • URL - the URL to link to without the protocol above. The editor can, in some cases, automatically select the appropriate protocol for you if you enter, or paste using CTRL-V, an entire URL into the field. For example, entering http://www.library.uq.edu.au will automatically select 'http://' in the protocol drop down list, and remove 'http://' from the URL field.
• Link to anchor in the text - contains two drop down lists if there are anchor links available on the page. Select from one of the drop down lists to create a link:
  • Select an Anchor By Anchor Name - this drop down contains a list of anchors on the page, if any exist. Anchors are created using the anchor button.
  • By Element Id - this drop down contains a list of element IDs to select from.
• Email - contains three fields for creating a 'mailto:' link ^* :
  • Email Address - the email address for the link.
  • Message Subject - appends a message subject to the email link, which most email clients pre-populate the subject field with.
  • Message Body - appends a message body to the email link, which most email clients pre-populate the message body with.

• ^* The Library provides a contact form which can be linked to. This is the recommended method of adding email links to web pages.

• Remove link
• Linkit
  • use this to easily add links to existing content within the site.
• Anchor
  • add anchors if you have a long page, so you can add links to specific locations in the page.
• Table
• Horizontal line
• Insert special character
  • Use this button to open a grid of commonly used special characters to select from.
• Insert template / code snippets
  • E.g. information box, call-to-action prompt, tabs and accordions

Options

• Maximise / minimise
  • This button toggles the editor between a maximized view which is sized to fit your browser window, and a minimized view which shows the rest of the content type's fields and options.
  • When editing content, it is highly recommended working to have the editor in its maximised view.

Formatting

• Paragraph format
  • Click the drop down to show a list of available paragraph formats: 
    
    Text format options
  • Each list items shows how a sample of how the paragraph will be displayed, with the exception of the colour that will be applied, for example some headings display in a different colour depending on the level selected.
• Text format
• Superscript/subscript
• Block quote
• Text Alignment (left, justify, right)
• Numbered list
• Bullet list
• Indentation (increase/decrease)

Context menu

• Shows the html tag of the content at the cursor position, e.g. body, p, ul li, h2, etc.
• Allows quick selection of the whole block if you click on each of the tag displayed. 
• Note: The first element is always "body" which represents the base <body> tag which exists in all web pages.

Help / Additional information

• Provides notes or memory joggers for using the editor.