The content editor allows you to add and format text, insert equations and hyperlinks, tables, and attach different types of files to create content. The editor appears throughout the system as the default editor.

The content editor or WYSIWYG (What You See Is What You Get) editor is based on the industry standard TinyMCE platform. TinyMCE is a javascript-based WYSIWYG content editor that provides a stable, robust user experience. The legacy WebEQ equation editor has been replaced with a new mathML equation editor (WIRIS).

The content editor is always available to all users. Your institution can control the availability of specific tools within the content editor, but users no longer need to explicitly opt in or opt out of using the content editor.

Your instructor and institution control the content editor's features and availability. If you have difficulty accessing the content editor, contact your institution for assistance.

Two Views of the Content Editor

The content editor has two view modes: simple mode and advanced mode. Change the view in the upper-right corner of the content editor.

Simple Mode

The simple mode contains a minimal set of the most used text formatting functions. Click the show more ( ) function—represented by two down pointing arrows—to access more editor functions. To learn more, see Simple Content Editor Features.

Advanced Mode

The advanced mode includes every available formatting and object attachment function. Click the show less ( ) function—represented by two up pointing arrows—to view only one row of functions. To learn more, see Advanced Content Editor Features.

Functions not currently available appear grayed out. For example, the functions to apply or remove a hyperlink are available only when you select text or an object in the text box.

Your institution can disable certain functions such as spell check and the math editor.

Depending on your institution's HTML policy, certain tags and attributes are not allowed in the content editor and will not work. If you have questions about this, contact your instructor or institution about being granted the appropriate privilege for using unrestricted/trusted HTML input.

Adding and Editing Content

By default, Blackboard Learn formats text to 12-point, left-justified Arial. Use the content editor functions to apply other formatting. With the mouse pointer positioned in the text box, you can use four methods for adding, formatting, and editing text and objects:

Best Practice: Copying and Pasting Text to Prevent Loss

To protect against losing work if an internet connection loss or software error occurs, you may choose to type in an offline simple text editor, such as Notepad or TextEdit, and copy and paste your work into Blackboard Learn.

Alternately, before submitting or saving, you can select and copy all of the text typed in Blackboard Learn. Select the text and right-click to copy it. You may also use key combinations for copying and pasting:

Windows: CTRL+A to select all the text, CTRL+C to copy, and CTRL+V to paste.

Mac: COMMAND+A to select all the text, COMMAND+C to copy, and COMMAND+V to paste.

Simple Content Editor Features

In the content editor's simple mode, you see a single row of functions. Click the show more ( ) function—represented by two down pointing arrows—to access more editor functions.

The following table defines each function.

Simple Mode Functions

Function

Description

Bold the selected text.

Italicize the selected text.

Underline the selected text.

Select the font face for the text. Click the down arrow next to the displayed current font to select from a list of all available fonts.

Select the size of the text. Click the down arrow next to the displayed current font size to select from a list of all available font sizes.

Set the text color. Click the down arrow to select a different text color.

Enter text to the right of the current mouse pointer location (default).

Enter text to the left of the current mouse pointer location.

Add a thin horizontal line to the current mouse pointer position, spanning the entire width of the text area.

Add a thin centered line, setting width, height relative to the current mouse pointer position, and whether to use shadows. To learn more, see Inserting Lines and Horizontal Rules.

Insert a nonbreaking space character at the current mouse pointer position.

Begin the automatic spell check. Click the down arrow to select a different language. To learn more, see Using the Spell Checker.

Advanced Mode Functions in Row 3

Row 3 Functions

Description

Add a link to a file in the text box. The Insert Content Link window appears. You can link to the following file types: DOC, DOCX, EXE, HTML, HTM, PDF, PPT, PPTX, PPS, PPSX, TXT, WPD, .XLS, XLSX, and ZIP. You can link to a file from your computer, from Course Files, the Content Collection, or a URL.

Embed an image in the text box or edit an existing selected image. The Insert/Edit Image window appears. You can add the following file types: GIF, JPG, JPEG, BMP, PNG, and TIF. You can add images from your computer, from Course Files or the Content Collection, or a URL. To learn more, see Adding Images.

