The HTML Editor integrates with all 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 dropbox folders, create ePortfolio artifacts, and create content topics.
Do one of the following to access the HTML Editor:
The HTML Editor has three ways in which you can view content:
The design view loads automatically when you access the HTML Editor. To open the source view or preview, click the HTML Source Editor icon or the Preview icon.
Tip Use the Toggle Fullscreen mode icon in the HTML Editor to maximize or minimize the default design view. You can also click and drag the Resize icon to resize the viewing area.
Use the HTML Editor design view to quickly create and format content without needing any prior knowledge of HTML. Enter your content and use the available controls to apply formatting to your text, insert images and tables, and create links. Click the Show All Components/Hide Extra Components icon to view additional controls.
Click the HTML Source Editor icon to display the Source Editor view. This view displays the code that structures and formats your content. Use this view if you have experience with HTML and prefer to author your content in HTML or want to apply styles from a cascading style sheet (CSS). If you have HTML-based content from another application, you can also copy and paste that code into the HTML Source Editor.
Note Administrators must set the ability for users to access the HTML Source Editor in the Config Variable Browser.
Click the Preview icon to display a preview of your HTML content in a new window. This allows you to preview content and ensure that it displays as expected prior to saving any changes.
Icon | Name | Function/Description |
---|---|---|
Editing options | ||
Cut | Copies and deletes the selected content to the clipboard. | |
Copy | Copies the selected content to the clipboard. | |
Paste | Pastes content from the clipboard. | |
Undo | Undoes the last action. | |
Redo | Redoes the last action. | |
Paste as Plain Text | Pastes content from the clipboard in plain text. | |
Paste from Word | Pastes content from the clipboard with Word formatting. | |
Text formatting options | ||
Format | Applies a preset style to selected text. | |
Font Family | Changes the font of selected text. | |
Size | Changes the size of selected font. | |
Apply Color | Changes the color of selected text. | |
Bold | Makes the selected text bold. | |
Italic | Makes the selected text italic. | |
Underline | Underlines the selected text. | |
Strikethrough | Puts a line through the selected text (as if it has been crossed out). | |
Subscript | Makes the selected text subscript. | |
Superscript | Makes the selected text superscript. | |
Paragraph formatting options | ||
Indent | Moves the margin of the current paragraph to the right. | |
Outdent | Moves the margin of the current paragraph to the left. | |
Unordered List | Inserts a bulleted list. | |
Ordered List | Inserts a numbered list. | |
Align Left | Aligns the selected paragraph to the left. | |
Align Right | Aligns the selected paragraph to the right. | |
Align Center | Aligns the selected paragraph in the center of the page. | |
Align Full | Fully aligns the selected paragraph (creating flush margins on both sides). | |
Left to Right | Tags the selected paragraph's text direction as left-to-right. This ensures that users' browsers render the text appropriately. Useful when the text direction of the paragraph differs from the system locale or other content in the HTML Editor. | |
Right to Left | Tags the selected paragraph's text direction as right-to-left. This ensures that users' browsers render the text appropriately. Useful when the text direction of the paragraph differs from the system locale or other content in the HTML Editor. | |
Insert options | ||
Insert Stuff | Enables you to insert media (including audio and video) files from a variety of sources. | |
Insert Image | Inserts an image at the current location of your cursor. | |
Insert Quicklink | Enables you to insert a quicklink to a resource inside Learning Environment. | |
Graphical equation | Launches the Equation Editor [14], allowing you to insert graphical equations. | |
MathML equation | Launches the Equation Editor [14], allowing you to insert MathMl equations. | |
LaTeX equation | Launches the Equation Editor [14], allowing you to insert LaTeX equations. | |
Insert Symbol | Enables you to insert symbols and other special characters. | |
Insert Line | Inserts a horizontal line separating paragraphs. | |
Insert Attributes | Enables you to add Title, ID, Class, Style, and Text Direction attributes to selected text without opening the Source Editor. | |
Table options | ||
Insert Table | Inserts a table at the current location of your cursor. Enables you to change table properties such as cell padding, cell spacing, alignment, height, width, etc. | |
Table Cell Properties | Enables you to change the properties of the cell your cursor is located in. | |
Table Row Properties | Enables you to change the properties of the row your cursor is located in. | |
Remove Column | Deletes the column your cursor is located in. | |
Remove Row | Deletes the row your cursor is located in. | |
Delete Table | Deletes the table your cursor is located in. | |
Insert Column Before | Adds a blank column before the column your cursor is located in. | |
Insert Column After | Adds a blank column after the column your cursor is located in. | |
Insert Row Before | Adds a blank row before the row your cursor is located in. | |
Insert Row After | Adds a blank row after the row your cursor is located in. | |
Cut Row | Copies and deletes the row your cursor is located in. | |
Copy Row | Copies the row your cursor is located in. | |
Paste Row Before | Pastes a previously copied or cut row before the row your cursor is located in. | |
Paste Row After | Pastes a previously copied or cut row after the row your cursor is located in. | |
Merge Table Cells | Joins selected cells together. Existing content within the cells merges together. | |
Split Table Cells | Splits the selected cell into two cells. Existing content inside the cell remains in the first cell; the second cell is empty. |
If you compose your content as text in another application (such as a word processor), you can copy and paste unformatted content into the HTML Editor using the paste features:
We strongly recommend that you remove any formatting before copying and pasting text into the HTML Editor, especially when pasting:
Copying formatted text from word processing applications and pasting it into the HTML Editor can add disruptive code to the application.
Note Internet Explorer 9 and older currently do not support dragging and dropping files from your desktop into Learning Environment.
You can use HTML Editor's Insert Stuff option to embed media files:
Note After this step your video note saves to Video Note Search. If you have permission to search and insert video notes, you can reuse this video in the future.
View other table options [20] available in the HTML Editor.
Once you insert a table into the HTML Editor, you can modify its appearance by accessing its table properties.
You can modify the appearance of a single cell inside a table by accessing table cell properties.
You can insert Quicklinks to existing course materials such as discussions, quizzes, dropboxes, and calendar items in the HTML Editor.
Note Users require the Manage Content permission to insert Quicklinks in to course files, ePortfolio items, learning objects, CD-ROM files, etc.
The Insert Quicklink feature also enables you to create the items you want to link to from within the HTML Editor. These items can function as placeholder links so you can work uninterrupted in the HTML Editor, then finish creating the item in the appropriate tool later.
If you choose: | Do this |
---|---|
Course File |
Note Internet Explorer 9 and older currently does not support dragging and dropping files from your desktop into Learning Environment. |
External Learning Tools |
|
LiveRoom |
|
URL |
|
Chat Checklist Discussions Dropbox Quizzes Self Assessments Surveys |
|
You can edit the properties of existing Quicklinks after adding them to the HTML Editor, or while inserting the Quicklink.
The Equation Editor enables users to insert mathematical equations within the HTML Editor. It supports the input of MathML and LaTeX, and includes a graphical editor where you can visually create equations. Depending on your org settings, you may not have access to all input methods.
Important The Equation Editor in Learning Environment 10.2 and onward does not require* Java support or have specific browser compatibility considerations.
*Note, existing equations created before Learning Environment 10.2 will still require Java Applet support but are up-converted to MathML upon an edit.
MathML is a standard adopted by the World Wide Web Consortium (W3C). It uses XML to describe mathematical notation by capturing both its structure and content. This enables MathML to support visual display and assistive technology access.
As a standard, Learning Environment stores and displays all equations in the MathML format, regardless of the format you use to enter equations. Learning Environment uses the MathJax JavaScript engine to display MathML equations.
Go to http://www.mathjax.org [21] to learn more about MathJax features.
Note Versions 9.4.1 and higher of Learning Environment only support MathML 3.0 markup. You might need to update existing equations if you wrote them using MathML 2.0 markup.
LaTeX is a typesetting system based on TeX. It provides a text syntax for complex mathematical formulae. Learning Environment stores equations entered in LaTeX format as MathML to ensure consistency and accessibility.
The Graphical Equation Editor is a Javascript-based application that features a tool bar equipped with a selection of buttons. This tool bar provides the necessary elements to construct your equations quickly and easily. Each button in the Equation Editor tool bar opens a palette of related mathematical symbols.
Before using the Graphical Editor:
Icon | Name | Description |
---|---|---|
|
General tab |
Add a template for building equations. Add and edit text in your equation using the Cut, Copy, Paste, Undo, Color, and other text editing functions. |
|
Symbols tab |
Add mathematical symbols to equations. |
|
Arrows tab |
Update or add arrows to equations. |
|
Greek and letters tab |
Update or add uppercase and lowercase Greek characters to equations. |
|
Matrices tab |
Update or add matrices to equations. |
|
Scripts and layout tab |
Add scripts or layouts to build equations. |
|
Decorations tab |
Add fences such as brackets and vertical bars around text fields. |
|
Big operators tab |
Update or add big operators to equations. |
|
Calculus tab |
Add a template for building Calculus equations. |
In the HTML Editor, click the Insert drop-down list, then choose one of the following math formats:
Links:
[1] http://staging.docs.d2l/en/accessing-html-editor
[2] http://staging.docs.d2l/en/html-editor-views
[3] http://staging.docs.d2l/en/using-spell-checker-in-html-editor
[4] http://staging.docs.d2l/en/creating-content-in-design-view-of-html-editor
[5] http://staging.docs.d2l/en/pasting-content-into-html-editor
[6] http://staging.docs.d2l/en/inserting-images-in-the-html-editor
[7] http://staging.docs.d2l/en/inserting-media-files-in-the-html-editor
[8] http://staging.docs.d2l/en/inserting-tables-in-html-editor
[9] http://staging.docs.d2l/en/editing-table-properties
[10] http://staging.docs.d2l/en/editing-cell-properties
[11] http://staging.docs.d2l/en/inserting-quicklinks-in-html-editor
[12] http://staging.docs.d2l/en/creating-new-items-within-quicklinks
[13] http://staging.docs.d2l/en/editing-html-properties-of-quicklinks
[14] http://staging.docs.d2l/en/inserting-equations-html-editor
[15] http://staging.docs.d2l/en/accessing-equation-editor
[16] http://staging.docs.d2l/en/creating-equation
[17] http://staging.docs.d2l/en/editing-equation
[18] http://staging.docs.d2l/en/deleting-equation
[19] http://staging.docs.d2l/en/taxonomy/term/2
[20] http://staging.docs.d2l/en/creating-content-in-design-view-of-html-editor#table_options
[21] http://www.mathjax.org