WYSIWYG Explained

Owned by Chelsea Shadowens (Unlicensed)
Last updated: Jun 22, 2021 by Ericca Rowe
5 min read

The What You See Is What You Get (WYSIWYG) Editor provides you with functions to enhance your content creation experience on Georgia GovHub.

Many of the function buttons will be familiar from Microsoft Word, and if you hover over an icon, a tool-tip will tell you what each icon does.

This guide will help you understand the available tools so you can use the WYSIWYG Editor to format your website's content.

Character Formatting

To make your text bold or italicized, highlight the text and then click on the desired icon to change your text font.

Or use the following shortcut keys (no keyboard shortcut available for strike-through):

  • Bold: Ctrl + B (⌘ + B on Mac)
  • Italics: Ctrl + I (⌘ + I on Mac)

Special Characters  

When you are writing, you might need to insert characters that are not a part of the standard keyboard.

To insert a special character into your document, press the Special Character icon on the toolbar.

The Select Special Character dialog window that will open allows you to choose a symbol from a set containing:

  • Latin letters,
  • numbers (including fractions),
  • currency symbols,
  • punctuation,
  • arrows, and
  • mathematical operators.

Paragraph Formatting

The following formatting will affect an entire paragraph at a time, and cannot be applied only to a letter, word, or sentence inside a paragraph.

Bulleted or Numbered Lists

  • Ordered/Numbered List 
    • This function creates an ordered or numbered list.
    • Select your text, and then click the insert ordered list button.
  • Bullet List 
    • Bullet lists creates an unordered or bullet list.
    • Select your text, and then click the insert bulleted list button to select from the bullet list symbols.

Indent and Outdent 

  • Use the Indent and Outdent icons to quickly indent or outdent blocks of content. 
  • You can also use the indent icon to further indent list items in a bulleted or numbered list.

Blockquote

There are 2 versions of quote – Blockquote and Callout. The only difference is the design of each. 

  • If you want your text indented and styled differently to indicate a blockquote or callout, highlight your paragraph and click the Blockquote icon.
  • Select which styling you want for your text.

Paragraph Styles

  • Use the drop-down menu, labeled by default "Normal," to change your text's formatting.
  • Formatting different blocks of content on your page such as your headers (H1, H2, H3...) for section titles, as well as other, custom formatting options like paragraph text and addresses. Each Paragraph Format has a defined style based on your website’s theme.

Paragraph Breaks and Line Breaks

To create breaks in your body text:

  • Enter (Return)
    • Ends a paragraph and starts a new one. A new paragraph will begin with a full line of space between paragraphs.
    • This is known as a "hard return." In your html source code, you will see </p><p> to indicate the end of one paragraph and the start of a new paragraph.
  • Shift + Enter
    • Adds a line break and starts the next line directly below the first. You may use line break when you are typing an address, for example, where the City, State line should follow directly after the address line.
    • This is known as a "soft return." This text is all part of the same paragraph, so the same paragraph style (normal, heading, etc.) applies on both sides of the line break.

Use a hyperlink to open another page on your site, open a page on an external site, or to launch a mail-ready email in your user’s email client.  

To create a link within the Body of your content item:

  1. Highlight the text you want to hyperlink.
  2. Click the Link icon (Ctrl+K) to open the Link window. 
  3. Copy the URL of the page you want to link to and paste it in the URL field.
    • As you begin typing your relative path, content will appear. Select the content you want to link.
    • To link to a page on the same site, start typing the path of the relative URL beginning with the slash ( / ).
    • To link to a Document on your site, you need to select the PDF icon. 
  4. Click Save.

To remove a link within the Body of your content item:

  1. Highlight or click on the text or image that has the link you want to remove.
  2. Click the Unlink icon. 

This removes the link from your text or image. It should now display the same as the rest of your content.

Tables

To use built-in styling, we recommend creating and editing tables directly within the WYSIWYG editor. Copying and pasting tables from other sources can cause them to be unresponsive and mismatched from the rest of your site.

Always double-check your tables before publishing. Resize your window to make sure the table will look appropriate for all screen sizes, and keep in mind that if your table has too many columns to fit in its allotted space, it will have a horizontal scroll.

Create a Table

To create a new table in the WYSIWYG editor:

  1. Place your cursor in the Body of the page where you want your table to appear.
  2. Click the Table icon to open the Table Properties window.  
  3. Enter how many columns and rows you want in your table
  4. Select the appropriate option from the Headers drop down.
    • Accessible tables require at least a Header Row, if not both a Header Row and Column.
    • If your table does not need either a Header Row or Column, it is not tabular data and the information should not be in a table.
  5. Add a Caption (optional) to display above the table.
  6. Click OK.
  7. Enter your content into the table cells.

Edit Table Content

To edit the properties of a table you've already created in the WYSIWYG editor:

  1. Right-click anywhere in the table
  2. Click Table Properties.
  3. Make your desired changes
  4. Click OK.

To delete rows, add rows, insert columns or delete columns:

  1. Right-click on the cell, row, or column you want to affect
  2. Choose the appropriate options from the menu that appears

Accessibility Checker

You know our platform code is accessible to users with disabilities, but how accessible is the content you write for those pages? We’ve now made it much easier for you to test and improve on the accessibility of your page content.

As part of our continued efforts to increase the accessibility of our platform content, we’ve added an Accessibility Checker to the WYSIWYG toolbar for Body content. Simply click the last icon on the second row of the toolbar to run an accessibility checker across your text.

Using the Accessibility Checker

To use the Accessibility Checker:

  1. Create content as usual.
  2. Click the Accessibility Checker icon. 
  3. Follow the suggestions in the Accessibility Checker window.
  4. Save and Publish content.