Embed a media clip in the text box or edit an existing selected media object. The Insert/Edit Media window appears. From the Type drop-down list, select the type of media you want to add: Flash (default), HTML 5 video, QuickTime, Shockwave, Windows Media, Real Media, lframe, and Embedded Audio. You can add media files from your computer, from Course Files or the Content Collection, or a URL. To learn more, see Adding Media Files.

Click to show all nonprinting characters. Click again to hide them from view.

Format the text as a blockquote.

Opens the Select Special Character window. Select a symbol to insert at the current mouse pointer position.

Opens the Insert Emoticon window. Select the emoticon to insert at the current mouse pointer position.

Position the mouse pointer where you want the anchor to appear and click to open the Insert/Edit Anchor window. Use anchors to position (anchor) other items and objects, such as images. To learn more, see Using Anchors.

Opens a preview window so you can see how the content will appear after publishing.

Click to open the Insert/Edit Table window. To learn more about tables, see Working With Tables.

Click to open the Table Row Properties window.

Click to open the Table Cell Properties window.

Insert a blank row in the table above the current mouse pointer position.

Insert a blank row in the table after the current mouse pointer position.

Delete the current row from the table. If you select multiple rows, all are deleted.

Insert a blank column in the table to the left of the current mouse pointer position.

Insert a blank column in the table to the right of the current mouse pointer position.

Delete the current column from the table. If you select multiple columns, all are deleted.

Merge two or more selected table cells into a single cell.

Split previously merged table cells. If the cell or cells are not ones that were merged, nothing happens.

Click to open the HTML Code View window. Then, you can directly edit the content HTML code. This feature is intended for experienced web developers. To learn more, see HTML Code View.

Edit the cascading style sheet (CSS). This feature is included for experienced web developers. To learn more, see Advanced Image Settings.

Working With Lists

Ordered/Numbered List: Creates an ordered or numbered list, or adds a numbered list item. Click the down arrow ( ) to select from the available list ordering schemes. Choices include:

Alphabetic

Roman numerals

Greek symbols

Bullet List: Creates an unordered or bullet list, or adds a bulleted list item. Click the down arrow ( ) to select from the available bullet list symbols.

Spacing Between Bulleted or Numbered Items

You can easily increase the amount of space between bulleted or numbered items. You can do this in the WYSIWYG view or code view.

By default, bulleted and numbered lists have the same spacing as lines in a paragraph. Each item in the list uses the <li> tag to create each bulleted or numbered item.

Adjust Spacing in WYSIWYG View

In WYSIWYG view, after you create your list, place your mouse pointer at the end of each bulleted or numbered line and click SHIFT + ENTER. You are adding a line space between each list item. If you continue to click the key combination, additional line spaces are added. In code view, you will see <br /><br /> for each line space. This code appears inside each bulleted or numbered item's closing tag (the </li>).

Adjust Spacing in Code View

If you want to control the amount of spacing between list items, you need to work in code view. In the content editor, click ( ) to access the HTML code view window. You can add an amount to each tag creating each list item. For example, where you see <li>, replace each with <li style="margin-bottom: 8px;">. For the 8px, you can add the amount you need. The spacing is added to the bottom of each bulleted or numbered item, creating space between the list items.

You can adjust paragraph spacing using the same methods.

Using the Spell Checker

Click the spell checker ( ) icon to turn the automatic spell check function on or off. Click the down arrow to select a different language's dictionary. You will see wavy, red underlining for words detected as potentially misspelled or not found in the loaded dictionary. If you resume typing text, the spell checker function switches off.

Right-click an underlined word to view a menu, allowing you to:

See a list of suggested correction.

Ignore the single instance.

Ignore all occurrences of the indicated word.

Your institution determines if the spell checker function is available and which spelling dictionaries are loaded in.

Using Find and Replace

Use find ( ) to search for matching text and, optionally, replace it with other text.

Finding Text

In the pop-up window, click the Find tab and type the text to find.

For Direction, choose whether to search up or down from the current mouse pointer position. Select the Match Case check box to match upper and lower case. Clear the check box to ignore case. If the text is located, it appears highlighted in the text box.

Click Find Next to locate the next match or Close to close the window.

You can also click the Replace tab to switch to the replace text function.

Replacing Text

To search for and replace text from one tab, click the Replace tab.

Type the text you want to replace. For Direction, choose whether to search up or down from the current mouse pointer position. Select the Match Case check box to match upper and lower case. Clear the check box to ignore case. Click Enter or Return. If the text is located, it appears highlighted in the text box.

