WYSIWYG basics

Editing page content

Best Practices

TIP: If the editing window is too small, click the full screen icon. To return to the regular view, click the full screen icon again.

Best Practice: Use headings appropriately. The header formats should only be used to provide semantic information about the hierarchy of the page content and not solely for the purpose of displaying text of different sizes.

Editing a page in the Web CMS is very similar to editing a document using a word processor. Once you have selected a page to edit, select the Edit/Content tab to add or change content.

The edit menu tab.

Using the WYSIWYG

When a user clicks Edit on most pages, the default region opens in the WYSIWYG (“What You See Is What You Get.”) editor. The editor has the same functionality and features you are most likely accustomed to using in a standard word processor. The functions available in the WYSIWYG are all available at the top of the editing content window:

    WYSIWYG Icon Function
    icon: insert custom characters Insert custom characters (e.g.: copyright symbols or accent marks)
    icon: super- sub-script Apply subscript or superscript
    icon: bold etc Bold, italic, underline, strike-through
    icon: center etc Align left, center, right, justified
    icon: styles Float text left or right around an image
    icon: text formats Available text styles (controlled by the template)
     icon: msword Paste
     icon: find replace Find/Replace
     spellchecker Spell-checker
    icon: lists Bullets and numbering
     icon: outdent indent Outdent, indent
    icon: undo redo Undo, redo
    icon: link unlink anchor Link, break link, insert anchor
    icon: insert edit image Insert/edit image
    Multimedia Insert multimedia
    icon: horizontal rule Insert a horizontal rule
    table Insert a data table
    icon: clean code Cleanup code/remove unwanted formatting
    icon: remove format Remove formatting from a selection
    icon: html Edit HTML source code
    icon: toggle Show/hide guidelines and invisible elements
    icon: full-screen Toggle full screen mode

      Learn more: The Hannon Hill website has a short video showing how each of the above functions works: http://www.hannonhill.com/kb/videos/product-demos/wysiwyg.htm

    Styles and formats in the WYSIWYG

    Formats allow you to cleanly format text via the WYSIWYG. The formats available are Paragraph, Address, Preformatted and Headings 1-6.

    • Paragraph: Normally, text for general content uses the paragraph format by default. 
    • Address: Used to wrap content that provides contact information for a document or a major part of a document.
    • Preformatted: Text is displayed in a fixed-width font preserves both spaces and line breaks. Often used to display computer code.
    • Headings: Provide semantic and structure information about the hierarchy of the page content much like outline headings. H1 is the most important heading and H6 is least important.

    To select a format for existing text, simply highlight the text and select the format from one of the drop down boxes on the left side of the toolbar.

    Alternatively, you may place your cursor on the desired line, select your format from one of the drop down boxes and any new text typed will automatically be formatted with the selected style.

    Styles are set by the Web CMS administrators. Styles can be applied to any element in the WYSIWYG editor. Currently, there aren't many style available. If you need to know more about the function of the available styles or wish to suggest additional styles, please contact the Web CMS Team.

    Other WYSIWYG functions

    Beyond editing and formatting text, you can use the WYSIWYG editor to add content such as imageslinks and data tables.