WYSIWYG stands for What-You-See-Is-What-You-Get and implies a user interface that allows the user to view something very similar to the end result while the document is being created.

In general WYSIWYG implies the ability to directly manipulate the layout of a document without coding in HTML. Sector uses the CK WYSIWYG Editor for easy WYSIWYG editing, but also allows advanced editing via WYSIWYG templates and code for advanced Content Administrators. 

This page lists your content elements per editing category.

Styles via the WYSIWYG

The WYSIWYG includes ...

Headings

  • use sentence case for headings
  • use headings consistently to create a clear hierarchy

Heading 1 - rendered as <h2>

Heading 2 - rendered as <h3>

Heading 3 - rendered as <h4>

Heading 4 - rendered as <h5>
Normal  text

A body copy paragraph. Start your paragraphs with a topic sentence and end with a conclusion or a bridge to the next paragraph.

Leading text

The opening paragraph on every page should contain a concise introduction to the contents of the page. This way your reader can instantly gain an understanding of what the page is about and decide whether they want to read the page or not.

Inline text elements WYSIWYG 

rendered as bold text

rendered as italicised text

You can use superscript and subscript.

Bulleted list
  • here is a bulleted list
  • vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor
  • vestibulum id ligula porta felis euismod semper
  • integer posuere erat a ante venenatis dapibus posuere velit aliquet
Numbered list
  1. here is a numbered list
  2. vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor
  3. vestibulum id ligula porta felis euismod semper
  4. integer posuere erat a ante venenatis dapibus posuere velit aliquet
Legal list (using decrease and increase indent)
  1. here is a legal list
  2. Donec sed odio dui
    1. Donec sed odio dui
    2. Praesent commodo cursus magna, vel scelerisque nisl consectetur et
    3. Donec sed odio dui
      1. Donec sed odio dui
  3. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis.
Hr

The hr tag defines a thematic break in a page (e.g. a shift of topic).


The hr element is used to separate content (or define a change) in a page.

Blockquote default

Quotes are used to emphasise excerpts of text. Since users almost never read but scan we need to provide them with some focus anchors to fix their attention to the most important parts of our content.

Tools to improve your workflow

The WYSIWYG editor also allows you to 

  • undo (or redo) your changes,
  • remove unwanted formats,
  • use special characters and Māori macrons, 
  • copy from Word,
  • copy as plain text, 
  • use ‘Show Blocks’ to display the HTML block element containers as dotted lines, 
  • maximise your editor, 
  • link to content via Linkit, an easy interface for internal and external references, 
  • switch to HTML source view. 

Adding media via the media browser 

Sector incudes the media file manager, preconfigured file types and WYSIWYG view modes. Use the 'Media browser' to upload your images, documents, or embed video and audio from the web. Add your meta data and submit it to the WYSIWYG.

Image - Full. Default caption (via media browser)

Golden coloured grass blowing in the wind with a blue sky in the background
Add your copyright or credit notice.

Image - Half. Default caption. (via media browser)

Snowy mountains shrouded in cloud with a blue sky background.
Add your copyright or credit notice.

A body copy paragraph. Penatibus montes bibendum repudiandae sit malesuada sem assumenda. Aliquet nostrud pellentesque, at autem praesentium inventore phasellus malesuada tempor numquam elementum! Excepturi, ipsam aliqua gravida? Justo vestibulum sunt numquam, quidem viverra! Lorem incididunt. Tempus hic ante ante? Quae, quaerat temporibus nunc! Magna! Eligendi sollicitudin explicabo. Pariatur quibusdam montes ultricies magni quia.

Video (via media browser)

Sector logo animation.

Audio (via media browser)

Use the 'Media browser' button to upload your audio from Podbean and/or Soundcloud.

Document (via media browser)

pdf
294.08 KB
Add your copyright or credit notice.

Advanced editing via WYSIWYG templates

Blockquote - Full. Text align left with cite (advanced editing via templates)

The content of a blockquote element must include block-level elements such as headings, lists, or paragraphs. They can also have an optional attribute cite.

A cite defines an in-line citation or reference to another source
Blockquote - Full. Text align right with cite (advanced editing via templates)

The content of a blockquote element must include block-level elements such as headings, lists, or paragraphs. They can also have an optional attribute cite.

A cite defines an in-line citation or reference to another source
Blockquote - Half. Featured. Float left (advanced editing via templates)