In the Replace with text box, type the text to replace the located text with and choose an action:

Replace: Replace the next instance found.

Replace All: Replace every matched instance.

Find Next: Find the next match and highlight it, but do not change the text.

You can also click the Find tab to switch to the search-only function.

Using the Link Function

Select text or an object, and click the link function ( ) to add a new hyperlink or edit an existing hyperlink. To remove a link, select the link and click the remove link function ( ). You can also link and remove links using the right-click contextual menu. You must use the http:// protocol when typing or pasting an address for the link.

Unless you select text or an object, the insert/edit link and remove link functions are grayed out and unavailable. If you click remove link for something that has no hyperlink, nothing happens.

You can specify a link to a website, a file from your computer, Course Files, or the Content Collection.

In the Target drop-down list,choose where to open the link:

Open in this window/frame.

Open in a new window.

Open in parent window/frame.

Open in top frame, replacing all current frames.

Type an optional title for the window or frame displayed when users click the link. Optionally, select a link class. If no other choices are available, the drop-down list may only show Not Set.

Inserting Lines and Horizontal Rules

Line: Click the line function ( ) to add a thin horizontal line to the current mouse pointer position, spanning the entire width of the text area.

Width in pixels or as a percentage of the total available width of the text area.

Height of the line relative to the current position.

Whether to have the line shadowed or not—default is with shadow.

Use the Width drop-down list to choose pixels or percentage. Use the Height drop-down list to choose Normal or a height increment from 1 to 5. Click Insert to add the line or Cancel to close the window.

Adding Images

Click the insert/edit image function ( ) to embed an image in the text area or edit an existing selected image. Alternatively, embed an image using the right-click contextual menu. You can also use the options in the contextual menu to edit the properties of an existing selected image.

You can add the common image types, such as GIF, JPG, JPEG, BMP, PNG, and TIF.

Whenever possible, use compact, compressed file formats such as JPG or PNG to reduce the time required to download the embedded image.

General Image Settings

On the General tab, embed an image from one of the following:

To create a link to a file outside of the local system, type or paste a URL in the Image URL text box. You must use the http:// protocol.

To email a link to a file you are including, you must first submit the content item so the file can be assigned a permanent URL. In the Content Collection or Course Files, access the file's 360 view. Copy the permanent URL address and paste it in an email.

Image description: Optionally, type a description for the image. Recommended for accessibility readers.

Title: Optionally, type a title for the image.

Appearance Settings

The Appearance tab allows you to control image placement and appearance. A sample thumbnail display on the right side of the window shows how the various choices will appear.

If you select the check box for Constrain Proportions and add a measurement, the image is resized without horizontal or vertical distortion.

Vertical space: In pixels, the margin reserved above and below the image.

Horizontal space: In pixels, the margin reserved on either side of the image.

Border: In pixels, applies a border around the image.

Style: Whenever you change the appearance settings, this box displays the HTML code used to format the image. If necessary, you can enter additional code or alter the existing code.

Advanced Image Settings

Use the advanced image settings to specify an alternative image based on mouse activity. You can also set additional identification, language, and link parameters. Normally, you do not need to set or change these settings.

Adding Media Files

Click the insert/edit embedded media function ( ) to embed a media clip in the text area or edit an existing selected media item. You can also use the right-click contextual menu to edit the properties of an existing selected media clip.

General Media Settings

Type: From the drop-down list, select the type of media you want to add, including:

Flash (default)

QuickTime

Shockwave

Windows Media

Real Media

lframe

Embedded Audio

To create a link to a media file outside of the local system, type or paste a URL in the File/URL text box. You must use the http:// protocol.

To email a link to a file you are including, you must first submit the content item so the file can be assigned a permanent URL. In the Content Collection or Course Files, access the file's 360 view. Copy the permanent URL address and paste it in an email.

Dimensions: Size displayed in pixels. Important: If not set, the actual size populates the boxes.

If you select the check box for Constrain Proportions and add a measurement, the file is resized without horizontal or vertical distortion. You are able to preview the file in the window.

Advanced Media Settings

On the Advanced tab, you can set advanced display parameters, as well as a number of options specific to Flash media only.

Advanced:

