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)

• 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