Blackboard Content Editor

Contents

Return to Top 

Watch a Tutorial


Return to Top

About the Content Editor

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.

Return to Top

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.

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

The advanced mode includes every available formatting and object attachment function. Click the show less ( show less button ) 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.

Return to Top

Simple Content Editor Features

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

Image illustrating associated text

By default, Blackboard Learn formats text to 12-point, left-justified Arial. Use the content editor functions to apply other formatting. The following table defines each function.

 
Function Description
bold text button Bold the selected text.
italics button Italicize the selected text.
underline text button Underline the selected text.
select font face 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 font size 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.
select text color button Set the text color. Click the down arrow to select a different text color.
create bulleted list button Create a bulleted list.
create numbered list button Create a numbered list.
spell check button Begin the automatic spell check. Click the down arrow to select a different language.
create hyper link button Add a new or edit an existing hyperlink. To learn more, see Using the Link Function.
remove hyper link button Remove a hyperlink from the selected text or object.
preview button Opens a preview window showing how the content will appear after submitting.
help button Open the context editor help information pop-up display.
expand to full screen button Expand the content editor window to fill the entire browser frame.
Open advanced content editor button Access the advanced content editor features.

Return to Top

Advanced Content Editor Features

In the content editor’s advanced mode, you see three rows of functions. Click the show less ( Show less button ) function—represented by two down pointing arrows—to view only one row of functions.

Image illustrating associated text.

The following tables describe each function starting with Row 2 (Row 1 in Advanced Content Editor Features is the same as Simple Content Editor Features).

 
Row 2 Functions Description
cut button Cut the selected items.
copy button Copy the selected items.
paste button Paste the most recently copied or cut items.
find and replace button Search for and replace text.
undo button Undo the previous action.
redo button Redo the previous action—available only if an action has been undone.
align to the left button Align text to the left margin.
align to the center button Align text in the center.
align to the right button Align text to the right.
fully justify text button Align text to both the left and right margins.
indent button Move the text or object to the right (indent). Click again to indent further.
outdent button Move the text or object to the left (outdent). Click again to outdent further. You cannot outdent text beyond the left margin.
superscript button Make the text into a superscript.
subscript button Make the text into a subscript.
create hyperlink button Add a new or edit an existing hyperlink. To learn more, see Using the Link Function.
remove hyperlink button Remove a hyperlink from the selected text or object.
enter text to the right of the mouse pointer Enter text to the right of the current mouse pointer location (default).
enter text to the left of the mouse pointer Enter text to the left of the current mouse pointer location.
add horizontal line button Add a thin horizontal line to the current mouse pointer position, spanning the entire width of the text area.
add a horizonal rule button 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.
add a non-breaking space button Insert a nonbreaking space character at the current mouse pointer position.
spell check button Begin the automatic spell check. Click the down arrow to select a different language.
 
Row 3 Functions Description
insert file button 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.
insert image button 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.
insert media button 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.
open math equation editor button Opens the WIRIS Formula Editor page—the visual math equation editor page.
insert mashup button Add a mashup.
show all non-print characters button Click to show all nonprinting characters. Click again to hide them from view.
blockquote button Format the text as a blockquote.
insert special character button Opens the Select Special Character window. Select a symbol to insert at the current mouse pointer position.
insert emoticon button Opens the Insert Emoticon window. Select the emoticon to insert at the current mouse pointer position.
create anchor button 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.
preview button Opens a preview window so you can see how the content will appear after publishing.
insert a table button Click to open the Insert/Edit Table window. To learn more about tables, see Working With Tables.
table row properties button Click to open the Table Row Properties window.
table cell properties button Click to open the Table Cell Properties window.
insert row above button Insert a blank row in the table above the current mouse pointer position.
insert blank row below button Insert a blank row in the table after the current mouse pointer position.
delete row button Delete the current row from the table. If you select multiple rows, all are deleted.
insert column before button Insert a blank column in the table to the left of the current mouse pointer position.
insert column after button Insert a blank column in the table to the right of the current mouse pointer position.
delete column button Delete the current column from the table. If you select multiple columns, all are deleted.
merge cells button Merge two or more selected table cells into a single cell.
split table button Split previously merged table cells. If the cell or cells are not ones that were merged, nothing happens.
open HTML code view 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.
edit CSS button Edit the cascading style sheet (CSS). This feature is included for experienced web developers.

 

Using the Link Function

Select text or an object, and click the link function (create hyperlink button ) to add a new hyperlink or edit an existing hyperlink. To remove a link, select the link and click the remove link function ( remove hyperlink button ). 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.

Tab for link settings

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.

Return to Top

Inserting Lines and Horizontal Rules

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

Horizontal Rule: Click the horizontal rule function ( insert horizontal rule button ) to add a thin centered line. You can set the following options:

  • 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
  • Shadow 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.

Tab for horizontal rule settings

Return to Top

Adding Images

Click the Insert/Edit Image function ( insert image button ) 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.

Return to Top

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.
  • Click Browse My Computer to upload a file from your computer. You can also upload a file from the course’s storage repository:
      • If Course Files is the course’s storage repository, click Browse Course.

    -OR-

    • Click Browse Content Collection.

You can email a link to a file you are including. 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.

Return to Top

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.

Appearance tab for image settings

  • Alignment: Placement of the image relative to the nearby text. Choices include baseline, top, middle, bottom, text top, text bottom, left, and right.
  • Dimensions: Image size displayed in pixels. Important: If not set, the actual image size populates the boxes.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.

