WYSIWYG (What You See Is What You Get)

Helen Varley -

A WYSIWYG is a text editor with icons for easy editing of text on your website.

You can find one in any of the sections in the Create content section of the admin area (except the mailshot section).

  1. Log in to your admin area
  2. Click on Create content which appears on the left hand navigation
  3. Click on Page, and you will be presented with a WYSIWYG:

You can edit the text directly in the window of the editor or click on the HTML button if you want to edit the HTML by hand.

The WYSIWYG toolbar has the following buttons:

  Format Text - Highlight some text and click on these buttons to make the text bold, italic, underlined or strikethrough.
  Text Align - Highlight some text and click on these buttons to align your text left, right or centre.
  Unordered list (bullet point list) - Create an unordered list with bullet points. (Content must be on seperate lines).
  Ordered list (numbered list) - Create an ordered list with numbers. (Content must be seperate lines).
Outdent/indent - Outdent or indent text using these. 
Undo/Redo - If you make a mistake, you can click the undo button to go one step backwards. If you then decide that it was not a mistake, just click the redo button.
Hyperlink - Highlight some text and click the button to add a web or email link. You then just need to fill in the boxes in the pop-up window.
Remove hyperlink - Highlight the text link in the WYSIWYG window and click this button to remove the hyperlink.
Bookmark/Anchor Link - This is a bit like a hyperlink but it links to a section on the same page.
  • First, you need to bookmark/add an anchor to the text you want to link to by giving it a name. Highlight the text and click on the Bookmark button. In the pop up window, give the bookmark a name e.g. "page_top" and click on OK. The text will now have a small anchor icon.
  • To add a link to this area of the page, highlight the word or phrase that you would like to be the link text and click the hyperlink button. In the Link URL box, type the bookmark name that you added in the first step, and add a # symbol to the beginning e.g. #page_top. When you click save, your link text will now jump to the area of the page where you added the bookmark/anchor.
Insert/edit image - Click this to insert an image, document or flash file from your document library, or upload one from your computer.  The default maximum filesize is 20MB with a total default storage of 100MB.
Subscript/Superscript - Highlight text and click relevant button to make subscript or superscript.
Code - This button is on the top row of buttons and will open a popup with the HTML so, if you're feeling confident, you can amend it by hand.
Horizontal Rule - Separate your content with a horizontal line by clicking this button.
Copy and Paste - These buttons have a similar function as in Word. Highlight the text and then click on copy button. You can then paste where you want the text to appear.
Visual aid - click this button if you want to see hidden formatting such as table borders
Remove format - To remove formating such as font-family or color, select the text you want to update and click the remove formating icon
Insert custom character - Add a custom character like ? or &
Formatting style - Use this dropdown to format the font style.
Toggle fullscreen -Use this to toggle a fullscreen editing mode.
Paste from Word - If you are pasting content in from Microsoft Word, use this to remove any unnecessary formatting Word adds to your content.
Print - Click this button to print the content of the WYSIWYG
Search - search for a word within the WYSIWYG
Replace - search for a word and replace it with another word.
Tables - Use these buttons to insert tables and format them.
Media - insert media and configure settings
Spellchecker - check the spelling of the content within the WYSIWYG

Inserting Media via the WYSIWYG

To insert code for media, such as a YouTube video, into your site via the WYSIWYG:

  1. Go to the page on your site where you want the video to appear.
  2. Click edit
  3. Place the cursor within the text where you want the video to appear
  4. Click the  movie icon Insert / edit embedded Media. You will see a pop-up.
  5. Within the pop-up:
    • On the General tab, select iframe from the Type dropdown.
    • Click the Source tab
    • Delete the code in the box
    • Paste in the new embed code eg from YouTube
  6. Click Insert - this will close the pop-up
  7. Click Save to save your changes
Have more questions? Submit a request


Powered by Zendesk