WYSIWYG stands for What-You-See-Is-What-You-Get - an editor interface that allows you to view something very similar to the end result while you create your content.

This page lists the standard formatting options that are included in the Sector Starter Kit.

Basic text formats

You can make text bold, italic, strike through it, and use superscript and subscript.

Internal links

LinkIT provides a sustainable solution for internal links. You don't have to copy, or remember the URL, instead you can highlight the text to link, click on the link button, search for the content you want to link, and select the right page from the results.

External links

Just copy and paste the external link into to LinkIt URL field and confirm that it is an external link.

Anchors

HTML anchors allow you to link within a page. Set an anchor - remember to place the cursor without highlight text. You can now link to the anchor by setting #name-of-your-anchor as the URL in the LinkIT URL field.

Editing and removing links

To edit or remove links, double-click or right-click the link text.

Unordered list

  • Bullet point 1
  • Bullet point 2
  • Bullet point 3
  • Bullet point 4

Ordered list

  1. List item 1
  2. List item 2
  3. List item 3
  4. List item 4

Increase indent / Decrease indent

  • Bullet point 1
    • Bullet point 2
      • Bullet point 3
  • Bullet point 4
  1. List item 1
    1. Increase indent / Decrease indent
      1. Double Increase indent
  2. List item 3
  3. List item 4

Editor tools

Tools to improve your workflow

The WYSIWYG editor also allows you to:

  • undo (or redo) your changes,
  • use ‘Show Block’ to display the HTML block element containers as dotted lines,
  • remove unwanted formats,
  • paste as plain text1,
  • paste as word1,
  • support for Māori macrons,
  • maximise your editor window,
  • switch to HTML source view.

Media

Sector includes the media file manager, preconfigured media types and view modes. Use the 'Insert image' and 'Insert file' buttons to upload images and files and insert them into the content.

Image - Full width view mode

Snowy mountains shrouded in cloud with a blue sky background.

Use the credit or caption field to add your copyright or credit notice.

Insert image - Half width view mode

Snowy mountains shrouded in cloud with a blue sky background.

Use the credit or caption field to add your copyright or credit notice.

Dolorem pretium, adipisci volutpat necessitatibus! In tenetur ornare. Ultricies etiam dolore impedit, lobortis sequi nisi dicta morbi iusto laborum exercitationem? Iusto? Arcu nam hendrerit, donec. Quisque, montes convallis volutpat cupidatat autem maecenas pulvinar orci! Numquam molestiae elit risus, pellentesque rutrum.

Ullamco dignissim in saepe ipsum, pariatur veritatis est mollitia nibh, imperdiet aenean laboriosam consectetuer soluta cillum luctus? Irure pulvinar ullamcorper! Perferendis eaque eveniet hic? Necessitatibus incidunt pellentesque officia aut lorem nobis augue dignissimos eros illo molestias, quos labore saepe pulvinar.

File - Teaser view mode

PDF
294.08 KB

Use the credit or caption field to add your copyright or credit notice.

File - Short teaser view mode

Video - Full view mode

Use the credit or caption field to add your copyright or credit notice.

The video shows a logo animation. No words are spoken.

Basic styles

You can place a block quote

This is a block quote

You can place a horizontal line


Headings and styles

The editor configuration allows you to add HTML block styles and classes as well as inline styles. The Sector StarterKIT default configuration includes:

Heading 1

Heading 2

Heading 3

Heading 4

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 style

Highlight text


Templates

WYSIWYG templates allow content editors to add advanced design elements to their pages without the need to code. Select a template from the drop-down and insert it. For more information see the Sector WYSIWYG templates docs on sector.org.nz.

Block quote - Full. Text align left with cite

Sector block quotes via templates allow you to easily add attribute citation.

Block quote - Half. Featured. Float right

Dolorem pretium, adipisci volutpat necessitatibus! In tenetur ornare. Ultricies etiam dolore impedit, lobortis sequi nisi dicta morbi iusto laborum exercitationem? Iusto? Arcu nam hendrerit, donec. Quisque, montes convallis volutpat cupidatat autem maecenas pulvinar orci! Numquam molestiae elit risus, pellentesque rutrum.

Grid - 2 x 1

Layout your content in a 2 column grid.
Layout your content in a 2 column grid.

 

List - Definition

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.

Note - Default

Callout note title

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

Table - with header cells in the first column only

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

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

Table - with header cells in the top row only

Captions provide information that can help users find, navigate, and understand tables.
Date Event Venue
12 February Waltz with Strauss Main Hall

 


1) known issue - currently not working on Chrome