WYSIWYG Content Editor
What is a WYSIWYG?
WYSIWYG (pronounced "wiz-ee-wig") is an acronym for, “What you see is what you get”. WYSIWYG is very similar to the text editor of most word processor applications.
The WYSIWYG editor is found on all content types and is one of the primary options used to display most content. You may notice that some options are not available, such as underlining text because underlining is used to indicate hyperlinks.
Icons and their meaning:
Format - Allows you to select the type of text you are entering so that the appropriate color and size can be applied.
Below you will find a list of the names of the format options and what they look like.
Paragraph
Heading 2
Heading 3
Heading 4
Styles - Select additional formatting for your text. The options depend on the type of text selected. e.g. If you select a bullet list, you are able to change the bullets from a numbered list to an alpha list.
Bold - Highlight text and click the B icon to make it bold.
Italic - Highlight text and click the I icon to make it italic.
Insert Horizontal Line - Easily add a horizontal line or divider across the page, creating a visual break between sections of content.
Insert Special Characters - WYSIWYG characters, special unicodes for subscripts, superscripts, and proper accents.
Establish where you would like the special character to appear and then:
- Have your cursor in the correct place.
- Click on the special character icon.
- Click on the desired special character.
- Click save.
Remove Format - Removes formatting from content.
Link - Insert link to other content. If you would like to make a button, follow these instructions: Once you have made the text that you want to be a button, select the Styles option and, from the menu, select the desired button type.
To create a link:
- Highlight the desired text.
- Click the link icon.
- Add the URL.
For links to internal sites, start typing the name of the page, and a list will automatedly populate.
For links to external sites, add the full URL (https://www.google.com).
- Click Save.
The referenced media source is missing and needs to be re-embedded.
To create a button:
- First create a link.
(See instructions above.) - Highlight the desired link.
- Select Styles in the dropdown menu.
4. Select the desired button type.
5. Click Save.
To link to an email address:
- Highlight the desired text.
- Click the link icon.
- Add "Mailto:" and then the email address.
(e.g., Mailto:Example@mednet.ucla.edu)
- Click Save.
To link to a phone number, follow these steps:
- Highlight the desired text.
- Click the link icon.
- Add "tel:" and then the phone number.
(e.g., tel:123-123-1234)
- Click Save.
Anchor link - A hyperlink that navigates users to a specific section within a webpage rather than an entirely new page. This facilitates efficient navigation, allowing users to quickly find and access the information they need without having to scroll through the entire document.
To add an anchor link, follow these steps:
- Go to where you want the link to take you.
- Click on the anchor link button.
- Type a unique and memorable name (e.g. "Example").
- Now go the the text you are linking from and highlight the text.
- Click on the link icon.
- In the URL field, type "#" and then your memorable name from step 3 (e.g. "#Example").
- Click save.
Insert Bullet List - Once you have selected a bullet list, you can apply additional formatting by changing the style.
Insert Numbered List - Once you have selected a numbered list, you can apply additional formatting by changing the style.
To change the starting number, follow these steps:
- Click on the down arrow beside the numbered list icon.
- In the "start at" field, change the number to the desired number.
- Click save.
To have your numbered list start in reverse order:
- Click on the down arrow beside the numbered list icon.
- Toggle the reverse order button.
- Click save.
Decrease Indent - Clicking the outdent button decreases the indentation level, creating a more structured and organized document. This function is commonly used to adjust the formatting of lists or paragraphs, enhancing overall visual appeal and document clarity.
Increase Indent - The indent button shifts text to the right, creating a visually distinct and organized layout. This feature is often employed for creating hierarchical structures, such as bullet points or numbered lists, to improve document readability.
Block Quote - Apply the block quote style to your highlighted text.
Insert from Media Library - Select to insert media (audio, documents, images, and videos).
Alert
Please note: If you are uploading a GIF, you cannot change the size of the image in the Editor or it will not function properly. GIF images must be left in their default size.
To add an image, follow these steps:
- Click on the insert media button.
- Choose image.
- Select the desired image.
- Click the insert selected button.
- Click save.
To add a caption, follow these steps:
- Click on the image, and the option image menu will appear above the image.
- Click on the caption icon.
- Add the caption to the bottom of the image.
- Click save.
To make an image a link when a user clicks on the image, follow these steps:
- Click on the image, and the option image menu will appear above the image.
- Click on the link icon.
- Add your link.
- Click save.
To change the alt text of an image on the page, follow these steps:
- Click on the image, and the option image menu will appear above the image.
- Click on the override alt text button.
- Add your new alt text.
- Click save.
Note: This will only affect the alt text on the current page.
To change the aspect ratio (size) of an image on the page, follow these steps:
- Click on the image, and the option image menu will appear above the image.
- Select the desired aspect ratio (size).
- Click save.
To change where the image is placed on the page, follow these steps:
- Click on the image, and the option image menu will appear above the image.
- Click on the desired placement of the image.
- Click save.
Undo Action - Easily correct unintended changes or mistakes, restoring to the previous state.
Redo Action - Restores changes that were undone using the "Undo" function, providing flexibility and control over the editing process.
Source - Work directly with source code (HTML code).