WYSIWYG Basic Features
1) Content typed into the Editor defaults as a Paragraph, although this can be changed by highlighting any text with the mouse and selecting “Header” or other options from the drop down menu
2) Creating a hyperlink. Select the text that you want to be the link with your mouse. Then click on the "Link" (chain) icon in the editor (see the red #2 in the image above). A "Link" dialog box will open (see screenshot to the right). Choose the Link Type (URL, Link to anchor in the text, or email) depending on the type of link you are creating. Then either type the URL of an external website or click the "Browse Server" button to browse to a file on your website to link to (See File Manager). To make your link open in a new window or the same window, choose the Target tab and then select from the drop down menu.
3) Creating an Anchor. An anchor is a point inserted within the content of the page that can be linked to from another part of the page or from a different page entirely. Click in the content where you want the anchor set (you don't need to highlight or select anything) and then click the "Anchor" icon (see #3 in the top image). Type the anchor name in the dialog box that opens and click the green “OK” button. You can now link to the anchor as you normally would by creating a hyperlink and choosing the Link Type as "Link to anchor in the text" and then selecting the anchor's name from the drop down menu. See image below.
4) Inserting an Image. Clicking the "Image" icon (#4 in the top image) in the editor will open the "Image Properties" dialog box. If you know the URL of an externally hosted image type it in the URL field otherwise click the "Browse Server" button to browse to an image on your website. After the image has been selected, add a description in the Alternative Text field for those users that rely on a screen reader to access your website.
Aligning an image on the web page: While still in the "Image Properties" dialog box, you can set the alignment option and add horizontal and vertical spacing around your image. Alignment allows you to wrap text around the image or place the image to the left or right side of the content area. Experiment by clicking the different options and see how the image is moved around the text until you get the display you want. Vertical and horizontal space represent the white area between the picture and text. Having extra spacing is important for readability on the page. Insert a number designation (which is read as pixels) and then see how the image is shifted away from the text.
When you are satisfied with the look of the image and text click the green "OK" button to add the image onto the page.
Notes for uploading Images to the web: To ensure image clarity and formatting, it is important to size the image accordingly, prior to uploading. Recommended image resolution is 72 dpi (dots per inch) and images using the RGB (Red,Green, Blue) color mode is considered ideal for images displayed on a computer monitor. The dimensions of your uploaded image should match the dimensions you want the image to be displayed on the web page. If you resize the image in the WYSIWYG editor, it may pixelate your image (stretch the pixels across the screen) causing the image to look distorted.
5) Embedding Video. We strongly suggest uploading video content to a free third party service such as YouTube or Vimeo (due to large file sizes and hosting costs). The video can then be embedded by clicking the "Embed Media Content from Various Sites" icon (#5 in the top image). This opens the “Embed Media Content" dialog box as shown below:
You can enter/paste the URL to the video you wish to embed into the URL field. Click the green "OK" button and the video is placed into the content area as shown in the image below.
6) Inserting a table. Place the cursor at the insertion point of the editor (where the table is to be placed) and click the "Table" icon (#6 in the top image). The "Table Properties" dialog box opens where you can set the number of columns and rows. Experiment with cell padding (spacing within the cell) and cell spacing (spacing around each cell) to determine the white space in and around the table's cells. Set which side of the page the table is aligned to with the “Alignment” setting, whether you want Headers (text will be bold) or add a Caption. Set the width (which will be in pixels) of the table. The image below is color coded to show where the different properties of the table will display.
7) Inserting a horizontal line. To insert a horizontal line, just place your cursor in the text/content area where you would like to place the line and then click on the "Insert Horizontal Line" icon (#7 in the top image).
8) Inserting Special Characters. To add em dashes, en dashes, or any other special character, just click on the "Insert Special Character" icon (#8 in the top image). The "Select Special Character" dialog box will open, click on the character you need and it will automatically be inserted into your text.