WYSIWYG Editor

A WYSIWYG editor — short for "What You See Is What You Get" editor— is a major asset when building or making changes to a website.  It lets you make changes and immediately see how they look on your website or intranet.

The pdf can be downloaded here:

User Guide - WYSIWYG Editor.pdf[pdf] 787KB

• Hyperlink 

• Anchor tags 

• Insert/edit image    

• Insert/edit media

• Table 

• Special characters 

Source - CTA buttons

Source

The Source can be used to paste in code, for example an iframe.  Click the icon, paste the code and click ‘Save’.  This is also currently used to create ‘cta’ buttons.

In the example below, there is a page link to ‘About us’. To create the ‘cta’ button on a hyperlink, click the source icon:

You can see the ‘About us’ page is in the ‘a tag’ line:

To create the ‘cta’ you need to add the following code in this line:

class = “cta” or class = “cta-primary” etc.

Click ‘Save’ to save the changes.   Front end view:

Full screen mode

Click the Full Screen mode icon to make the screen a larger area to work in.  To go back to normal, click the icon again.

Cut, copy and paste

‘Cut’ will remove text and copy to the clipboard

 To paste text from the clipboard

 To paste with formatting

 To paste as plain text

Find and replace

Click to find and replace words.  This will open the foll           owing box, enter the word to find and replace with, then click ‘Find’:

You will then be able to either click ‘Replace’ and go through one by one or click ‘Replace all’.

Undo and redo

Allows you to undo the last edit or redo the last edit.

Bold, Italic and underline

As in Word, you have the functionality to bold, italic or underline, simply highlight the text and click on the icon.

Subscript or superscript

Superscript is text formatted to appear smaller than the surrounding text and is usually aligned slightly above the top of the regular type; subscript is similar, but aligned slightly below the baseline.

 

Numbered and bullet list

Choose from the dropdown the required style

Increase / decrease indent

This allows you to indent text, moving it to the right.

 

Block quote

Highlight the text and click on the quote icon to add text in quotes.

CMS view:

Front end view – this will differ depending on styles:

 

Horizontal line

Click to add a horizontal line break in your text:

CMS View:

Front end view:

Left right justify

Highlight text and click left, centre or right justify aligning text.

This can also be used to align images to the left, centre or right of text.  Insert the image and click on it to get the alignment icons:

Choose left, centre or right to align the image with the text.

Hyperlink

Click to insert a link or highlight text to create a link. 

URL                            Enter the slug for internal links or the full URL for external links

Text to display         If you highlighted text, it would appear here.  If you are adding a link 

                                    enter the text here

Title                            When you hover over the link on the front end, this text will appear

Open link in             Choose from ‘Current window’ or ‘New window’

Anchor tags

An anchor tag is a HTML element that links one page to another or one piece of text to another piece of text on the same page.

Step 1 - creating an anchor tag - Place the cursor in the text where you want to link to, and then click the 'create anchor' button:

Give your anchor a name and then save it.

Step 2 - linking to that anchor tag - To link to that anchor, the URL would be as follows:
www.website.com/pagename#Lipsum

So, if my anchor was somewhere on the VerseOne Contact Us page the URL to link to it would be:
https://www.verseone.com/contact-us#Lipsum – this can be added by highlighting the text and clicking on the link icon.

Insert/edit image

All images need to be uploaded to the Media Manager, Alt Text should be added to the description field and Published before using in Text Content.  Images can be added to Text Content from the Media Manager by using the ‘add file’ icon.   

General

The width or height can be entered in pixels to alter the size of the image and keep the same aspect ratio.

Advanced

Vertical/Horizontal space can be entered in pixels around the image.  A border can also be added and the border width in pixels chosen from the dropdown.

This can be used to embed code such as an iframe.  Click ‘Embed’ paste your iframe and click ‘Save’.

Table

Select the dropdown to create the number of cells across and down

Fill in the table as required, click on the table to get functions to add/delete rows/columns and access table properties

In General click ‘Show’ caption’ for accessibility.   You can add cell spacing in pixels and left/right/centre align the table.   In Advanced a border style can be selected.

 To delete the table.

 

 

Special characters

Click to add a special character, choose from the list on the left:

Headings

Select the text and choose from the dropdown.  Remember headings need to be in semantic order to be accessible.