Text Editor

WYSIWYG

Quick Start Guide

Logging in to Your Website

Main Navigation Bar

Finding a Published and Unpublished Page

Content Types

WYSIWYG Content Editor

Glossary

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.

Text Editor

Icons and their meaning:

Paragraph  

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 

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.

Subscript - A formatting style that displays text, numbers, or symbols slightly below the regular text line in a smaller font. This is used in chemical formulas, mathematical expressions, and technical documentation.

Superscript - A formatting style that displays text, numbers, or symbols slightly above the regular text line in a smaller font. Used for footnotes, mathematical notations, scientific formulas, and to clarify information without disrupting the main text flow.

Special Character

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:

  1. Have your cursor in the correct place.
  2. Click on the special character icon.
    Insert Special Character button in content editor
  3. Click on the desired special character.
    Special Character Menu
  4. 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:

  1. Highlight the desired text.
  2. Click the link icon.
    Link button for the content editor
  3. 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).
    Example of URL field
  4. Click Save.
    The referenced media source is missing and needs to be re-embedded.

To create a button:

  1. First create a link.
    (See instructions above.)  
  2. Highlight the desired link.
  3. Select Styles in the dropdown menu.
    Styles menu in Content Editor

4.    Select the desired button type. 
5.    Click Save.
 

To link to an email address:

  1. Highlight the desired text.
  2. Click the link icon.
    Link button for the content editor
  3. Add "Mailto:" and then the email address. 
    (e.g., Mailto:Example@mednet.ucla.edu)
    Example of URL field
  4. Click Save.

To link to a phone number, follow these steps:

  1. Highlight the desired text.
  2. Click the link icon.
    Link button for the content editor
  3. Add "tel:" and then the phone number.
    (e.g., tel:123-123-1234) 
    The referenced media source is missing and needs to be re-embedded.
  4. 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:

  1. Go to where you want the link to take you. 
  2. Click on the anchor link button.
    Anchor button for the content editor
  3. Type a unique and memorable name (e.g. "Example"). 
    anchor link text editor
  4. Now go the the text you are linking from and highlight the text.
  5. Click on the link icon. 
    Link button for the content editor
  6. In the URL field, type "#" and then your memorable name from step 3 (e.g. "#Example"). 
    anchor link text editor
  7. 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: 

  1. Click on the down arrow beside the numbered list icon. 

    Numbered List button for the content editor

  2. In the "start at" field, change the number to the desired number. 

    Number list options dropdown
  3. Click save. 

To have your numbered list start in reverse order:

  1. Click on the down arrow beside the numbered list icon. 

    Numbered List button for the content editor

  2. Toggle the reverse order button. 

    Number list options dropdown
  3. 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.

Media Library

Insert from Media Library - Select to insert media (audio, documents, images, and videos). 

 

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:

  1. Click on the insert media button.
    Media Library button in content editor
  2. Choose image. 
  3. Select the desired image. 
  4. Click the insert selected button.
    Image upload menu
  5. Click save.

 

To add a caption, follow these steps: 

  1. Click on the image, and the option image menu will appear above the image.  

  2. Click on the caption icon.  

    Example of the caption icon for images
  3. Add the caption to the bottom of the image. 
  4. Click save.

 

To make an image a link when a user clicks on the image, follow these steps: 

  1. Click on the image, and the option image menu will appear above the image. 

  2. Click on the link icon.   

    Link button for the content editor

  3. Add your link.  

    Adding a link to a text box
  4. Press the green check mark
  5. Click save.

 

 

To change the alt text of an image on the page, follow these steps:

  1. Click on the image, and the option image menu will appear above the image. 

  2. Click on the override alt text button. 

    Alt text override text field

  3. Add your new alt text.  

    Example alt text override button
  4. 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: 

  1. Click on the image, and the option image menu will appear above the image. 

  2. Select the desired aspect ratio (size).  

    Example of the aspect ratio menu
  3. Click save.

 

To change where the image is placed on the page, follow these steps: 

  1. Click on the image, and the option image menu will appear above the image. 

  2. Click on the desired placement of the image.  

    Image placement option
  3. 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).