HTML Editor | How to add text in the Editor

The HTML Editor integrates with all Brightspace Learning Environment tools that have HTML content creation capabilities. For example, the HTML Editor is available when you edit discussion topics, create custom instructions for assignments,  and create content topics.

In this article, you will learn

Remember that the Editor tool can be found in many different locations within your course. For more information, please visit: where to find the Editor

Adding text

  1. Add a Title
  2. Click on the three dots icon on the top right corner of the text box
Add a Title, Click on the three dots icon on the top right corner of the text box

This will open more options in the formatting toolbar

Explanation of the toolbar

1. Formatting icons

There are several options to format your text

Formating tool bar
1. Text style
  1. Click on downward arrow next to paragraph, a drop-down menu will appear choose the style of the text
Click on the downward arrow next to paragraph
2. Typographical emphasis

You can format your text using a typographical emphasis

  • Bold - to make the selected text bold
  • Italic - to make the selected text italic
  • Underlined - to underline the selected text
  • Strikethrough - to make a presentation of words with a horizontal line through their centre

 

  1. Click on the downward arrow next Underline icon, a drop-down menu will appear with more typographical emphasis options
Click on downward arrow next to underline icon

A drop-down menu will appear,

  • Superscript - to make a character slightly above the normal line type
  • Subscript - to make a character slightly below the normal line type
Underline, Strike-through, Superscript and Subscript
3. Font colour

Choose a font colour,

  1. Click on the font colour icon 
Click on the font colour icon

This action will open a pop-up window,

  1. Select a colour
  2. Click on the blue button Save
Select a colour, then click on the blue button save
4. Text Alignment format

It is a paragraph formatting attribute that determines the appearance of the text in a whole paragraph

  1. Click on the text allignment icon , a drop-down menu will appear
Click on the downward arrow next to the Bullets icon

Text alignment options will appear,

  • Left - to make the text aligned to the left
  • Center -  to make the text aligned to the centre
  • Right - to make the text aligned to the right
  • Justify - to make the text aligned with letter-spacing so that the text falls flush with both margins
  • Left to Right - to make the text aligned on the left-hand side ("Flush left")
  • Right to left - to make the text  aligned on right to left ("Flush right")

Right to left can be useful when text is read in other languages such as Persian, Arabic and Hebrew. It can also be used to set off special text in English such as attributions to authors of quotes printed in books or text associated with an image to its right. It is often used when formatting tables of data.

Text alignment options
5. List templates and indentation format

It can be used to group a set of a related item, they can be ordered or unordered

  1. Click on the bullet list icon
Click on the downward arrow next to the Bullets icon

List and indentation options will appear,

  • Bulleted List - to make a group set of related items in no particular order
  • Numbered List - to make a group set of related items in a specific order
  • Increase Indent -  to increase the distance between the text and left page margin
  • Decrease Indent - to decrease the distance between the text and left page margin
List templates and indentation options

2. Media icons and more

There are several media icons and more insert options within the Editor,

media icons tool bar
1. Insert Stuff

Enables you to insert media (including audio and video) files from a variety of sources

For more information, please visit: How to Insert Stuff

3. Insert Image

Enables you to insert an image

For more information, please visit: How to Insert an Image

4. Insert Graphical Equation

Enables you to insert graphical equations

For more information, please visit: How to insert Graphical Equation

5. Table and properties

To Insert a Table,

  1. Click on the table icon
Click on the downward arrow next to the table icon

In the drop-down menu,

  1. Hover over to Insert Table
Hover over to Insert Table

For editing and further table properties,

For editing and further table properties,
6. Other Insert Options

For more inserting options,

  1. Click on the plus sign (+)
Click on the downward arrow next to the plus sign

Other insert options will appear

  • Insert Attributes - add Title, ID, Class, Style, and Text Direction attributes to selected text without opening the Source Editor
  • Insert Divider - add a horizontal line separating paragraphs
  • Insert Emoji - add an emoticon
  • Insert Symbol - add symbols or other special characters
  • Insert Code - add Code, with the possibility to select between 23 programming languages and add the code into the interface to format before inserting it into the Editor
other insert options

3. Font Formatting Options

1. Font

Choose a font for your text,

  1. Click on the downward arrow to choose a font
Click on the downward arrow to choose a font

From the downward menu:

  1. Select a Font
select a font
2. Font size

Choose a font size for your text,

  1. Click on the downward arrow to choose your font size
Click on the downward arrow to choose your font size

From the drop-down menu,

  1. Select a Font size
Select a Font size

4. Extra components

The HTML Editor has four options to be able to view content,

Accessibility checker, word count, preview and source code

The Accessibility Checker does not replace real-user testing, especially when having interactive activities that are imported to the course.

  1. Accessibility Checker - to catch common accessibility issues on static HTML content and offer suggestions to help fix some issues on the spot
  2. Word Count - to display the word count
  3. Preview - to display the content and ensure that it displays as expected prior to saving any changes
  4. Source Code - to display the source editor view, it displays the code that structures and formats the content

5. More options

After clicking on the three dots, extra components will appear on the left side of the bottom bar in the HTML Editor

Undo and Redo icons
  1. Undo and Redo icons - to reverse a mistake or to restore a previously done action

Now you know how to add text in the Editor tool in Brightspace!