ID: Set an identification code for the media.

Name: Type a name for the media.

Align: Set whether to align the media to the top, right, bottom, or left.

Background: Set a background color for the media.

V-Space and H-Space: Set vertical and horizontal margins for space around the embedded media.

Flash options:

Quality: Set the playback quality for the Flash media. Choices are high, low, autolow, autohigh, and best.

Scale: Select a resizing option for Flash media. Choices are show all, no border, exact fit, and no scale.

WMode: Set a display mode for the media. Choices are window, opaque, and transparent.

SAlign: Set the position alignment for the media within the Flash media player. Choices are left, top, right, bottom, top left, top right, bottom left. and bottom right.

Auto Play: Select to have the Flash media play automatically when selected.

Loop: Select so the media file loops (replays) after reaching the end.

Show Menu: Select to show the Flash media player menu.

SWLiveConnect: Used only in older Flash media. When selected, allows the player and browser to exchange information. Typically, this parameter is not necessary.

Base and Flash Vars: Manually configure the Flash options. These features are intended for advanced web developers needing a high degree of control and customization over the Flash player appearance and behavior.

Media Source Settings

In the Source tab, you can enter custom media HTML code. This feature is intended for advanced web developers.

Adding Mashups

A mashup combines elements from two or more sources. When you view a YouTube™ video in a Blackboard Learn course as part of the course content, you are experiencing a mashup.

Click the insert mashup function ( ) to display a drop-down list and select from the following:

After you select a mashup type, you can search for content to fit your course. Then, you set viewing and presentation options.

Note: After selecting a YouTube video, choose No for the Show YouTube Information option if you do not want to show YouTube’s suggested videos at the end of playback.

Before submitting, click the preview function ( ) to see how the mashup will appear in the content item. Close the preview window to make changes. When you are satisfied with the selection and options, click Submit to continue or Cancel to abort adding the mashup.

To learn more about how instructors can use mashups in their courses, see How to Create Mashups. To learn more about how students can use mashups, see Mashups.

Using the Math Editor

The math editor delivered within the content editor provides an interface for creating and managing math formulas in your course. The math editor is written by WIRIS and is standard- based using the latest MathML standard for describing math formulas for display in browsers. Additionally, the created formulas are saved as the MathML for future editing AND as a PNG file for rapid deployment to browsers.

Rich Set of Features

Basic operations

Matrix calculus

Calculus and series

Logic and set theory

Units

Greek alphabet

Math Editor Highlights

The math editor automatically converts formulas and equations to images so that users do not need to download an applet to view them. The formulas and equations continue to remain fully editable for an author.

The math editor supports copying and pasting of MathML formulas and equations directly in the editor.

Working With Tables

Click the insert/edit table function ( ) to begin adding a table in the text area. Alternatively, you can use the insert/edit table command from the right-click contextual menu.

Most of the table functions are unavailable (grayed out) unless you place the mouse pointer inside an existing table.

General Tab

On the General tab, you can set the basic properties for a table. Note that after creation, you can edit a table using the table functions and commands. You can resize a table by clicking and dragging the table border anchors.

Columns: Type the initial number of columns for the table. The default is set to two columns.

Rows: Type the initial number of rows for the table. The default is set to two rows.

Cell Padding: Type a number in pixels for the individual table cells' padding.

Cell Spacing: Type a number in pixels to separate the table cells.

Alignment: Select the table alignment: center, left, or right. If not set, the current paragraph alignment is used.

Border: Creates a simple black line border around the table. Type a number in pixels for the width of the table border. The default is set to one pixel.

Width: Set the width of the table in either pixels or a percentage of the available display width. The default is set to 200 pixels.

Height: Set the height of the table in either pixels or a percentage of the available display height. If left blank, the table is sized automatically as needed to fit the content.

Class: Set the HTML class for the table. If your setup does not use classes, ignore this setting

Table Caption: Select the check box so the table is created with a caption cell at the top. A table caption appears as the title of the table.

Rules: Set rules for the table content: none, groups, rows, cols, or all.

Language Direction: Set whether text entered in the table goes left to right or right to left from the mouse pointer position.

Border Color: Set the color for the table border.

Background Color: Set the background color for the table.

Setting Row and Cell Properties

Row properties affect an entire table row or a number of selected table rows. Cell properties affect the current table cell or a number of selected cells.

