WYSIWYG Tutorial

Body

This tutorial will cover the user friendly box you'll use often while creating and editing pages.  The acronym WYSIWYG means What You See Is What You Get.

 

Example of a WYSIWYG input field:

Image
example

HOW TO

Step 1: To begin adding a file, either a photo a video or document, you will first select the image/musical note icon above the body text input field.

Image
WYSIWYG Add Photo

 

Step 2: If you're uploading a new photo, select the "Browse..." button and choose a photo from your computer to open.

Image
file upload

 

Step 3: On the next screen, add the required alternative text to help screen readers understand what the image depicts. Then select the blue "Save" button.

Image
alt text 3

 

Step 5: Your image should now have a blue check box next to it, select the blue button "Insert selected."

Image
checked

 

DONE! Congrats, you have successfully added an image.

 

Step 1: To begin adding a file, either a photo a video or document, you will first select the image/musical note icon above the body text input field.

Image
WYSIWYG Add Photo

 

Step 2: If you're uploading a new video, select the left side tab "Remote video" and enter the URL in the input field, then select "Add."

Image
remote video add

 

Step 3: On the next screen, simply select "Save" on the bottom right.

Image
save

 

Final Step: On the next screen, you'll see your video has been added and has a blue checkbox. Now select the blue "Insert selected" button to add the video to the WYSIWYG input field.

Image
insert

 

Video Added!

Step 1: To begin adding a file, either a photo a video or document, you will first select the image/musical note icon above the body text input field.

Image
WYSIWYG Add Photo

 

Step 2: If you're uploading a new document, select the left side tab "Document" and select the "Brose..." button to upload your document.

Image
add doc

 

Step 3: On the next screen, select "Save."

Image
next screen

 

Final Step: Your document is now selected (blue check box) and ready to be added to the page, use the blue "Insert selected" button to complete the upload.

Image
document selected

 

Document added!

Step 1: Type the text you want to add an internal (stmarys-ca.edu) or external link to.  Then select all the characters you want to link to and click the icon that looks like a chain "link" in the top right.

Image
select text

 

Step 2: Copy and paste an external url OR type the name/title of the internal (stmarys-ca.edu) page you would like the selected text to link to and select the page from the drop down.

Image
type link

 

Final Step: Select "Save" and view your new link inside the WYSIWYG input field.

Image
linked text