WYSIWYG Editor

Content Items are entered into Catalog using a WYSIWYG editor. A WYSWIWYG editor is a 'What You See is What You Get' style of editor, that provides simple tools to ensure consistent formatting across your content.

This guide can be used to help identify the various tools, their locations in the menu, any keyboard shortcuts available, as well as suggested use cases.

Cut, Copy, and Paste

Cut

You can cut content from the editor in one of the following ways:

Highlight the information you want to cut from the content, select Edit from the menu, and then select Cut.
Highlight the information you want to cut, and then press CTRL+X (or ⌘+X).

Copy

You can copy content from the editor in one of the following ways:

Highlight the information you want to cut from the content, select Edit from the menu, and then select Copy.
Highlight the information you want to cut, and then press CTRL+C (or ⌘+C).

Paste

You can paste information into the editor in one of the following ways:

With the content copied to your clipboard, place your cursor in the editor where the information should appear, select Edit from the menu, and then select Paste.
With the content copied to your clipboard, place your cursor within the editor where the information should appear and then press CTRL+V (or ⌘+V).

Paste as Text

You can use the Paste as Text function when you want to copy information from another source, but you don't want to copy the formatting:

With the content copied to your clipboard, place your cursor in the editor where the information should appear, select Edit from the menu, and then select Paste as text.
With the content copied to your clipboard, place your cursor within the editor where the information should appear and then press SHIFT+CTRL+V (or OPTION+Shift+⌘+V).
Note: When copying and pasting from a source such as MS Word or another web page, it is a best practice to use the Paste as Text method to ensure that residual formatting from the source is not entered into the editor.

Select All, Undo and Redo

Select All

The Select All tool can be used to select all of the content within the editor at once. This is helpful if you need to remove the entirety of the content, or if you want to copy everything to another location. You can use either of the following options:

Select Edit from the menu, and then click Select All.
Click into the editor, and then press CTRL+A (or ⌘+A).

Undo

Undo will remove the last action you took within the editor. You can use it repeatedly to step back further, as long as the edits were made within the same session. You can use either of the following options:

Select Edit from the menu, and then select Undo.
Press CTRL+Z (or ⌘+Z).

Redo

Redo is especially helpful if you've pressed 'Undo' too many times - it'll restore the most recent action that was removed. You can use either of the following options:

Select Edit from the menu, and then select Redo.
Press CTRL+Y (or ⌘+Y).
Note: The Redo option will only be available if you have first performed an 'Undo' action.

Find and Replace

The Find and Replace actions function as they typically would, and are performed from the same menu:

Select Edit from the menu, and then select Find and Replace.
Press CTRL+F (or ⌘+F).

Screenshot of Find and Replace Menu

Note: The Find and Replace tool will only function within the single Content Item. It is not a catalog wide tool.

Formatting Text

These are standard formatting options, which function the same as they do in other programs. The options for using them, along with any available shortcut keys are as follows:

Bold; CTRL+B (⌘+B)
Italic; CTRL+I (⌘+I)
Strikethrough
Underline; CTRL+U (⌘+U)
Superscript/Subscript; these items do not appear on the main toolbar, but you can find them under the Format menu.

These options allow for text color changes, highlights, or removing applied formatting. The options for using them are as follows:

Text Color; selecting this icon allows you to change the color of selected text from a menu of color options.
Text Background; selecting this icon allows you to change the background highlight of selected text from a menu of color options.
Clear Formatting; this item does not appear on the main toolbar, but you can find it under the Format menu.

These options change the font or size of the text used in the content. The options for using them are as follows:

Paragraph blocks; using this drop-down menu allows you to select a pre-formatted style of text to apply to an entire paragraph.
Font and size selections; using this drop-down menu allows you to adjust the font or size of a selection of text within a paragraph.

Alignment

In addition to selecting these directly from the toolbar, they are also found under the Format menu, under Align.

Left, Center, Right, Justify, or No Alignment

Note: Selecting an alignment option will apply the style to the entire paragraph of text, not just a single line.

Links

Links are used to direct users to other content - whether inside your catalog, or to another, external site. Both links can be created using the link tool, under the insert/edit link icon ().

Link to Catalog Content

Links to other sections of catalog content are helpful when directing users within the text, rather than making them locate items through the navigation.

For example, you may have descriptive text within a department that refers the potential student to a program or course for more information:

