Skip to main content

Using the CKEditor

Screenshot of the CKEditor
Screenshot of the CKEditor

Many fields allow for rich text formatting those fields will have a toolbar much like the above image.  This toolbar is a plugin called "CKeditor".  It will interpret options you select into HTML code for your web page. 

These tools will not only allow you to format text within paragraphs but to add links, headings and symbols to your text. This page gives a run down of the options on the menu bar and how they can be used to produce a web document.

Format and Style

Format and Styles dropdowns

The format dropdown

From the format dropdown you can assign heading levels to text to allow you to create subheads within your text without creating a separate block. These mid text headings do not allow you to choose a color, but they will help you simplify your content.  It is important in creating your pages to maintain a logical structure using headings.  For information about headline accessibility see this article.

Everypage begins with a Heading 1, and your pages heading 1 will automatically be the title of the page. So all content should include a heading 2 as the top level heading within. Samples of the heading levels are below.

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

The Styles Dropdown

The styles dropdown offers a number of paragraph styles you may find helpful in distinguishing content in your document. To use these styles just select them while your cursor is in an existing paragraph. This is a normal paragraph.

This is a "Highlight Paragraph."

This is a "Small Text Paragraph."

This is a "Caption."

 

Source

Image of source button

The "Source" button allows you to view the html that is being generated.  It should be rare that you need to edit this source code. If you need help with this please contact the web team and we can work with you on whatever issue you have run into.

Basic Text Formatting

Basic Formatting Buttons

Similar to Microsoft Office programs, these buttons will allow you to add basic formatting to your text. The same keyboard shortcuts you are used to will also work.

  • "B" -- Make text bold. Also available with ctrl+p (command+p on a Mac)
  • "I" -- Make text italic. Also available with ctrl+i (command+i on a Mac)
  • "U" -- Underline text. Also available with ctrl+u (command+u on a Mac)
  • "S" -- Strikethrough text.

Insert Symbol

Insert Symbol Button

The insert symbol button will allow you to select symbols such as copyright to add to your text

Super-Text and Sub-Text

Super-text and Sub-text buttons

The supertext and subtext buttons allow you to format text accordingly.

Numbered and Bulleted Lists

Numbered and Bulleted Lists

Highlighting a list of items and clicking the numbered or bulleted list buttons will format the items as a list.

Numbered List

  1. Item 1
    1. Sub Item
  2. Item 2
  3. Item 3

Bulleted List

  • Item 1
    • Sub Item
  • Item 2
  • Item 3
Bullets optiions

Style options for lists

The second of the two dropdown menus contains contextual style for different elements.  For Numbered/Bulleted lists this contains options for whether to have bullets appear inside the margins of your list or outsite.

Example with Bullets inside

  • Item One 
  • Item Two
  • Item Three

Examples with Bullets outside

  • Item One
  • Item Two
  • Item Three

Indent Paragraphs

Indent Buttons

Indent paragraph will add a margin to the left of your paragraph.  The second indent button will remove an indent if one exists.

This paragraph has been indented twice. (well, this is not working)

Creating links

Create and Remove Link Buttons

To create a link, highlight the text you wish to link and click the chain link button.  In the resulting dialog either enter a website URL, email, or File link.

To create an email link, enter an email address into the URL field. Then click the “is email link?” checkbox. Optionally you can add a default subject to the generated email.

To link to a file click “Open File Browser” to select/upload a file from your hard drive.  (See the File Browser Documentation for information on adding and managing files.)

Paste

Paste button

Pasting your clipboard can be accomplished by clicking the paste button or by using the normal keyboard shortcut (ctrl+v on a pc and command+v on a mac)

Maximize

Maximize editor button

Clicking the maximize button will expand the text editor to take up the full screen. Be sure to click the maximize button again to restore your window.  You will need to restore the window to click the save button.  If you navigate away from the edit form without saving you will lose your work.