Overview
The HTML editor allows you to create content directly inside of your courses and classes, with formatted text, pictures, attachments, and links.

Please note CYPHER for business defaults to the term course. CYPHER for academia defaults to the term class. The terms course and class are interchangeable in this article.
The primary content editor is accessed within a section, which is within a module/lesson within a course/class.
You must be listed as a course instructor, teacher, co-instructor, or co-teacher in order to edit content.
Accessing the editor
To access the editor in an existing course:
- Access an existing course.
- Click an existing module/lesson.
- Select an existing section.
- Click Edit.
The Edit page displays, allowing you to edit the title and content of the section.
The editor consists of a menu bar and toolbar that allow you to create and format content.
The menu bar consists of seven drop-down menus.
File
The File menu includes the following actions.
Icon | Title | Description |
| New document | Clears the text window of all text/images/links. |
| Preview | Open a pop-up window to see a preview of the published content. |
| Print | Print the content in the text window. |
Edit
The Edit menu includes the following actions.
Icon | Title | Description |
| Undo
| Undo your most recent action.
|
| Redo | Redo your most recent action.
|
| Cut | Remove the selected text/image and store it in the clipboard. |
| Copy | Copy the selected text/image and store it in the clipboard. |
| Paste
| Paste text/image from the clipboard. |
| Paste as text
| Paste content from the clipboard as text only, no formatting. |
| Select all | Select/highlight all of the content in the text window. |
| Find and replace
| Find a word or phrase and replace with a new word/phrase (if applicable). |
View
The View menu includes the following actions for viewing text and characters within the text window.
Icon | Title | Description |
| Source code
| View/edit the source code in the text window.
|
| Show invisible characters | Displays invisible characters such as spaces and soft returns.
|
| Show blocks | Shows paragraph blocks within the text window. |
| Preview | Open a popup window to see a preview of the published content. |
| Editor help
| Open a popup window of Help Center information for the rich-text editor. |
Insert
The Insert menu includes the following actions for inserting images, videos, tables, links, and more.
Icon | Title | Description |
| Link | Insert a hyperlink to a URL.
|
| Media | Insert/embed a piece of media.
|
| Table | Insert and build a table. |
| Special character | Insert a special character. |
| Emojis | Insert an emoji. |
| Horizontal line
| Insert a horizontal line. |
| Page break
| Insert a break to start a new page. |
| Non Breaking space
| Insert a space that does not break the page. |
| Anchor | Insert an anchor/bookmark in a position/location. |
| Insert template
| Insert a saved template. |
| Save as template
| Save the highlighted text as a template. |
| Date/time
| Insert date or time options from the drop-down menu. |
| Edit equation
| Click to edit a highlighted equation. |
| Upload image
| Click to upload an image. |
| Upload file
| Click to upload a file. |
| Create web conferencing
| Click to add web conferencing to the text*. |
| Record audio
| Click to record audio directly in the text window. |
| Record video | Click to record video directly in the text window. |

* In order for the Create web conferencing options to display, the web conferencing app(s) must first be installed from the App center.
The Format menu includes the following actions for formatting text.
Icon | Title | Description |
| Bold
| Bold the selected text. |
| Italic | Italicize the selected text. |
| Underline | Underline the selected text. |

| Strikethrough | Strikethrough the selected text. |
| Superscript | Format the selected text as a superscript. |
| Subscript | Format the selected text as a subscript. |
| Code | Format the select text as code. |
| Blocks | Insert the appropriate block formatting from the drop-down menu. |
| Fonts | Select a different font from the drop-down menu. |
| Font sizes | Select a font size from the drop-down menu. |
| Align | Select a text alignment style from the drop-down menu. |
| Line height | Select the line height from the drop-down menu.
|
| Increase indent | Indent the text or paragraph to the right. |
| Decrease indent | Move the text or paragraph to the left. |
| Text color | Select the desired text color from the drop-down menu. |
| Background color | Select a background color from the drop-down menu. |
| Clear formatting | Clear formatting from the selected text. |
The Tools menu includes the following actions.
Icon | Title | Description |
| Source code
| View/edit the source code. |
| Word count | View the word and character count. |
Table
The Table menu includes the following actions to insert a table and modify the table structure.
Icon | Title | Description |
| Table | Insert a table. |
| Cell | Modification options for the selected cells from the drop-down menu. |
| Row | Modify, delete, and/or insert options for the selected row(s) from the drop-down menu. |
| Column | Modify, delete, and/or insert options for the selected column(s) from the drop-down menu. |
| Table properties | View and modify table properties such as width, height, borders, etc. |
| Delete table | Delete the selected table. |
Below the menu bar, the toolbar consists of easily accessible drop-down menus and icons for additional formatting.
- Click the Undo icon to undo the previous action.
- Click the Redo icon to redo the previous icon.
- Click the heading style drop-down menu to apply formats and styles to text.
- Click the font drop-down menu to change the font of your text.

- Click the font size drop-down menu to change the size of the text.

- Click the bold icon to bold text.
- Click the italic icon to italicize text.
- Click the underline icon to underline text.

- Click the text color icon to choose/change the color of the font.

