Copy/Pasting from Microsoft Word
Copy/Pasting from Microsoft Word or other text processing software, can bring along formatting from the original document which could affect existing content and layout of the page. To get around this you can use the Paste as plain text button in the WYSIWYG Toolbar or, if not supported, use the following keyboard key combination to paste as plain text: Ctrl + Shift + V or Cmd + Shift + V on Mac

WYSIWYG Basic options

Subtitle: A text field to add a H2 Heading for the WYSIWYG's content.

Formatted text: The main content body of the WYSIWYG component, with a toolbar of formatting options. This field is required.

WYSIWYG Toolbar icons (from left to right)

WYSIWYG toolbar
  • Undo: Undo the last change made, reverting to the previous state
  • Redo: Redo a change that was undone by Undo.
  • Maximize: Increases the size of the WYSIWYG to fill the browsers window
  • Paste: Paste clipboard contents at cursors location
  • Paste Plain Text: Paste clipboard contents without formatting if text.
  • Copy: Copy content highlighted in WYSIWYG.
  • Remove Format: Remove formatting of the highlighted content.
  • Styles: Insert styled content blocks
  • Paragraph Format: Apply paragraph formatting to highlighted text, e.g. Make text a heading.
  • Bold: Bold text
  • Italic: Make text italic
  • Underline: Underline text
  • Strikethrough: Add a strikethrough to text, e.g. strikethrough
  • Superscript: Set text to be superscript, e.g. super
  • Subscript: Set text to be superscript, e.g. sub
  • Align Left: Align text left
  • Align Center: Align text center
  • Align Right: Align text right
  • Block Quote: Insert a styled block quote
  • Unordered List (UL): Create an unordered list
  • Ordered List (OL): Create an Order list
  • Decrease indent: Decrease the indent step of the content
  • Increase indent: Increase the indent step of the content
  • Link: Link selected content
  • Unlink: Unlink selected content if it is linked.
  • Anchor: Insert anchor
  • Insert Media Library: Insert Media from Media Library
  • Insert Media embed: Embed media, via URL
  • HTML Include: Insert HTML Include
  • Spell check as you type: Enabled/Disable and configure built in spell checker.
  • Check accessibility: Check contents of WYSIWYG for accessibility issues.
  • Source: Toggle to view contents of the WYSIWYG as HTML or WYSIWYG
  • Font Awesome: Insert Font Awesome icons.
  • Insert special character: Insert special characters, e.g. ®
  • Table: Insert Table
  • Math: Insert/construct mathematical formulae
  • Create div container: Creates/Inserts a HTML div element
  • Show block: Toggle to show/hide outline of specific html elements.

Advanced options

Under the Advanced accordion on the WYSIWYG component you'll find the following fields.

Align: Aligns the add media on the selected side of the content within the WYSIWYG

Image: Add an image from the Media library to display alongside the WYWIYG’s content.

Enable pull-quote: Enable to display the text in the Quote textarea as a pull-quote, before the WYSIWYG's content.

Quote: Text to display in the pull-quote

Example of features from the WYSIWYG Component.

WYSIWYG Headings

H2 heading

H3 heading

H4 heading

H5 heading
H6 heading

unordered list

  • List item level 1
    • List item level 2
      • List item level 3

ordered list

  1. Normal
    1. List item 1
    2. List item 2
    3. List item 3
    4. List item 4
  2. Type a
    1. List item 1
    2. List item 2
    3. List item 3
    4. List item 4
  3. Type i
    1. List item 1
    2. List item 2
    3. List item 3
    4. List item 4
  4. Type A
    1. List item 1
    2. List item 2
    3. List item 3
    4. List item 4
  5. Type I
    1. List item 1
    2. List item 2
    3. List item 3
    4. List item 4

Text alignment

Left
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac lorem in quam accumsan aliquet. Nullam scelerisque mi porta mi laoreet, vitae elementum purus blandit. Fusce varius ultricies elit. Nunc non posuere dolor. Cras tempor purus sed lectus fringilla finibus.

 

Center
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac lorem in quam accumsan aliquet. Nullam scelerisque mi porta mi laoreet, vitae elementum purus blandit. Fusce varius ultricies elit. Nunc non posuere dolor. Cras tempor purus sed lectus fringilla finibus.

 

Right
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac lorem in quam accumsan aliquet. Nullam scelerisque mi porta mi laoreet, vitae elementum purus blandit. Fusce varius ultricies elit. Nunc non posuere dolor. Cras tempor purus sed lectus fringilla finibus.

 

Image media Display options

Original Display
Default Display
WYSIWYG Display
Full content Display

WYSIWYG Image media caption

Trees
Bench under trees
square.png

WYSIWYG Image media alignment

Trees
Image media alignment right

Image Media alignment set to right.

Nullam scelerisque mi porta mi laoreet, vitae elementum purus blandit. Fusce varius ultricies elit. Nunc non posuere dolor. Cras tempor purus sed lectus fringilla finibus.

 

 

 

 

Trees
Image media alignment left

Image Media alignment set to left.

Nullam scelerisque mi porta mi laoreet, vitae elementum purus blandit. Fusce varius ultricies elit. Nunc non posuere dolor. Cras tempor purus sed lectus fringilla finibus.

 

 

 

 

Trees
Image media alignment center

WYSIWYG | Advanced Image left

Nullam scelerisque mi porta mi laoreet, vitae elementum purus blandit. Fusce varius ultricies elit. Nunc non posuere dolor. Cras tempor purus sed lectus fringilla finibus.

WYSIWYG | Advanced Image right

Nullam scelerisque mi porta mi laoreet, vitae elementum purus blandit. Fusce varius ultricies elit. Nunc non posuere dolor. Cras tempor purus sed lectus fringilla finibus. Nullam scelerisque mi porta mi laoreet, vitae elementum purus blandit. Fusce varius ultricies elit. Nunc non posuere dolor. Cras tempor purus sed lectus fringilla finibus.

WYSWYG | Advanced pull-quote

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce varius ultricies elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.