Using the WYSIWYG editor

by Ashley Cade | Last edited: 12/27/2011

Overview

Content is added using a WYSIWYG editor (What You See Is What You Get). What a user sees in this environment is what they will get when the content is published. Each of the icons have been explained below.

First Row of Icons

  • B: bold text
  • I: itlaicize text
  • U: underline texte
  • ABC: strikethrough text
  • Text can be justified left, center or right
  • Scissor: Cut text
  • Two Pages: Copy text
  • Paste from Text: Removes all text formatting and extraneous code in your copied text.
  • Paste from Word: Clears any code but preserves to Word formatting. Use this if you're pasting from Microsoft Word.
  • "a": Will select all text
  • Bullets: Create an unordered list
  • Numbers: Create an ordered list
  • Indent and Outdent text
  • Styles: custom styles for your site.
  • Format dropdown: Select different headers for text on page

Note -when typing in content, use the Enter key to begin a new paragraph. To start a new line and not begin a new paragraph, use Shift-Enter to tab one line instead of a paragraph retrun.

Second Row of Icons

  • Chain: Hyperlink, cross reference to media or other pages
    • Target: Rule of thumb -if you want the link to go to an external website you want to keep your website open, therefore, make sure it is "Open in a new window". 
    • If you are linking within your website, "Open Link in the same window"
  • Broken Chain: de-links the link that is currently selected in the WYSIWYG
  • Tree image: Choose from pictures you've already uploaded and insert them into the CMS.
    • You can take photos from other sites by copying and pasting but if the site goes down so does the image.
    • Appearance Tab
    • Advanced Tab -Can have one space display more than one image; when they mouse over it will change.
  • Movie: Insert or edit embedded movies
  • Anchor: When you have a page with a lot of text and you want people to be able to skip down to a particular area, use an anchor.
    • For example, let's say a page called "About Us" has large amounts of text. You want to be able to jump down to a section that explains your history. Highlight the text you want to jump down to and select the anchor icon. Name the anchor something simple. Note that this is case sensitive and avoid using spaces or special characters. Remember what you name this anchor. For this example, let's name the anchor "history".
    • Go to the text that will send the user to the history section and select the link icon. In the URL field, paste in the URL for page that the contains the section you want to jump to. Type in "#" and then the anchor name as you wrote it in the first step. (Ex: http://your-domain.org/about-us/#history).
  • HTML: Code editor for users who may want to access raw html code. The system builds the HTML automatically. 
  • Table Icon: Use to insert tables
  • Table Row Properties: Format rows in table
  • Table Cell Properties: Format cells in table
  • Use icons with rows and columns to add and delete as needed
  • Split merged table cells
  • Merge Table cells
  • Eraser: Removes formatting from the highlighted text
  • Brush: Cleans up messy code (tightens things up once you're done)
  • Toggle Full Screen Mode: changes editor to full screen mode

Note: the CMS will automatically convert email addresses to links on your live site.

 

Related articles

All About Video

All About Images

Linking to pdfs, mp3s and other media

Feedback

Was this resource helpful?