Example of content linked to other catalog content

To create a link to another section of catalog content, you will need to begin by identifying the URL of the specific catalog page.

Within your selected Catalog, navigate to the Content Items tab.
Click on the title of the Content Item you would like to link to.
Click Preview Catalog in the upper-right corner.

Within the URL bar of your browser, copy the URL starting with the #. An example of URL may look like this: #/content/[item_id_number]

With the content url within your clipboard, return to the Content Items tab, and click on the Content Item you would like the link to appear within.
Select the content where you want to add the link, and click on the insert/edit link icon ().

In the URL field, paste in the content URL.
The Text to Display field can be used to enter text that will display on the catalog rather than the URL. This allows you to have links that are comfortably embedded within natural language.

The Title field offers advisory information about the URL element itself, similar to alt text for an image. It will be visible only if the user hovers over the URL.

The Target field is used to determine if you would like the user to open in a new window/tab, or the same window when clicked.

Note: A general recommendation would be to leave it set to 'none' and allow the end user to choose how it should behave. Some users may have their browser set to behave in a specific way when links are clicked, or they may use the center mouse button to open a window/tab based on their preferences.

Once the relevant fields have been filled in, click the Ok button to save the link.
The Content Item will save automatically as you work, and the changes will be live immediately on the catalog.

Note: These relative links will not function in the PDF version of the catalog.

Link to an Anchor within Catalog Content

Anchors are used to allow the user to quickly navigate to a specified location on large pages of content. They must be placed into the content before you can create a link to them.

These are commonly used within navigational elements such as a table of contents or a directory.

To create a link to an anchor within the page, you will need to begin by creating a unique ID within the page content where you want the user to land.

Within your selected Catalog, navigate to the Content Items tab.
Click on the title of the Content Item you would like to link to, and place your cursor in the content where you would like to insert the anchor. Anchors are commonly placed next to headings within the document, but you can place them where you see fit.
Select the Insert menu, and then select Anchor.

Provide a unique ID for the anchor.

Note: A best practice for naming anchors is to use the title of your associated heading with no spaces. This makes them easier to recall for linking to later. For example, an anchor for a section titled "Anesthesiology Department" might use an anchor titled "anesthesiology_department."

Note: If you are comfortable working directly with HTML, you can add the anchor into the Source Code instead.

Once added, a small anchor icon will appear next to the item indicating it has been set.

Once an anchor has been set, you can create a link to it from another section of this page.

Enter your cursor in the content where you would like to place the link, and click on the insert/edit link icon ().

Leave the URL field empty.
The Text to Display field can be used to enter text that will display rather than the URL. This allows you to have links that are comfortably embedded within natural language.
The Title field offers advisory information about the URL element itself, similar to alt text for an image. It will be visible only if the user hovers over the URL.
The Anchors field is used to select the previously established Anchor. Once selected, the URL field will also update.

The Target field is used to determine if you would like the user to open in a new window/tab, or the same window when clicked.

Once the relevant fields have been filled in, click the Ok button to save the link.

The Content Item will save automatically as you work, and the changes will be live immediately on the catalog.

Note: These relative links will not function in the PDF version of the catalog.

Link to External Content

Links to information outside of the catalog content are helpful when directing users back to your institutional site, or another location on the web.

Within your selected Catalog, navigate to the Content Items tab.
Click on the Content Item you would like the link to appear within.
Place your cursor within the content where you want to add the link, and click on the insert/edit link icon ().

In the URL field, enter in the full URL, including the HTTP://.
The Text to Display field can be used to enter text that will display rather than the URL. This allows you to have links that are comfortably embedded within natural language.

The Title field offers advisory information about the URL element itself, similar to alt text for an image. It will be visible only if the user hovers over the URL.

The Target field is used to determine if you would like the user to open in a new window/tab, or the same window when clicked.

Once the relevant fields have been filled in, click the Ok button to save the link.
The Content Item will save automatically as you work, and the changes will be live immediately on the catalog.

Lists

There are two types of lists that are available to use when creating content - ordered ( Ordered List icon numbered) and unordered ( Unordered List icon bulleted).

Ordered Lists

An Ordered list provides a numbered list option.

You can begin a numbered list by either:

Placing your cursor within the content and then clicking on the icon. This will enter the first numbered item, and you can then add your content and press enter to receive the second number.
You can add your list of items into the content first, pressing enter between each line, then select them all and then click the icon.

