WYSIWYG

WYSIWYG stands for what you see is what you get and it is a type of editing software that allows users to see and edit content in a form that appears as it would when displayed on an interface, webpage, slide presentation or printed document.

Demo

Summary

You will be able to use the WYSIWYG when adding to either content or a comment

 Steps

1. To enable the ‘WYSIWYG’
2. Navigate to an existing  piece of ‘Content’ and select ‘Edit’
3. Select the ‘+’ icon in the Workbar and select a new piece of ‘Content’ to create
4. You will be redirected to the ‘Create/Edit’ screen
5. Select ‘Start typing’ in the form area
6. Add a Title
7. Add WYSIWYG content below the Title using the toolbar plugins and their related features (listed below)
8. Once you are happy with the look and feel of the ‘Content‘
9. Select ‘Save’

WYSIWYG Plugins

Insert button

Menu options for this button include:

File

[Video 00:45]

Image or other file type

Embed

[Video 01:00]

• Image
• Audio
• Video
• PDF
• Iframe

Selecting the ‘+ icon’ followed by either ‘File’ or ‘Embed’ will give you the options to add these different content types into the WYSIWYG. 

Link

[Video 03:05]

Selecting the ‘Link’ option will allow you to choose between linking to a ‘URL’ or an ‘Anchor’ in the text. You will also be able to input the text that you would like to display.

Anchor

[Video 03:50] 

The ‘Anchor’ option relates to the ‘Link’ option above and allows you to link text back to the ‘Anchor’ that’s seen in the WYSIWYG

Divider

The ‘Divider’ option is a tool in the WYSIWYG that can be used in order to divide content up and help achieve the desired overall look of your content. 

Abbreviation

[Video 04:40]

This is a tool that can be used to be able to add abbreviated text along with a ‘Tooltip’ for other users to understand. 

Table

[Video 05:18]

By selecting this option you will be able to input your desired table into the WYSIWYG. Additionally when wanting to edit your table you can come back here in order to add ‘Columns’ & ‘Rows’ etc. 

Heading menu

[Video 07:30]

• Paragraph
• Headings 1-6

Here you can select the desired style of text for each section of your content.

Font family

[Video 07:30]

You have the option to select three different fonts (Libre Franklin, Roboto & Ubuntu) to display in your WYSIWYG. 

Font size

Here you can input the different ‘Font sizes’ that you would like to display for your WYSIWYG content. 

Styles

[Video 08:14]

• Bold
• Italic
• Underline 
• Strikethrough 
• Text colour
• Highlight

Here you will be add these different ‘Styles’ to your WYSIWYG content such as making a particular word or sentence ‘Bold’ etc. 

Block quote

[Video 09:50]

Select the ‘Block quote’ option in order to add your desired quote to the WYSIWYG. In order to remove it select the quote text and the ‘Block quote’ icon again. 

Callout

[Video 12:18]

The ‘Callout’ option is a new feature that has been added to the WYSIWYG and allows the user to add different ‘Callout’ messages in order to gain more attention. Some examples of what these can be are: Success, Danger, Warning & Information.

Special character

[Video 08:14]

The ‘Special Character’ option in the WYSIWYG allows you to add multiple different ‘Special Characters’ to the content within the WYSIWYG such as the ‘£’ symbol. 

Accordian

[Video 10:12]

The accordion option allows you to display a menu for your content within the WYSIWYG. Here you can add a title and description. 

Supercript

[Video 08:14]

The ‘Superscript’ option relates to when you highlight a piece of text and select the ‘Superscript’ option then the text selected will become slightly smaller and will be set slightly higher than the normal line type. 

Subscript

[Video 08:14]

The ‘Subscript’ option relates to when you highlight a piece of text and select the ‘Subscript’ option then the text selected will become slightly smaller and will be set slightly lower than the normal line type. 

Text align

Text ‘Align’ allows you to set the alignment of the text within the WYSIWYG. 

Lists

[Video 09:20]

Both a ‘Ordered list’ and ‘Unordered’ list can be added to the WYSIWYG content to help achieve your desired outcome.

Indent

Both ‘Increase’ and ‘Decrease’ indent allows you to make minor adjustments to the text that is within the WYSIWYG. 

Line height

This option allows you to adjust the line height of the content to different desired heights. 

Add/Edit Link

[Video 03:05]

• Selecting the ‘Link’ option will allow you to choose between linking to a ‘URL’ or an ‘Anchor’ in the text.
• You will also be able to input the text that you would like to display. 

Table options

[Video 05:20]

By selecting ‘Table Options’ you will be able to edit the table that currently exists within the WYSIWYG, such as adding ‘Columns’ and ‘Rows’. 

Image options

[Video 11:30]

By selecting this option

Media options

[Video 02:30]

By selecting this option

Undo

The ‘Undo’ option allows you to undo the last action you just took within the WYSIWYG. 

Redo

This option allows you to revert the action after selecting the ‘Undo’ option. 

Copy

This allows you to copy and content and media within the WYSIWYG. 

Paste

This allows you to ‘Paste’ any media or content that was copied into the WYSIWYG. 

Find and replace

Find and replace allow editors to search for specific terms easily within content and either update or replace these terms with another term.

Clear formatting

This option can be selected when content is ‘Pasted’ into the WYSIWYG and you would like to clear the ‘Format’ of that content. 

Layout options

Build responsive layouts within your WYSIWYG. Configure regions within the layouts
Insert‘, ‘Delete‘ & ‘Edit‘ their desired layout/Region options

Full Screen

This allows you to use the WYSIWYG in a more immersive experience. 

WYSIWYG User Configuration

Summary

Learn more about ‘WYSIWYG User Configuration‘

Steps

1. To configure the Users roles for the ‘WYSIWYG’
2. Navigate to ‘Adminstration‘ in the ‘Workbar‘
3. You will be relocated to ‘Administration‘
4. On the ‘LHS‘ (Left Hand Side) select the ‘WYSIWYG‘ dropdown
5. Select ‘Roles‘ – You will be relocated to the ‘WYSIWYG Roles‘ screen
6. Along the top of the page select the relevant ‘Role‘ you want to configure the ‘WYSIWYG‘ for
7. Select the ‘Checkbox’ of each ‘Buton & Plugin’ you would like enabled
8. Select ‘Save‘