HTML editor

Overview

The built-in HTML editor allows instructors, teachers, and administrators to create and edit content directly inside of courses, messages, widgets, and more.

This article will teach you how to access and use the various elements of the editor to create engaging and aesthetic content.

Please note the business platform defaults to the term course and the academia platform defaults to the term class. The terms course and class are interchangeable in this article.

The Toolbar menu

The HTML editor displays when editing content in courses, messages, widgets, and more. The toolbar consists of a menu bar and icons that allow you to edit content in the section.

Note that the screenshots in this article display within a course section, but the toolbar functions the same within courses, messages, and widgets. The Content builder to the left of the toolbar is only available when editing courses.

Course, Module, page section in edit mode with the Toolbar highlighted

The top menu bar consists of seven menus, which are covered in greater detail below.

Course, Module, Edit section with the top menus of the Toolbar highlighted

File

The File menu includes the following actions:

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.

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.

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.

Insert

The Insert menu includes the following actions for inserting images, videos, tables, links, and more.

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.

Format

The Format menu includes the following actions for formatting text.

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.

Tools

The Tools menu includes the following actions.

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.

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.

The Toolbar secondary menu

Below the primary menu, the toolbar consists of easily accessible drop-down options and icons for additional formatting.

Undo and Redo

Click the Undo icon to undo the previous action.
Click the Redo icon to redo the previous icon.

Paragraph and heading styles

Click the heading style drop-down menu to apply formats and styles to text.

Course, Module, Edit section with the Heading style menu active and highlighted

Font style

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

Font format

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

Text color

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

Text align

Click the align icon to align text.

Course, Module, Edit section with the Alignment menu active and highlighted

Bulleted list

Click the bulleted list icon to create and format a bulleted list.

Numbered list

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

Upload image and upload file

Click the upload image icon to upload an image.
Click the upload file icon to upload any files.

Clear formatting

Click the Clear formatting icon to clear styles that might have been brought across from copying and pasting content.

Background color

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

Advanced Toolbar

For additional functionality:

Click the more icon to display the advanced toolbar.

Course, Module, Edit section with the more icon highlighted

The advanced toolbar displays below the secondary toolbar, and includes additional options covered below.

Course, Module, Edit section with the Advanced toolbar icons highlighted

Indents and horizontal line

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.

Decrease indent, increase indent, and horizontal line icons

Emojis

Click the Emoji icon to open the Emojis keyboard.
Click an Emoji to insert it.

Course, Module, Edit section with the Emoji pop-up screen

Special characters

Click the Special character icon to open the Special Character pop-up.
Click a special character to insert it.

Course, Module, Edit section with the Special character pop-up screen

Advanced icons

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.

Course, Module, Edit section with the Create web conferencing menu active and highlighted

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.
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".

Course, Module, Edit section with a table selected and the Table properties icon highlighted

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.

Course, Module, Edit section with a spelling menu active and highlighted

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}}

Course, Module, Edit section with variables examples highlighted

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

Course, Module, Edit section with an image highlighted and the edit image toolbar active

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.

Upload image pop-up

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.

Course, Module, Edit section with text and an image selected, with Save as template highlighted on the right mouse click menu

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

Save as template pop-up

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.

Resources, Catalog page with the Resource type section highlighted in the Search panel

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.

Resources, Content template with Edit and Delete icons highlighted

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.

Resources, Edit content template screen

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.

How to use the HTML editor