Sector WYSIWYG editor - content elements

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 super^script and sub_script.

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 text¹,
• paste as word¹,
• 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

Insert image - Half width view mode

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

File - Short teaser view mode

Video - Full view mode

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 Starter Kit 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.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

 

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

Table - with header cells in the first column only

Table - with header cells in the top row and first column

Table - with header cells in the top row only

 

---

¹⁾ known issue - currently not working on Chrome