Row Properties

Click inside an existing table and click the table row properties function () to open the Table Row Properties window. You can set formatting parameters to control how the contents of a table row or selected rows will appear.

General Tab

On the General tab, you can:

Row Type: Set whether the row is a header, body, or footer.

Alignment: Set the alignment of the row’s cell contents to center, left, or right.

Vertical alignment: Set the alignment of the row’s cell contents to top, center, or bottom.

Class: Set the row content HTML class. If classes are not used, ignore this setting.

Height: Manually set the height of the row. Otherwise, the row expands or contracts as needed to fit the contents.

Editing Tables

Click inside an existing table to make the table editing functions active in the content editor.

Table Editing Functions

Function

Description

Click to open the Insert/Edit Table window. If clicked inside a table, a new table is created inside the first one.

Click to open the Table Row Properties window.

Click to open the Table Cell Properties window.

Insert a blank row before the current mouse pointer position.

Insert a blank row after the current mouse pointer position.

Delete the current row from the table. If you select multiple columns, all of them are deleted.

Insert a blank column to the left of (preceding) the current mouse pointer position.

Insert a blank column to the right of (following) the current mouse pointer position.

Delete the current column from the table. If you select multiple columns, all of them are deleted.

Merge two or more selected cells into a single table cell.

Split previously merged table cells. If the cell or cells are not ones that were merged, nothing happens.

To resize a table, in addition to using table, row, or cell properties, you can also press and drag one of the table border anchors. These are positioned at each of the table corners—to make the entire table larger or smaller. You will also find them in the middle of each side—left, right, top, and bottom—to resize the table horizontally or vertically.

Right-Click Contextual Menus

You can also right-click anywhere inside an existing table to access a contextual menu. Select Insert/Edit Table to access some editing properties for an existing table.

Using Anchors

You can use anchors to position (anchor) other items and objects, such as images. Position the mouse pointer where you want the anchor to appear, and click the anchor function ( ) to open the Insert/Edit Anchor window. Type a name for the anchor and click Insert to add it.

To modify an existing anchor, select it and click the anchor function.

To remove an anchor, select it and press the Delete key.

Deleting an anchor also deletes the object or text anchored to it.

Advanced Functions

HTML Code View

Click the HTML code view function ( ) to open the HTML code view window. Then, you can directly edit the content HTML code. When finished, click Update to apply your changes or Cancel to abort.

The content editor performs some code verification. To keep the code valid and working, HTML tags are added or removed as needed. However, you might enter invalid codes or tags, and the content editor's auto-correcting capabilities may not catch all issues. Displayed results can be unpredictable.

This feature is intended for experienced web developers.

Editing CSS

In the Edit CSS Style window, using the tabs and individual settings, you can customize nearly all of the basic formatting defaults for the current content editor display. Each tab controls a different category of style overrides.

Text: Set the font face, size, style, weight, and aspects of text appearance.

Background: Use a background color or image, and set how it is displayed.

Block: Set formatting options at the paragraph level, including word and letter spacing, alignment, indenting.

Box: Set defaults for drawn boxes.

Border: Set the style, width, and color for all aspects of table and object borders.

List: Set defaults for formatted lists.

Positioning: Set the overall page positioning, placement, and clipping preferences.

Click Apply or Update to make the changes or Cancel to abort.

Using the Right-Click Contextual Menu

In the content editor, you can place your mouse pointer in the text area and right-click to access a contextual menu. The menu includes the editor's most commonly used functions.

Cut: Cut the selected text or object.

Copy: Copy the selected text or object.

Paste: Paste the most recently cut or copied text or object.

Link: Visible only when you select text or an object and opens the insert/edit link window. To learn more, see Using the Link Function.

Remove Link: Visible only when you select text or an object and removes any hyperlink. If you click remove link for something that has no hyperlink, nothing happens.

Alignment: Open a sub-menu, allowing you to align text to the left margin , center , right margin , or both margins .

Insert/Edit Table: Place your mouse pointer inside an existing table and click this option to access the available editing features.

Cut, copy, and paste functions may not be available in all browsers.

Keyboard Shortcuts for the Content Editor