A body copy paragraph. Penatibus montes bibendum repudiandae sit malesuada sem assumenda. Aliquet nostrud pellentesque, at autem praesentium inventore phasellus malesuada tempor numquam elementum! Excepturi, ipsam aliqua gravida? Justo vestibulum sunt numquam, quidem viverra! Lorem incididunt. Tempus hic ante ante? Quae, quaerat temporibus nunc! Magna! Eligendi sollicitudin explicabo. Pariatur quibusdam montes ultricies magni quia.

A body copy paragraph. Penatibus montes bibendum repudiandae sit malesuada sem assumenda. Aliquet nostrud pellentesque, at autem praesentium inventore phasellus malesuada tempor numquam elementum! Excepturi, ipsam aliqua gravida? Justo vestibulum sunt numquam, quidem viverra! Lorem incididunt. Tempus hic ante ante? Quae, quaerat temporibus nunc! Magna! Eligendi sollicitudin explicabo. Pariatur quibusdam montes ultricies magni quia.

Blockquote - Half. Featured. Float right (advanced editing via templates)

A body copy paragraph. Penatibus montes bibendum repudiandae sit malesuada sem assumenda. Aliquet nostrud pellentesque, at autem praesentium inventore phasellus malesuada tempor numquam elementum! Excepturi, ipsam aliqua gravida? Justo vestibulum sunt numquam, quidem viverra! Lorem incididunt. Tempus hic ante ante? Quae, quaerat temporibus nunc! Magna! Eligendi sollicitudin explicabo. Pariatur quibusdam montes ultricies magni quia.

A body copy paragraph. Penatibus montes bibendum repudiandae sit malesuada sem assumenda. Aliquet nostrud pellentesque, at autem praesentium inventore phasellus malesuada tempor numquam elementum! Excepturi, ipsam aliqua gravida? Justo vestibulum sunt numquam, quidem viverra! Lorem incididunt. Tempus hic ante ante? Quae, quaerat temporibus nunc! Magna! Eligendi sollicitudin explicabo. Pariatur quibusdam montes ultricies magni quia.

Note (advanced editing via templates)

A body copy paragraph. Penatibus montes bibendum repudiandae sit malesuada sem assumenda. Aliquet nostrud pellentesque, at autem praesentium .

Callout note title

Use a callout note to draw attention to important content on the page.

For other styles add extra classes. e.g: class="note note--primary”. Or: note--success, note--info, note--warning, note--danger.

Callout note title (warning) 

Callout sample using class="note note--warning".

Definition list (advanced editing via templates)
Definition list title
Here is a definition list description
Tip
Add the class dl-horizontal to the element via source to create a horizontal list.
A horizontal list makes terms and descriptions line up side-by-side.
Grid - 2x (advanced editing via templates)
Layout your content in a 2 column grid.
Layout your content in a 2 column grid.
Table - with header cells in the top row only (advanced editing via templates)
Captions provide information that can help users find, navigate, and understand tables.
Date Event Venue
12 February Waltz with Strauss Main Hall
Table - with header cells in the first column only (advanced editing via templates)
Captions provide information that can help users find, navigate, and understand tables.
Date 12 February 24 March 14 April
Event Waltz with Strauss The Obelisks The What
Venue Main Hall West Wing Main Hall
Table - with header cells in the top row and first column (advanced editing via templates)
Captions provide information that can help users find, navigate, and understand tables.
  Monday Tuesday Wednesday Thursday Friday
09:00 - 11:00 Closed Open Open Closed Closed
11:00 - 13:00 Open Open Closed Closed Closed
13:00 - 15:00 Open Open Open Closed Closed
15:00 - 17:00 Closed Closed Closed Open Open

 

Advanced editing via classes 

Inline text elements advanced editing via classes 

We inherit Bootstrap classes from the Bootstrap framework. The following classes can be used in Filtered HTML.

You can use the mark tag to highlight text.

This line of text is meant to be treated as deleted text.

This line of text is meant to be treated as fine print.

Horizontal definition list (advanced editing via source)
Definition list title
Here is a definition list description
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Felis euismod semper eget lacinia
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
Blockquote default reverse (advanced editing via source)

Quotes are used to emphasise excerpts of text. Since users almost never read but scan we need to provide them with some focus anchors to fix their attention to the most important parts of our content.

Buttons default (advanced editing via source)
  • use buttons to move though a transaction, aim to use only one button per page.
  • button text should be short and describe the action the button performs.
Buttons block level (advanced editing via source)

Start nowSave and continue

{Sample content}