Return to Top

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.

Advanced tab for image settings

Return to Top

Adding Media Files

Click the Insert/Edit Embedded Media function ( insert media button ) 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.

Return to Top

General Media Settings

General tab for Media Settings

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

  • Flash (default)
  • QuickTime
  • Shockwave
  • Windows Media
  • Real Media
  • lframe
  • Embedded Audio

You can email a link to a file you are including in a content item. In the Content Collection or Course Files, access the file’s 360° view. Copy the permanent URL address and paste it in an email.

  • 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.
  • Click Browse My Computer to upload a file from your computer. You can also upload a file from the course’s storage repository:
    • If Course Files is the course’s storage repository, click Browse Course.

    -OR-

    • If your institution licenses content management, click Browse Content Collection.
  • 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.

Return to Top

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 tab for Media Settings

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.

Return to Top

Media Source Settings

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

Return to Top

Working With Tables

Click the insert/edit table function ( create table button ) 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.

Return to Top

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.

General tab for properties

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

Return to Top

Advanced Tab

On the Advanced tab, you can set additional properties for a table.

Advanced tab for tables

  • ID: Type a table description or identifier.
  • Summary: Type a description for a table.
  • Style: Allow HTML code overrides for the placement, size, appearance, and border.
  • Language Code: Assign a language code to a table— used in translations.
  • Background Image: Use a graphic image to appear as a background for a table. You can provide a URL to create a link to an image file outside of the local system.
      • Click Browse My Computer to upload a file from your computer. You can also upload a file from the course’s storage repository:
      • If Course Files is the course’s storage repository, click Browse Course.

    -OR-

    • Click Browse Content Collection.
  • Frame: Set the table frame parameter: void, above, below, hsides, lhs, rhs, vsides, box, or border.
  • 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.

Return to Top

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.

Return to Top

Row Properties

Click inside an existing table and click the table row properties function (row properties) 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 for row properties

Return to Top

General Tab

On the General tab, set the following properties:

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

From the drop-down list at the bottom of the window, select the rows:

  • Update the current row or selected rows only (default).
  • Update odd rows in the table.
  • Update even rows in the table.
  • Update all rows in the table.

Return to Top

Advanced Tab

On the Advanced tab, you can set additional row properties:

    • ID: Type a row description or identifier.
    • Style: Allow HTML code overrides for the placement, size, appearance, and border.
    • Language Direction: Set whether text entered in the row goes from left to right or right to left from the mouse pointer position.
    • Language Code: Assign a language code to a row—used in translations.
    • Background Image: Use a graphic image to appear as a background for a row. You can provide a URL to create a link to an image file outside of the local system.
      • Click Browse My Computer to upload a file from your computer. You can also upload a file from the course’s storage repository:
        • If Course Files is the course’s storage repository, click Browse Course.

        -OR-

        • Click Browse Content Collection.
      • Background Color: Set the background color for the row.

advanced tab for row properties.

Return to Top

Cell Properties

Click the table cell properties function (cell properties) to open the Table Cell Properties window. You can set formatting parameters to control how the contents of a table cell or selected cells will appear.

General tab for cell properties

Return to Top

General Tab

On the General tab, set the following properties:

  • Alignment: Set the alignment for a cell contents to center, left, or right.
  • Cell Type: Set a cell content type to data or header.
  • Vertical Alignment: Set the alignment for a cell contents to top, center, or bottom.
  • Scope: Expand the modification selection beyond an individual cell and applies the changes to a column, row, row group, col group.
  • Width: Manually set the width of a cell.
  • Height: Manually set the height of a cell.
  • Class: Set the row content HTML class. If classes are not used, ignore this setting.

From the drop-down list at the bottom of the window, select the cells:

  • Update the current cell or selected cells only (default).
  • Update all cells in a row.
  • Update all cells in a table.

Return to Top

Advanced Tab

On the Advanced tab, you can set additional cell properties:

Advanced tab for cell properties

  • ID: Type a cell description or identifier.
  • Style: Allows HTML code overrides for the placement, size, appearance, and border.
  • Language Direction: Set whether text entered in a cell goes from left to right or right to left from the mouse pointer position.
  • Language Code: Assign a language code to a cell—used in translations.
  • Background Image: Use a graphic image to appear as a background for a cell. You can provide a URL to create a link to an image file outside of the local system.
    • Click Browse My Computer to upload a file from your computer. You can also upload a file from the course’s storage repository:
        • If Course Files is the course’s storage repository, click Browse Course.

      -OR-

      • Click Browse Content Collection.
    • Border Color: Set the color for a cell border.
    • Background Color: Set the background color for a cell.

Return to Top

Editing Tables

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

 
Function Description
create table button Click to open the Insert/Edit Table window. If clicked inside a table, a new table is created inside the first one.
table row properties button Click to open the Table Row Properties window.
table cell properties button Click to open the Table Cell Properties window.
insert row above button Insert a blank row before the current mouse pointer position.
insert row below button Insert a blank row after the current mouse pointer position.
delete row button Delete the current row from the table. If you select multiple columns, all of them are deleted.
insert column to the left button Insert a blank column to the left of (preceding) the current mouse pointer position.
insert column to the right button Insert a blank column to the right of (following) the current mouse pointer position.
delete column button Delete the current column from the table. If you select multiple columns, all of them are deleted.
merge cells button Merge two or more selected cells into a single table cell.
split cells button 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.

Return to Top

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.

Return to Top