- Click the align icon to align text.

- Click the list icon to create and format a bulleted or numbered list.

- Click the upload image icon to upload an image.
- Click the upload file icon to upload any files.
- Click the question mark icon to access the Editor help article.
For additional functionality:
- Click the arrow next to the shortcut row to expand the advanced toolbar.
- Click the Clear formatting icon to clear styles that might have been brought across from copying and pasting content.

- Click the Background color icon to add highlighting to text/images.

- Click the Decrease indent icon to decrease the indentation of text.
- Click the Increase indent icon to indent the text.
- Click the Horizontal line icon to insert a horizontal line.
- Click the Emoji icon to insert any number of emojis.

- Click the Special character icon to insert any number of special characters.

- Click the Insert/Edit link icon to insert a link to any URL.

- Click the Insert/Edit media icon to insert/embed a link to any URL.

- Click the Insert/edit equation icon to insert/embed a link to any URL.

- Click the Insert template icon to insert a template.

- Click the Source code icon to view the current page’s source code.

- Click the Record audio icon to record audio directly into the course page.

- Click the Record video icon to record video directly into the course page.

- Click the Create web conferencing icon to create a web conference link using one of the drop-down options.
- Note - Only web conferencing apps you have installed on your platform will display.

Best practices
Use these best practices to help you get the most out of the editor.
- To insert a line break instead of a new paragraph, press Shift + Enter.
- When embedding HTML widgets, view the text window in source code first.
- Click the View drop-down.
- Click < > Source code.
- Paste third-party content as plain text to avoid formatting errors.
- To wrap text around a picture:
- Upload the picture above the text you want to wrap around the image.
- Select the image.
- Click the align icon and select your preferred alignment option.

- In order to make the borders of a table invisible:
- Select the table.
- Click Table properties.
- In the General tab of the pop-up, set the Border width to "0".
- In the Advanced tab, select the border style to be "Hidden" or "None".

Spell checker
The editor includes a spell checker, which flags words that are not spelled correctly with a red line. To fix a spelling error:
- Press CTRL + Right mouse click.
- Select the correct spelling from the list of suggestions.
Embedding variables
You can embed variables into lesson pages by using the {{variable name}} format. This allows you to customize content for users and courses.
The following variables can be used in the content page:
- {{class_custom_field_1}}
- {{class_custom_field_2}}
- {{class_finish_date}}
- {{class_id}}
- {{class_location}}
- {{class_name}}
- {{class_name_with_link}}
- {{class_start_date}}
- {{completed_at_utc}}
- {{course_code}}
- {{credits}}
- {{days_in_class}}
- {{days_left}}
- {{deactivate_students_after}}
- {{organization_id}}
- {{organization_name}}
- {{section_code}}
- {{site_name}}
- {{site_name_with_url}}
- {{teacher_name}}
- {{teacher_name_with_link}}
- {{user_email}}
- {{user_first_name}}
- {{user_full_name}}
- {{user_full_name_with_link}}
- {{user_id}}
- {{user_last_name}}
- {{user_prefered_contact_method}}
- {{user_ssn}}
- {{userid}}
- {{why}}
Sizing Videos
If you add a video as a link in the HTML editor, you can set its size using this HTML code:
<a width=‘100’ height=’700’>link</a>.
- If you want the video to be auto-sized, you can omit one of the values (width or height).
- You can also use percent values to set the size of a video, for example, <width=‘100%’>.
Editing Images
The editor provides various options for editing images once they are uploaded. To edit an image:
- Click the image.
- A menu of options appears.
Icon | Description
|
| Rotate image counterclockwise |
| Rotate image clockwise |
| Flip image horizontally |
 | Flip image vertically |
| Crop image |
| Edit image properties |

If you select the Edit image properties icon, the Insert/Edit Image pop-up displays.
- Source: Displays the image source.
- Alternative description: This description is read by screen readers to aid visually impaired users.
- Width and Height: Adjust the size of the image.
- Note: Use the lock icon to ensure the image retains its width/height ratio.

When adding a new image, you can also add a description for screen readers:
- Enter a description in the Image description field.

Content templates
Content templates allow you to save fragments of HTML into the Resources Catalog and then easily insert them into content areas in the future. You can use this feature to create a library of common content elements that you often use in your content areas.
To add a fragment of HTML into a content template:
- Select the text and/or images in the HTML editor.
- Right mouse click.
- Select Save as template.

- Enter a title for the template.
- Click Ok.
- The content template will be saved in your personal library.

To access your saved content templates:
- Click Resources from the left navigation bar.
- Click Catalog from the fly-out menu.
- Filter by Resource type > Content template in the Search panel.
- Click your content template.

The content template displays. To see more details about a content template:
- Click Details.
You can now update the content section:
- Click Edit to edit the content.
- Click Delete to remove the template.

If you click edit, you can update the content, and share it with other users.
- Select Personal, Organization, or Business library if you would like the content template to be available to other users.
- After editing the content, click Save.

To insert a copy of the content template into a section:
- Access the section.
- Right mouse click.
- Select Insert Template.
- Select the template from the drop-down list.
- Click Save.