Each time you press enter, a new numbered item will be added.
You can change the display of the numbering by using the drop-down menu next to the icon in the toolbar.

Once the content has been added, you can indent the content by using the Tab key. Once you have an indented option, you can use the drop-down menu to adjust the display. For example, if you are looking to have a numbered list with indented alphabetical items as well.

Unordered Lists

An Unordered list provides a bulleted list option.

You can begin a bulleted list by either:

Placing your cursor within the content and then clicking on the icon. This will enter the bullet, and you can then add your content and press enter to recieve the second.
You can add your list of items into the content first, pressing enter between each line, then select them all and then click the icon.

Each time you press enter, a new item will be added.
Once the content has been added, you can indent the content by using the Tab key. Once you have an indented option, you can use the drop-down menu to adjust the display. For example, if you are looking to have a bulleted list with indented items as well.

Images

Images are used to add visual interest to your catalog, and are added using the the Insert Image icon ( Unordered List icon ).

An image needs to be hosted in order to be used on the catalog. Many institutions have a specified hosting solution for images. Once your image has been uploaded to your hosting solution, paste the URL into the URL field.

If you would prefer, you can also drag the image directly into the editor to house it within the catalog. If using this method, you will need to select the image and then click Edit Image to adjust the properties.

Screenshot of the Image menu

The Image Description field will house the alt text for the image. As a best practice, alternative text should be entered for every image, and should be a short sentence to describe the image.
The Dimensions will allow you to adjust the size of the image. A best practice would be to use the image in the size you need it to be, to ensure quick load times for the end user.
After an image has been added, you can click on it again within the editor to access a sub-menu of options:

Screenshot of the Image options

Rotate Clockwise/Counter Clockwise

Rotates the image 90 degrees in either direction.

Flip Horizontal/Vertical

Flips the image either horizontally or vertically.

Edit/Options

Edit Image will provide an image editor with additional adjustment options.
Image Options will open the insert/edit image menu.

The alignment tools in the toolbar can be used to set the image to the right or left, and this will allow text to wrap around the image. If no alignment is specified, the image will be entered on a new paragraph break and the text will not wrap around it.

Note: If you are comfortable working directly with HTML, you can use the Source Code option to apply additional adjustments, such as the padding, margins, or borders.

Tables

The Insert/Edit Table icon () will open a sub-menu of options, which allows you to determine the size of the table before inserting it into the page.

Screenshot of the Table options

The first option of the sub-menu is used to define the size of the table by hovering over the number of cells you would like to include.
Once selected, the table cells will be visible in the editor, along with an additional row of options for editing.

Screenshot of the a new table

Table Properties/Delete Table

The Table Properties option will open the Table Properties menu, which provides options for adjusting the width, height, cell spacing and padding, borders and captions, or the alignment.

Width/Height:: Allows you to specify the specific size of the table. As a best practice, we recommend that you use a percentage when setting the width of your table. Defining the size in pixels will create a fixed width, preventing a responsive display.
Cell Spacing/Padding:: Cellpadding refers the space between the border of a table cell and its contents, while cellspacing defines the space between the cells.
Border:: The default value is 1, which will provide a 1 pixel border around the table. You can increase/decrease the value to adjust the thickness of the border.
Caption:: Specifies the caption/title of a table.
Alignment:: Adjusts the alignment of the content within the table cells. the default is to left-align items, but you can adjust as needed.

The Advanced tab of the Table properties menu allows you to further style the border - changing the color or style as needed.

Insert Row Before/After and Delete row

Options for adding additional rows before or after the selected cell, as well as to remove a row entirely.

These options are also available in the table drop-down menu under Row.

Insert Column Before/After and Delete Column

Options for adding additional columns before or after the selected cell, as well as to remove a column entirely.

These options are also available in the table drop-down menu under Column.

Source code

The Source Code tool allows extreme flexibility in how you would like to style your content, by letting you modify the HTML directly. You can access it by selecting Tools and then Source Code.

Note: Some options will not be available for use in the editor, even through the Source Code. Anything entered within the head or body tags, styles, or scripts will be stripped upon saving.

Note: Using the source code tool will require a functional understanding of HTML and CSS. For information on learning how to work with these languages, visit: W3Schools.

Articles in this section

Cut, Copy, and Paste

Cut