The content editor supports the keyboard shortcuts listed in the following table. Please note that Mac users use the COMMAND key instead of the CTRL key. In the table, these are indicated by "MAC:" and COMMAND is abbreviated as CMD. Following the table, you can use the additional keyboard shortcuts listed to navigate the content editor toolbar.

If you use the shortcut keys that move selected items one character left, right, up, or down, the object you are moving is absolutely positioned. An absolutely positioned element is determined by pixels so moving it up once moves it up one pixel.

Keyboard Shortcuts

Keyboard Shortcut

Description

RIGHT ARROW

Move one character to the right.

LEFT ARROW

Move one character to the left.

DOWN ARROW

Move down one line.

UP ARROW

Move up one line.

CTRL+RIGHT ARROW MAC: CMD+RIGhT ARROW

Move right one word.

CTRL+LEFT ARROW MAC: CMD+LEFT ARROW

Move left one word.

END

Move to the end of the line.

HOME

Move to the start of the line.

CTRL+DOWN ARROW MAC: CMD+DOWN ARROW

Move down one paragraph.

CTRL+UP ARROW MAC: CMD+UP ARROW

Move up one paragraph.

PAGE DOWN

Move down one page.

PAGE UP

Move up one page.

CTRL+HOME MAC: CMD+HOME

Move to the beginning of the text.

CTRL+END MAC: CMD+END

Move to the end of the text.

Selection

SHIFT+RIGHT ARROW

Extend the selection one character to the right.

SHIFT+LEFT ARROW

Extend the selection one character to the left.

CTRL+SHIFT+RIGHT ARROW MAC: CMD+SHIFT+RIGHT ARROW

Extend the selection right one word.

CTRL+SHIFT+LEFT ARROW MAC: CMD+SHIFT+LEFT ARROW

Extend the selection left one word.

SHIFT+UP ARROW

Extend the selection up one line.

SHIFT+DOWN ARROW

Extend the selection down one line.

SHIFT+END

Extend the selection to the end of the current line.

SHIFT+HOME

Extend the selection to the start of the current line.

SHIFT+PAGE DOWN

Extend the selection down one page.

SHIFT+PAGE UP

Extend the selection up one page.

CTRL+SHIFT+END

Extend the selection to the end of the document.

CTRL+SHIFT+HOME MAC: CMD+SHIFT+HOME

Extend the selection to the beginning of the document.

CTRL+A MAC: CMD+A

Select all elements in the document.

Editing

BACKSPACE

Delete the selection. Or, if you make no selection, delete the character to the left of the mouse pointer.

CTRL+BACKSPACE MAC: CMD+BACKSPACE

Delete all of a word to the left of the mouse pointer.

CTRL+C MAC: CMD+C

Copy the selection.

CTRL+V MAC: CMD+V

Paste cut contents or copied contents.

CTRL+X MAC: CMD+X

Cut the selection.

DELETE

Delete the selection.

INSERT

Toggle between inserting and overwriting text.

CTRL+Z MAC: CMD+Z

Undo the most recent formatting command.

CTRL+Y MAC: CMD+Y

Redo the most recent undone command.

CTRL+F MAC: CMD+F

Find text.

SHIFT+F10

Display the contextual menu. This is the same as a right-click.

Formatting

CTRL+B MAC: CMD+B

Select or clear bold formatting.

CTRL+I MAC: CMD+I

Select or clear italic formatting.

CTRL+U MAC: CMD+U

Select or clear underlining.

Keyboard Shortcuts for the Content Editor Toolbar

The content editor toolbar supports the following keyboard shortcuts:

When you access the content editor for the first time, you are automatically placed in the editing window. To move to the toolbar from the editing window, use Alt+F10 (PC) or Alt+CMD+F10 (Mac). The focus is placed on the top row, first icon on the left.

In the toolbar, use the right arrow ( > ) and left arrow ( < ) keys to move forward and backward within the toolbar. The down and up arrows do not work to navigate to different rows within the toolbar. Use the arrow keys to move to the end of one row and then up or down to the next row.

To select an icon on the toolbar, press the Enter key. You are placed back in the editing window.

To go back to the toolbar, use the same keyboard shortcuts: Alt+F10 (PC) or Alt+CMD+F10 (Mac). The focus lands on the last icon you accessed.

Use the Tab key to leave the content editor and move to the next field on the page.

Use Shift+Tab to leave the content editor and move to the previous field on the page.